clone-website
Transform any website into production-ready Next.js 16 code using Firecrawl.
- Scrapes target websites and extracts HTML/markdown, with fallback crawling if initial scrape fails
- Mandatory analysis phase presents detected sections, design tokens, images, and file structure to user before code generation
- Generates complete Next.js 16 projects with TypeScript, Tailwind CSS v4, Shadcn UI components, and Lucide icons
- Supports partial cloning by section (hero, pricing, footer) or full-page replication with automatic image download and Unsplash fallbacks
- Mobile-first responsive design using Tailwind arbitrary values and CSS variables for design token consistency
Clone Website
You are about to reverse-engineer and rebuild $ARGUMENTS as pixel-perfect clones.
When multiple URLs are provided, process them independently and in parallel where possible, while keeping each site's extraction artifacts isolated in dedicated folders (for example, docs/research/<hostname>/).
This is not a two-phase process (inspect then build). You are a foreman walking the job site — as you inspect each section of the page, you write a detailed specification to a file, then hand that file to a specialist builder agent with everything they need. Extraction and construction happen in parallel, but extraction is meticulous and produces auditable artifacts.
Scope Defaults
The target is whatever page $ARGUMENTS resolves to. Clone exactly what's visible at that URL. Unless the user specifies otherwise, use these defaults:
- Fidelity level: Pixel-perfect — exact match in colors, spacing, typography, animations
- In scope: Visual layout and styling, component structure and interactions, responsive design, mock data for demo purposes
- Out of scope: Real backend / database, authentication, real-time features, SEO optimization, accessibility audit
- Customization: None — pure emulation
If the user provides additional instructions (specific fidelity level, customizations, extra context), honor those over the defaults.
More from 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".
343browser
Minimal Chrome DevTools Protocol tools for browser automation and scraping. Use when you need to start Chrome, navigate pages, execute JavaScript, take screenshots, or interactively pick DOM elements.
129agents-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".
82frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
71product-management
Assist with core product management activities including writing PRDs, analyzing features, synthesizing user research, planning roadmaps, and communicating product decisions. Use when you need help with PM documentation, analysis, or planning workflows that integrate with your codebase.
68backend-dev
Comprehensive backend development workflow that orchestrates expert analysis, architecture design, implementation, and deployment using the integrated toolset. Handles everything from API design and database architecture to security implementation and DevOps automation.
63