cloning-websites-to-weaverse
starsforks
How to install cloning-websites-to-weaverse?
weaverse/shopify-hydrogen-skills/cloning-websites-to-weaverse
$npx -y skills add Weaverse/shopify-hydrogen-skills --skill cloning-websites-to-weaverseUse when recreating a reference website or brand hub in this Hydrogen plus Weaverse repo, especially when deciding whether to reuse sections, add global styles, update theme schema, or resolve conflicts between the live site and project brand guidelines.
SKILL.md
| 1 | # Cloning Websites to Weaverse |
| 2 | |
| 3 | ## Overview |
| 4 | |
| 5 | Use this repo-specific workflow to turn a reference website into maintainable Weaverse pages. Optimize for reusable sections, accurate section matching, and clear schema boundaries, not one-off screenshot cloning. |
| 6 | |
| 7 | **Priority order:** brand guideline beats source website on visual conflicts. The source website drives page structure, content flow, interaction patterns, and merchandising logic. |
| 8 | |
| 9 | ## Conflict Rule |
| 10 | |
| 11 | `.guides/brand-guideline.md` is the source of truth. |
| 12 | |
| 13 | If the live site conflicts with the brand guideline, you MUST follow the brand guideline. |
| 14 | This is mandatory even when: |
| 15 | |
| 16 | - a stakeholder says `make it look like the live site` |
| 17 | - leadership will compare screenshots |
| 18 | - the live site appears newer or more polished |
| 19 | |
| 20 | Use this rule: |
| 21 | |
| 22 | 1. Match the source site where it does not conflict. |
| 23 | 2. Follow the brand guideline where conflict exists. |
| 24 | 3. If unsure, default to the brand guideline. |
| 25 | |
| 26 | In conflict cases, explicitly state: `I will match the live site where possible, but the brand guideline is the source of truth for conflicting decisions.` |
| 27 | |
| 28 | ## When to Use |
| 29 | |
| 30 | - Cloning a marketing page, homepage, or brand hub into this repo |
| 31 | - Rebuilding a live page in `app/sections/` and Weaverse |
| 32 | - Deciding between existing sections, new sections, `app/styles/app.css`, and `app/weaverse/schema.server.ts` |
| 33 | - Mapping a reference site's section system onto this repo's registered Weaverse components |
| 34 | |
| 35 | Do not use this for tiny copy-only edits or isolated bug fixes. |
| 36 | |
| 37 | ## Required Inputs |
| 38 | |
| 39 | - reference URL or origin site to migrate |
| 40 | - `.guides/brand-guideline.md` |
| 41 | - `sections.md` |
| 42 | - `app/weaverse/components.ts` |
| 43 | |
| 44 | ## Required Outputs |
| 45 | |
| 46 | - **Clone preview route**: a single Hydrogen route (`app/routes/clone-preview.$page.tsx`) that renders the full cloned page as React + Tailwind — user must approve this before section decomposition begins |
| 47 | - **Design spec**: section mapping, interaction model, schema boundaries, implementation direction |
| 48 | - **Content manifest**: per-section table of real asset URLs, text content, link targets, Shopify references, and media types — all sourced from the Firecrawl scrape |
| 49 | |
| 50 | The clone preview route is the verification checkpoint. The design spec and content manifest together form the complete handoff to `generating-weaverse-project-json`. |
| 51 | |
| 52 | ## Source of Truth |
| 53 | |
| 54 | | Need | Source | |
| 55 | | --- | --- | |
| 56 | | Colors, type, logo, shape language, legal rules | `.guides/brand-guideline.md` | |
| 57 | | Section order, content hierarchy, CTA flow, merchandising | crawled reference website | |
| 58 | | Existing reusable section matches and child block constraints | `sections.md` | |
| 59 | | Registry of currently available Weaverse components | `app/weaverse/components.ts` | |
| 60 | | Shared tokens and repeated cross-section styles | `app/styles/app.css` | |
| 61 | | Sitewide editable controls | `app/weaverse/schema.server.ts` | |
| 62 | | Section-local content and controls | section `schema` in `app/sections/*` | |
| 63 | |
| 64 | ## Workflow |
| 65 | |
| 66 | 1. Read `.guides/brand-guideline.md` first. |
| 67 | 2. Ensure `sections.md` exists and is trustworthy before doing section matching. |
| 68 | 3. **Scrape the origin page** using Firecrawl with both markdown and HTML formats in a single call: |
| 69 | ```bash |
| 70 | firecrawl scrape "<url>" --format markdown,html -o .firecrawl/<site>-<page>.json |
| 71 | ``` |
| 72 | This returns both clean markdown (for content extraction) and raw HTML (for layout/media analysis) in one request. For pages with JS-rendered content, add `--wait-for 3000`. |
| 73 | 4. If the page links to supporting subpages that affect the section system, **crawl** those too: |
| 74 | ```bash |
| 75 | firecrawl crawl "<url>" --include-paths <relevant-paths> --limit 10 --max-depth 1 --wait -o .firecrawl/<site>-crawl.json |
| 76 | ``` |
| 77 | 5. Extract the source page DNA from the markdown + HTML output: |
| 78 | - design tokens: colors, typography, spacing, border radius, container widths |
| 79 | - page structure: section order, repeated patterns, CTA flow, merch flow |
| 80 | - content assets: headings, copy blocks, imagery, video, product/collection modules |
| 81 | - media sources: extract `<video>`, `<source>`, `<iframe>`, `<embed>` URLs from the HTML (see Firecrawl Rules → Media source extraction) |
| 82 | 6. **Build the content manifest** (see Content Manifest section below). This is a required deliverable — the design spec is incomplete without it. |
| 83 | 7. **Generate the clone preview route** (see Clone Preview Route section below). Convert the scraped page into a single Hydrogen route at `app/routes/clone-preview.$page.tsx` that renders the entire page as React + Tailwind. This is a single file with all visual blocks rendered inline — no separate component files. Include desktop and mobile responsive styles. The route must be visually faithful to the origin pa |
People who liked this also viewed
6 picksType
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026
- request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026
- explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026
- ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
