Agent skill
clone-website
Clone/replicate websites into production-ready Next.js 16 code using Firecrawl MCP. Use when user asks to: clone website, vibe clone, replicate landing page, copy website design, rebuild this site, recreate this page, clone specific sections (hero, pricing, footer, etc). Triggers: "clone this website", "vibe clone [url]", "replicate this landing page", "rebuild this site in Next.js", "clone the hero section from [url]", "copy this design".
Install this agent skill to your Project
npx add-skill https://github.com/julianromli/ai-skills/tree/main/skills/clone-website
SKILL.md
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
- Extract URL from user request
- Identify section filter if specified (e.g., "hero only", "just the pricing")
- Scrape using Firecrawl:
firecrawl-mcp___firecrawl_scrape:
url: [TARGET_URL]
formats: ["markdown", "html"]
onlyMainContent: true
- 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 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:
app/globals.css- Design tokens as CSS variablesapp/layout.tsx- Root layout with SEO metadatacomponents/landing/[Section].tsx- Each componentapp/page.tsx- Main page composing components- Download images to
public/images/
Reference references/tech-stack.md for Next.js 16 conventions. Reference references/component-patterns.md for component structure.
Tech Stack (Fixed)
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript (strict) |
| Styling | Tailwind CSS v4 |
| Components | Shadcn UI |
| Icons | Lucide React |
| Font | Geist Sans (default) or extracted |
Image Handling
- Extract all image URLs from scraped content
- Attempt download via fetch
- On failure, use Unsplash fallback:
- Hero:
https://images.unsplash.com/photo-[id]?w=1920&h=1080 - Avatars:
https://images.unsplash.com/photo-[id]?w=100&h=100 - Features: Prefer Lucide icons over images
- Hero:
- Save to
public/images/with descriptive kebab-case names
Partial Cloning
Parse user request for section filters:
| Request | Action |
|---|---|
| "clone the hero from X" | Generate only Hero.tsx |
| "clone pricing and footer" | Generate Pricing.tsx + Footer.tsx |
| "clone X" (no filter) | Full page clone |
Code Standards
- Mobile-first responsive design
- Use Tailwind arbitrary values for pixel-perfection:
w-[347px] - Extract repeated colors to CSS variables
- Use
cn()utility for conditional classes - Add brief comments only for non-obvious patterns
- Prefer
gap-*over margins for flex/grid spacing - Use
size-*overw-* h-*when values match
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
julianromli/ai-skills
gemini-to-seedream-migration
Migrate AI image generation from Google Gemini 2.5 Flash to BytePlus SeeDream v4.5. Use when: (1) User wants to switch from Gemini to SeeDream/BytePlus for image generation, (2) User asks about migrating image generation APIs or replacing Gemini with BytePlus, (3) User needs cost optimization or better image quality for AI-generated images, (4) User mentions SeeDream, BytePlus, or wants SDK-to-REST API migration for image generation
julianromli/ai-skills
task-generator
Generate structured task lists from specs or requirements. IMPORTANT: After completing ANY spec via ExitSpecMode, ALWAYS ask the user: "Would you like me to generate a task list for this spec?" Use when user confirms or explicitly requests task generation from a plan/spec/PRD.
julianromli/ai-skills
rsc-data-optimizer
Optimize Next.js App Router data fetching by converting slow client-side fetching to fast server-side fetching using React Server Components (RSC). Use when: - User reports slow initial page load with loading spinners - Page uses useEffect + useState for data fetching - StoreContext/useStore pattern causes waterfall fetching - Need to improve SEO (content not in initial HTML) - Converting "use client" pages to Server Components Triggers: "slow loading", "optimize fetching", "SSR data", "RSC optimization", "remove loading spinner", "server-side fetch", "convert to server component", "data fetch lambat", "loading lama"
julianromli/ai-skills
shadcn-management
Manage shadcn/ui components using MCP tools. Use when user needs to: (1) Add new shadcn components to a project (2) Build complex UI features requiring multiple components (3) Research component implementations and examples (4) Get component installation commands Triggers: "add shadcn", "shadcn component", "build UI with shadcn", "install component", "create form", "create dialog"
julianromli/ai-skills
frontend-ui-animator
Analyze and implement purposeful UI animations for Next.js + Tailwind + React projects. Use when user asks to add animations, enhance UI motion, animate pages/components, or improve visual feedback. Triggers on "add animations", "animate UI", "motion design", "hover effects", "scroll animations", "page transitions", "micro-interactions".
julianromli/ai-skills
agents-md-generator
Generate hierarchical AGENTS.md structures for codebases. Use when user asks to create AGENTS.md files, analyze codebase for AI agent documentation, set up AI-friendly project documentation, or generate context files for AI coding assistants. Triggers on "create AGENTS.md", "generate agents", "analyze codebase for AI", "AI documentation setup", "hierarchical agents".
Didn't find tool you were looking for?