clone-websitelisted

# Clone Website Skill Transform any website into production-ready Next.js 16 code using Firecrawl MCP. ## Workflow Execute these 3 phases in order. **Never skip Phase 2.** ### Phase 1: Scrape 1. Extract URL from user request 2. Identify section filter if specified (e.g., "hero only", "just the pricing") 3. Scrape using Firecrawl: ``` firecrawl-mcp___firecrawl_scrape: url: [TARGET_URL] formats: ["markdown", "html"] onlyMainContent: true ``` 4. If scrape fails, fallback to `firecrawl-mcp___firecrawl_crawl` ### Phase 2: Analysis (MANDATORY) **STOP. Present analysis to user before ANY code generation.** Read [references/analysis-template.md](references/analysis-template.md) and fill out the template with: - Detected sections and component breakdown - Extracted design tokens (colors, typography, spacing) - Image inventory with download/fallback status - Proposed file structure Ask user: "Ready to proceed? (y/n or request modifications)" **Do not generate code until user confirms.** ### Phase 3: Code Generation After user confirmation, generate files in this order: 1. `app/globals.css` - Design tokens as CSS variables 2. `app/layout.tsx` - Root layout with SEO metadata 3. `components/landing/[Section].tsx` - Each component 4. `app/page.tsx` - Main page composing components 5. Download images to `public/images/` Reference [references/tech-stack.md](references/tech-stack.md) for Next.js 16 conventions. Reference [references/component-patterns.md](references/comp