What does this skill do, and when should you use it?
This is a skill at .gemini/skills/clone-website/SKILL.md, one of the skills bundled in the MIT-licensed career-pilot repository. It drives an AI agent through Chrome MCP browser automation to reconnoiter a target site, extract exact computed CSS values and design tokens, write a spec file per page section, dispatch parallel builder agents in git worktrees, and finish with section-by-section visual QA. It targets pre-redesign site replication and modern-stack rebuilds. Note that it covers cloning only — it has nothing to do with career-pilot's resume, interview, or job-tracking features.
Reads the target URL from TARGET.md; takes full-page screenshots at 1440px and 390px via Chrome MCP; extracts fonts, the full color palette, favicons, and global UI patterns (including smooth-scroll libraries like Lenis); sweeps interactions — scroll, click, hover — to capture all states into BEHAVIORS.md and PAGE_TOPOLOGY.md; personally builds the foundation (layout.tsx fonts, globals.css tokens, TypeScript types, SVG icons, batch-downloaded assets in public/); extracts per-element computed styles with a recursive getComputedStyle walker and writes specs to docs/research/components/; dispatches parallel builders in git worktrees and merges each (running npx tsc --noEmit and npm run build at every step); finally compares original and clone side-by-side at desktop and mobile and tests every interaction before declaring completion.
- A frontend developer who admires a product site (e.g., linear.app) and wants it rebuilt as a controllable Next.js codebase for design reference
- A team handed a 'redesign in this site's style' brief and needing a pixel-accurate baseline first
- A migration project moving an aging website onto Next.js + shadcn/ui + Tailwind v4
- A freelancer revamping a client site who wants a faithful clone to iterate on
- A learner studying complex interaction models by fully cloning a multi-state page like Stripe's pricing page
How do you install this skill?
- Cloning arbitrary websites carries copyright/trademark risk; the skill does not enforce a confirmation that the user has cloning rights. Replace brand assets and copy before any commercial use.
- The skill batch-downloads target-site assets (images, videos, fonts) via browser automation; review the target site's terms of service before use.
- metadata.author ('terminal-skills') clearly mismatches the repository owner; provenance is questionable and should be verified.
- Heavy dependence on Chrome MCP and overseas network reachability may make it unusable from mainland China; no Chinese-language support.
- Static review executed nothing; the 'pixel-perfect clone' output quality is independently unverified and will likely need substantial manual correction.
- Shell / CLI
- Network access
- Local filesystem
- MCP Server
Node.js 20+Chrome MCP serverNext.js with shadcn/ui + Tailwind v4 scaffold
No dedicated install command for this skill is documented. Per Agent Skills convention, copy the .gemini/skills/clone-website/ directory from the repo into your Claude Code skills directory (e.g., .claude/skills/ or your project's .gemini/skills/). Prerequisites: Node.js 20+, Claude Code configured with Chrome MCP, and a Next.js scaffold with shadcn/ui + Tailwind v4 in place. The README's Docker/npm setup describes the whole career-pilot app collection and is not required to use this skill alone.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/anurag3407/career-pilot.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/.gemini/skills/clone-website" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
In a ready Next.js scaffold project, create TARGET.md with the target URL and scope, then invoke the skill, e.g.: /clone-website https://linear.app. It verifies Chrome MCP first, then runs five phases: reconnaissance, foundation build, component specification with parallel dispatch, page assembly, and visual QA. The source does not document any fallback for environments without Chrome MCP.
What are this skill's strengths and limitations?
- Enforces exact computed CSS extraction instead of eyeballing class names, giving high clone fidelity
- Determines the interaction model first (scroll-driven vs click-driven vs time-driven), preventing full rewrites
- Every component gets a spec file before any builder is dispatched — auditable and traceable
- Runs tsc --noEmit and npm run build at each step, so the build always compiles
- Explicit multi-breakpoint extraction (1440/768/390px) rather than desktop-only
- Hard dependency on Chrome MCP browser automation — the skill cannot work without it
- Complex animations (WebGL, Three.js, Lottie) only get simplified or manually recreated
- No automated test suite; visual QA relies on screenshot comparison and judgment
- Git-worktree parallel dispatch and subagent orchestration are Claude Code mechanisms; porting to other clients requires rework
- README/skill mismatch: the repo homepage pitches a career platform while skill documentation is thin
- Copyright boundaries are left to the user; the skill only advises cloning for learning and customizing before launch
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Clone Website — Pixel-Perfect Site Cloning Skill this page | 40 · Not recommended | ★ 133 | 22d ago | MIT |
| Web Clone Methodology | 53 · Use with care | ★ 1.1k | 3mo ago | MIT |
| Stitch React Component Builder | 45 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
| Stitch Frontend Design Extractor | 42 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
| Design Auditor Skill | 53 · Use with care | ★ 86 | 5mo ago | — |
The SKILL.md positions itself as an agent-driven cloning workflow — versus manually copying styles with DevTools, its edge is automated reconnaissance, spec-driven extraction, and parallel building. The source names no specific competitor, so no further comparison is offered.
How did FollowSkills review this skill?
The skill instructs agents to browse arbitrary target websites via Chrome MCP, batch-download images/videos/fonts, and rewrite a codebase in parallel git worktrees. Authorization boundaries of the target site and compliance of downloaded assets are not enforced, with no explicit user confirmation gate (e.g., confirming cloning rights) and no rollback mechanism; only a soft 'respect copyright' guideline. Process is visible but permissions, confirmation, isolation and recovery are incomplete; deducted mainly for missing confirmation gates and external-effect constraints.
Instructions are well structured and self-consistent: verification steps at each phase (npx tsc --noEmit, npm run build), spec files as source of truth, explicit ordering for interaction-model detection. But it heavily depends on Chrome MCP, parallel agents and git worktrees; abnormal inputs (unreachable URLs, auth-walled pages, WebGL animations) get only scattered notes, there is no test coverage and failure feedback is thin. Static cap is 10; deducted for weak abnormal-path handling and failure feedback.
Scenarios are clear (reverse-engineering a design, migrating to a modern stack), frontmatter declares compatibility (Node 20+, Claude Code + Chrome MCP) and trigger conditions, with two concrete examples. However, non-fit boundaries (auth-walled SPAs, complex animations beyond 'simplify') are undeclared, there is no Chinese-language support, and no notes on Chrome MCP / overseas-site reachability for mainland-China users. Deducted for missing boundary declarations and environment-fit evidence.
Docs are well layered (frontmatter, overview, phased instructions, examples, guidelines) with version, author and MIT license. But metadata.author is 'terminal-skills', clearly inconsistent with the repo owner and the career-platform theme, making attribution questionable; the skill is unrelated to the host repository's purpose, and there is no changelog, FAQ or maintenance statement. Deducted for the attribution mismatch and incomplete governance.
It claims a 'pixel-perfect Next.js clone'; the workflow is detailed but entirely dependent on AI agent execution quality. The examples (Linear, Stripe) are illustrative narratives, not verifiable outputs; 'pixel-perfect' results realistically require significant manual correction, and static review cannot confirm direct usability. Deducted for missing output-usability evidence and overstatement risk.
All evidence is author-authored instructions and two illustrative examples; no tests, no CI covering this skill path (repo CI only covers frontend build and deploy-token checks), no third-party execution evidence. Facts and inferences are not separated. Deducted for the absence of any independently reproducible evidence.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →