{"owner":"JCodesMore","repo":"ai-website-cloner-template","hasSkills":true,"totalSkillsCount":6,"totalTokensCount":3328,"categories":["anthropic-skill","command-prompt","root-instruction","claude-rule"],"hasMcp":false,"mcpConfig":null,"found":[".agents/skills/clone-website/SKILL.md",".agents/skills/clone-website/references/framer-and-motion.md",".agents/skills/clone-website/references/inspection-guide.md",".claude/commands/clone-website.md","AGENTS.md","CLAUDE.md"],"skills":{".agents/skills/clone-website/SKILL.md":"---\nname: clone-website\ndescription: Rebuild existing web pages as working local code, matching their real content, assets, responsive layout, and interactions. Use for website cloning, replication, or reverse engineering, including Framer sites and animated pages.\n---\n\n# Clone a website\n\nRecreate the supplied pages in the current app. Match the source before adding a new design direction. Deliver working, editable code: screenshots, iframes, and downloaded production bundles are references, not the implementation.\n\n## 1. Map the work\n\nRead project instructions, the actual framework/scripts, and existing routes. Open the source URLs with the available browser. Prefer direct HTTP, asset tools, or APIs for extraction when practical; use the browser to establish appearance and behavior.\n\nRecord a short source-to-local route map and the files each page owns. Follow the app's conventions; in this template use `src/app/`, `src/components/sites/<site>/`, `public/sites/<site>/`, and `docs/research/<site>/`. Give origins, pages, and downloads distinct names; add a port or URL hash when readable names collide.\n\n- A first root clone may replace the untouched template homepage.\n- Preserve source pathnames for multiple pages from one origin. Query/fragment variations usually represent states of the same route; reproduce those states.\n- Preserve existing authored routes/assets. Update them when requested; resolve unrequested route collisions before replacing anything.\n- When adding pages to an existing clone, extend its layout and global styles without replacing the styles used by existing pages.\n- Use separate apps for different origins unless the user wants a combined app. Combined sites need distinct route prefixes and scoped fonts, styles, and layout.\n- Escape literal URL segments that conflict with framework syntax (`_`, `@`, brackets, parentheses) using its supported mechanism, then verify the actual requested URL.\n\nExisting clones are useful starting points: compare them with the current source and record what was reused. Finish when every requested URL has a destination and file ownership is clear.\n\n## 2. Observe before building\n\nInspect the whole page at desktop and mobile widths. Scroll top to bottom to load lazy media and reveal sticky/pinned scenes. Then exercise menus, tabs, accordions, carousels, hover states, and primary links. Distinguish changes driven by **scroll, click, hover, or time**; a click imitation of a scroll-driven section is a different product.\n\nTreat each observation as one sample of a **rule**. Read declared values (computed styles, CSS variables, a library's live options) rather than inferring them from one rendering, and vary viewport width (including wider than the design), viewport height, input, and state until you know what drives each change. Drive the page with the inputs visitors use (wheel, touch, keyboard, pointer); scripted scrolling bypasses behavior attached to them, such as smooth scrolling.\n\nSave source screenshots labeled with viewport, scroll position, and interaction state. Capture alternate-state content/assets. Keep one compact page brief: section order, typography, layout measurements, asset mapping, and interactions. Add section briefs only when they help independent builders.\n\nRead [the inspection reference](references/inspection-guide.md) for extraction and state comparison. For **Framer-generated pages, sticky scenes, reveal animations, or animated media**, read [Framer and motion](references/framer-and-motion.md).\n\nUse the source's real text and the files it actually loads: fonts, images, SVGs, and video. A same-named substitute from another provider or icon set has different metrics or shapes. Measure important geometry/computed styles. Inspect layered images and media elements before rebuilding a visual as HTML. Track source URL → local asset path and verify content type/dimensions: a `.png` URL may return AVIF.\n\nFinish when every section and meaningful state has enough evidence to build, with unavailable details identified. A large DOM dump does not replace looking at the page.\n\n## 3. Build a complete first pass\n\nEstablish fonts, page width, colors, assets, routes, page-wide behavior, and shared components first. Build each shared component with every observed state (hover, focus, breakpoints) so builders reuse it as-is. Reuse fitting components. Prefer CSS for layout/simple motion and an animation library when source behavior needs it.\n\nBuild coherent sections with real content. Delegate independent pages/sections after shared files have an owner. Give builders screenshots, relevant measurements/state notes, asset paths, destination files, and a concrete finish line. A concise brief with precise file references is enough; no fixed agent count or per-component paperwork is required.\n\nRecreate in-scope interactions. Preserve real outbound destinations. Rewrite links to local routes when those routes are included; leave out-of-scope destinations pointing to the source and disclose them. Visible controls must perform the behavior they promise.\n\nRun the appropriate project check after an integrated slice. Finish this pass when every requested section/route renders with actual assets and important controls work.\n\n## 4. Compare, repair, repeat\n\nOpen source/local pages at the **same viewport, scroll position, and state**. Let fonts, media, and reveal animations settle. Review the whole page wherever step 2 found a rule changing, plus a viewport wider than the design; judge scroll and pointer behavior with real input. A side-by-side montage locates drift; full-size sections establish detail.\n\nFix the largest visible differences first: geometry, missing sections/layers, typography/wrapping, asset crop, then spacing and motion. Recheck affected views. Compare animated regions in initial, active, and settled states, including reverse scroll when relevant.\n\nExercise the real local workflow: navigation between cloned routes, mobile menu, tab/accordion states, carousel boundaries, primary actions, media controls, and observed scroll-linked transitions. Check runtime errors, missing assets, and horizontal overflow. When adding pages, verify existing routes still work. Use a few browser checks at these boundaries rather than assertions about class names.\n\nRun the project's production check. Completion requires a successful build **and** rendered comparison. State remaining differences precisely instead of calling an unchecked result pixel-perfect.\n\n## Deliver\n\nReturn preview/run instructions, the source-to-local route map, representative desktop/mobile comparisons, checks actually run, and remaining visual/functional gaps. Keep reference clones in separate apps when maintaining the reusable template.\n",".agents/skills/clone-website/references/framer-and-motion.md":"# Framer and animated pages\n\nUse for Framer-generated pages or animation beyond simple hover transitions. Framer is the publishing tool; reproduce its rendered design and behavior in the target framework.\n\n## Framer inspection\n\nFramer can render duplicate desktop/mobile variants and hide one with breakpoint classes. Read **visible** layout/computed styles at each viewport instead of copying all nodes. `data-framer-name` identifies sections; generated classes are not component architecture.\n\nWait for hydration/entrance animations and scroll through content below the fold. Capture initial/revealed positions when movement matters. Full-page screenshots alone can leave offscreen reveal content invisible.\n\nUse `currentSrc`, enough resolution for the largest rendered size, and the observed crop. Framer CDN image URLs can return AVIF despite PNG filenames. Verify bytes and use the actual format locally. Fonts and SVG definitions are part of fidelity.\n\nCheck each font's actual weight/style before declaring `@font-face`; a static medium file advertised as a variable family makes regular text too heavy. If asset bundling misses a public font, retrieve its observed URL directly. Exported inline SVGs need their namespace and referenced definitions to work as standalone files; confirm they render through the local `<img>` URL, not only inline.\n\nAnimated SVGs can depend on ancestor selectors, shared symbols, fonts, and stylesheet keyframes. Preserve those asset dependencies and watch a full cycle: replacing a repeating sequence with a few objects that pulse together loses the source behavior.\n\nFor CMS grids, visit supplied routes and exercise every filter. Map destinations: a static first-state list does not reproduce filtering/navigation.\n\nRebuild semantic components/data. Deployment scripts and minified wrappers are evidence, not code to paste into a new app.\n\n## Motion inspection\n\n| Driver | Evidence | Typical implementation |\n|---|---|---|\n| Time | cycle, pause, direction, looping media | CSS keyframes, video, animation library |\n| Scroll reveal | entry boundary, start/end positions, reverse replay | IntersectionObserver + CSS |\n| Continuous scroll | progress, pin duration, layer speeds | scroll progress + CSS variables or library |\n| Click/hover | alternate content, transition, dismissal/navigation | React state + CSS |\n| Pointer/canvas | response, renderer/media identity | matched renderer or disclosed approximation |\n\nObserve both directions and mobile. A pinned scene needs scroll distance and release behavior, not just sticky positioning. An animated visual may be a video: use actual media when available.\n\nMatch measurable easing/duration. Clean up animation loops with component lifecycle. Framer's smooth scrolling is Lenis: a `lenis` class on `html` or a `window.lenis` global exposes the options to reproduce.\n\n## Verify the experience\n\nCompare initial, active, and settled states at comparable positions. Test controls during motion and navigate away/back to detect stuck states. Confirm motion does not widen the document or hide content permanently. Name any unimplemented shader/canvas behavior rather than presenting a still as proof.\n",".agents/skills/clone-website/references/inspection-guide.md":"# Inspect a source page\n\nCapture evidence that changes the build: layout, content, assets, and states. One page brief usually suffices.\n\n## Visual structure\n\nRecord section order, max-width, gutters, column proportions, and sticky/fixed layers. Measure heading/body family, weight, size, line height, and letter spacing. Match the actual font before adjusting widths to repair wrapping.\n\nSweep width from mobile to beyond the desktop design, narrowing around each transition; max-width caps only show on wider screens. Record stacking, navigation/menu changes, type reflow, and different crops/assets. A scaled desktop screenshot is not a mobile reference.\n\nCapture whole-page evidence after visiting lazy/reveal sections, plus full-size hero and interaction views. Fonts or entry motion can make early screenshots misleading.\n\n## Assets\n\nUse available browser asset inventory/download tools or DOM-backed URLs with direct downloads. Include:\n\n- Images: `currentSrc`, `srcset`, dimensions, `object-fit`, crop position, alt text.\n- Layers: visible images/backgrounds/SVGs and stacking/positioning.\n- Video: source, poster, autoplay/loop/mute behavior, aspect ratio, controls.\n- Fonts: actual loaded family/weights and files used by the page.\n- SVG: viewBox plus referenced gradients, masks, symbols, and filters.\n\nSave assets used by the cloned scope and their source URL → local path mapping. Distinguish repeated filenames. Check content type, dimensions, and browser rendering: HTTP success can return an error page; CDNs may change formats without changing URL extensions.\n\nIf a browser bundle fails for a public font/image, download the observed URL directly. Keep unresolved assets explicit and preserve applicable attribution.\n\n## State evidence\n\nRecord trigger → visible result. Scroll before clicking so pinned scenes are not mistaken for tabs. Inspect alternate content, selection, layout, and transition.\n\nMeasure important before/after styles using the browser's supported DOM evaluation. For a selector observed on the page, useful fields are textContent, getBoundingClientRect(), and computed font, letterSpacing, color, background, gap, padding, borderRadius, position, transform, and transition.\n\nPage-wide scripts (smooth scrolling, snapping, cursor followers, page transitions) change every interaction. Identify them from root classes, globals, and loaded scripts, and record their options.\n\nEvaluation environments differ: read-only DOM snapshots may omit APIs such as `document.fonts`. Use asset metadata or developer inspection for missing measurements rather than inferring values from an unsupported API.\n\n## Handoff and comparison\n\nProvide screenshots, geometry/type, content, local asset paths, responsive changes, and trigger/state behavior. Establish shared navigation/styles before parallel page work.\n\nKeep comparison screenshots labeled by URL/route and viewport. Test controls and inspect their visible result. Check mobile overflow and failed assets separately from similarity.\n",".claude/commands/clone-website.md":"---\ndescription: Rebuild one or more websites as working Next.js pages matching their content, assets, responsive layout, and interactions. Use for website cloning, replication, or reverse engineering.\nargument-hint: \"<url1> [<url2> ...]\"\n---\n\nRead `${CLAUDE_PROJECT_DIR}/.agents/skills/clone-website/SKILL.md` completely, then follow it for the target URL or URLs in the user's request. When invoked directly, `$ARGUMENTS` contains those URL arguments.\n","AGENTS.md":"<!-- BEGIN:nextjs-agent-rules -->\n\n# This is NOT the Next.js you know\n\nThis version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.\n\nThis block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.\n\n<!-- END:nextjs-agent-rules -->\n\n# Website Reverse-Engineer Template\n\n## What This Is\nA reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. The Next.js + shadcn/ui + Tailwind v4 base is pre-scaffolded — just run `/clone-website <url1> [<url2> ...]`.\n\n## Tech Stack\n- **Framework:** Next.js 16 (App Router, React 19, TypeScript strict)\n- **UI:** shadcn/ui (Base UI primitives, Tailwind CSS v4, `cn()` utility)\n- **Icons:** Lucide React (default — will be replaced/supplemented by extracted SVGs)\n- **Styling:** Tailwind CSS v4 with oklch design tokens\n- **Deployment:** Vercel\n\n## Commands\n- `npm run dev` — Start dev server\n- `npm run build` — Production build\n- `npm run lint` — ESLint check\n- `npm run typecheck` — TypeScript check\n- `npm run check` — Run lint + typecheck + build\n\n## Code Style\n- TypeScript strict mode, no `any`\n- Named exports, PascalCase components, camelCase utils\n- Tailwind utilities or scoped CSS; avoid inline styles unless behavior needs dynamic values\n- 2-space indentation\n- Responsive: mobile-first\n\n## Design Principles\n- **Pixel-perfect emulation** — match the target's spacing, colors, typography exactly\n- **No personal aesthetic changes during emulation phase** — match 1:1 first, customize later\n- **Real content** — use actual text and assets from the target site, not placeholders\n- **Beauty-first** — every pixel matters\n\n## Project Structure\n```\nsrc/\n  app/              # Next.js routes\n  components/       # React components\n    ui/             # shadcn/ui primitives\n    sites/<site>/   # Source-specific components, including extracted SVGs\n  lib/\n    utils.ts        # cn() utility (shadcn)\n  types/            # TypeScript interfaces\n  hooks/            # Custom React hooks\npublic/\n  sites/<site>/     # Source-specific images, fonts, video, and other assets\ndocs/\n  research/<site>/  # Page brief, asset map, and inspection evidence\n  design-references/ # Screenshots and visual references\nscripts/            # Asset download scripts\n.agents/\n  skills/\n    clone-website/  # Canonical cross-agent cloning workflow\n.claude/\n  commands/\n    clone-website.md # Thin Claude Code invocation bridge\n```\n\n## Agent Workflow\n- Edit `.agents/skills/clone-website/` for cloning-workflow changes. It is the canonical skill used by Codex, Cursor, and OpenCode.\n- Keep `.claude/commands/clone-website.md` as a thin Claude Code bridge to the canonical skill; do not duplicate the workflow there.\n","CLAUDE.md":"@AGENTS.md\n"},"files":{".agents/skills/clone-website/SKILL.md":"---\nname: clone-website\ndescription: Rebuild existing web pages as working local code, matching their real content, assets, responsive layout, and interactions. Use for website cloning, replication, or reverse engineering, including Framer sites and animated pages.\n---\n\n# Clone a website\n\nRecreate the supplied pages in the current app. Match the source before adding a new design direction. Deliver working, editable code: screenshots, iframes, and downloaded production bundles are references, not the implementation.\n\n## 1. Map the work\n\nRead project instructions, the actual framework/scripts, and existing routes. Open the source URLs with the available browser. Prefer direct HTTP, asset tools, or APIs for extraction when practical; use the browser to establish appearance and behavior.\n\nRecord a short source-to-local route map and the files each page owns. Follow the app's conventions; in this template use `src/app/`, `src/components/sites/<site>/`, `public/sites/<site>/`, and `docs/research/<site>/`. Give origins, pages, and downloads distinct names; add a port or URL hash when readable names collide.\n\n- A first root clone may replace the untouched template homepage.\n- Preserve source pathnames for multiple pages from one origin. Query/fragment variations usually represent states of the same route; reproduce those states.\n- Preserve existing authored routes/assets. Update them when requested; resolve unrequested route collisions before replacing anything.\n- When adding pages to an existing clone, extend its layout and global styles without replacing the styles used by existing pages.\n- Use separate apps for different origins unless the user wants a combined app. Combined sites need distinct route prefixes and scoped fonts, styles, and layout.\n- Escape literal URL segments that conflict with framework syntax (`_`, `@`, brackets, parentheses) using its supported mechanism, then verify the actual requested URL.\n\nExisting clones are useful starting points: compare them with the current source and record what was reused. Finish when every requested URL has a destination and file ownership is clear.\n\n## 2. Observe before building\n\nInspect the whole page at desktop and mobile widths. Scroll top to bottom to load lazy media and reveal sticky/pinned scenes. Then exercise menus, tabs, accordions, carousels, hover states, and primary links. Distinguish changes driven by **scroll, click, hover, or time**; a click imitation of a scroll-driven section is a different product.\n\nTreat each observation as one sample of a **rule**. Read declared values (computed styles, CSS variables, a library's live options) rather than inferring them from one rendering, and vary viewport width (including wider than the design), viewport height, input, and state until you know what drives each change. Drive the page with the inputs visitors use (wheel, touch, keyboard, pointer); scripted scrolling bypasses behavior attached to them, such as smooth scrolling.\n\nSave source screenshots labeled with viewport, scroll position, and interaction state. Capture alternate-state content/assets. Keep one compact page brief: section order, typography, layout measurements, asset mapping, and interactions. Add section briefs only when they help independent builders.\n\nRead [the inspection reference](references/inspection-guide.md) for extraction and state comparison. For **Framer-generated pages, sticky scenes, reveal animations, or animated media**, read [Framer and motion](references/framer-and-motion.md).\n\nUse the source's real text and the files it actually loads: fonts, images, SVGs, and video. A same-named substitute from another provider or icon set has different metrics or shapes. Measure important geometry/computed styles. Inspect layered images and media elements before rebuilding a visual as HTML. Track source URL → local asset path and verify content type/dimensions: a `.png` URL may return AVIF.\n\nFinish when every section and meaningful state has enough evidence to build, with unavailable details identified. A large DOM dump does not replace looking at the page.\n\n## 3. Build a complete first pass\n\nEstablish fonts, page width, colors, assets, routes, page-wide behavior, and shared components first. Build each shared component with every observed state (hover, focus, breakpoints) so builders reuse it as-is. Reuse fitting components. Prefer CSS for layout/simple motion and an animation library when source behavior needs it.\n\nBuild coherent sections with real content. Delegate independent pages/sections after shared files have an owner. Give builders screenshots, relevant measurements/state notes, asset paths, destination files, and a concrete finish line. A concise brief with precise file references is enough; no fixed agent count or per-component paperwork is required.\n\nRecreate in-scope interactions. Preserve real outbound destinations. Rewrite links to local routes when those routes are included; leave out-of-scope destinations pointing to the source and disclose them. Visible controls must perform the behavior they promise.\n\nRun the appropriate project check after an integrated slice. Finish this pass when every requested section/route renders with actual assets and important controls work.\n\n## 4. Compare, repair, repeat\n\nOpen source/local pages at the **same viewport, scroll position, and state**. Let fonts, media, and reveal animations settle. Review the whole page wherever step 2 found a rule changing, plus a viewport wider than the design; judge scroll and pointer behavior with real input. A side-by-side montage locates drift; full-size sections establish detail.\n\nFix the largest visible differences first: geometry, missing sections/layers, typography/wrapping, asset crop, then spacing and motion. Recheck affected views. Compare animated regions in initial, active, and settled states, including reverse scroll when relevant.\n\nExercise the real local workflow: navigation between cloned routes, mobile menu, tab/accordion states, carousel boundaries, primary actions, media controls, and observed scroll-linked transitions. Check runtime errors, missing assets, and horizontal overflow. When adding pages, verify existing routes still work. Use a few browser checks at these boundaries rather than assertions about class names.\n\nRun the project's production check. Completion requires a successful build **and** rendered comparison. State remaining differences precisely instead of calling an unchecked result pixel-perfect.\n\n## Deliver\n\nReturn preview/run instructions, the source-to-local route map, representative desktop/mobile comparisons, checks actually run, and remaining visual/functional gaps. Keep reference clones in separate apps when maintaining the reusable template.\n",".agents/skills/clone-website/references/framer-and-motion.md":"# Framer and animated pages\n\nUse for Framer-generated pages or animation beyond simple hover transitions. Framer is the publishing tool; reproduce its rendered design and behavior in the target framework.\n\n## Framer inspection\n\nFramer can render duplicate desktop/mobile variants and hide one with breakpoint classes. Read **visible** layout/computed styles at each viewport instead of copying all nodes. `data-framer-name` identifies sections; generated classes are not component architecture.\n\nWait for hydration/entrance animations and scroll through content below the fold. Capture initial/revealed positions when movement matters. Full-page screenshots alone can leave offscreen reveal content invisible.\n\nUse `currentSrc`, enough resolution for the largest rendered size, and the observed crop. Framer CDN image URLs can return AVIF despite PNG filenames. Verify bytes and use the actual format locally. Fonts and SVG definitions are part of fidelity.\n\nCheck each font's actual weight/style before declaring `@font-face`; a static medium file advertised as a variable family makes regular text too heavy. If asset bundling misses a public font, retrieve its observed URL directly. Exported inline SVGs need their namespace and referenced definitions to work as standalone files; confirm they render through the local `<img>` URL, not only inline.\n\nAnimated SVGs can depend on ancestor selectors, shared symbols, fonts, and stylesheet keyframes. Preserve those asset dependencies and watch a full cycle: replacing a repeating sequence with a few objects that pulse together loses the source behavior.\n\nFor CMS grids, visit supplied routes and exercise every filter. Map destinations: a static first-state list does not reproduce filtering/navigation.\n\nRebuild semantic components/data. Deployment scripts and minified wrappers are evidence, not code to paste into a new app.\n\n## Motion inspection\n\n| Driver | Evidence | Typical implementation |\n|---|---|---|\n| Time | cycle, pause, direction, looping media | CSS keyframes, video, animation library |\n| Scroll reveal | entry boundary, start/end positions, reverse replay | IntersectionObserver + CSS |\n| Continuous scroll | progress, pin duration, layer speeds | scroll progress + CSS variables or library |\n| Click/hover | alternate content, transition, dismissal/navigation | React state + CSS |\n| Pointer/canvas | response, renderer/media identity | matched renderer or disclosed approximation |\n\nObserve both directions and mobile. A pinned scene needs scroll distance and release behavior, not just sticky positioning. An animated visual may be a video: use actual media when available.\n\nMatch measurable easing/duration. Clean up animation loops with component lifecycle. Framer's smooth scrolling is Lenis: a `lenis` class on `html` or a `window.lenis` global exposes the options to reproduce.\n\n## Verify the experience\n\nCompare initial, active, and settled states at comparable positions. Test controls during motion and navigate away/back to detect stuck states. Confirm motion does not widen the document or hide content permanently. Name any unimplemented shader/canvas behavior rather than presenting a still as proof.\n",".agents/skills/clone-website/references/inspection-guide.md":"# Inspect a source page\n\nCapture evidence that changes the build: layout, content, assets, and states. One page brief usually suffices.\n\n## Visual structure\n\nRecord section order, max-width, gutters, column proportions, and sticky/fixed layers. Measure heading/body family, weight, size, line height, and letter spacing. Match the actual font before adjusting widths to repair wrapping.\n\nSweep width from mobile to beyond the desktop design, narrowing around each transition; max-width caps only show on wider screens. Record stacking, navigation/menu changes, type reflow, and different crops/assets. A scaled desktop screenshot is not a mobile reference.\n\nCapture whole-page evidence after visiting lazy/reveal sections, plus full-size hero and interaction views. Fonts or entry motion can make early screenshots misleading.\n\n## Assets\n\nUse available browser asset inventory/download tools or DOM-backed URLs with direct downloads. Include:\n\n- Images: `currentSrc`, `srcset`, dimensions, `object-fit`, crop position, alt text.\n- Layers: visible images/backgrounds/SVGs and stacking/positioning.\n- Video: source, poster, autoplay/loop/mute behavior, aspect ratio, controls.\n- Fonts: actual loaded family/weights and files used by the page.\n- SVG: viewBox plus referenced gradients, masks, symbols, and filters.\n\nSave assets used by the cloned scope and their source URL → local path mapping. Distinguish repeated filenames. Check content type, dimensions, and browser rendering: HTTP success can return an error page; CDNs may change formats without changing URL extensions.\n\nIf a browser bundle fails for a public font/image, download the observed URL directly. Keep unresolved assets explicit and preserve applicable attribution.\n\n## State evidence\n\nRecord trigger → visible result. Scroll before clicking so pinned scenes are not mistaken for tabs. Inspect alternate content, selection, layout, and transition.\n\nMeasure important before/after styles using the browser's supported DOM evaluation. For a selector observed on the page, useful fields are textContent, getBoundingClientRect(), and computed font, letterSpacing, color, background, gap, padding, borderRadius, position, transform, and transition.\n\nPage-wide scripts (smooth scrolling, snapping, cursor followers, page transitions) change every interaction. Identify them from root classes, globals, and loaded scripts, and record their options.\n\nEvaluation environments differ: read-only DOM snapshots may omit APIs such as `document.fonts`. Use asset metadata or developer inspection for missing measurements rather than inferring values from an unsupported API.\n\n## Handoff and comparison\n\nProvide screenshots, geometry/type, content, local asset paths, responsive changes, and trigger/state behavior. Establish shared navigation/styles before parallel page work.\n\nKeep comparison screenshots labeled by URL/route and viewport. Test controls and inspect their visible result. Check mobile overflow and failed assets separately from similarity.\n",".claude/commands/clone-website.md":"---\ndescription: Rebuild one or more websites as working Next.js pages matching their content, assets, responsive layout, and interactions. Use for website cloning, replication, or reverse engineering.\nargument-hint: \"<url1> [<url2> ...]\"\n---\n\nRead `${CLAUDE_PROJECT_DIR}/.agents/skills/clone-website/SKILL.md` completely, then follow it for the target URL or URLs in the user's request. When invoked directly, `$ARGUMENTS` contains those URL arguments.\n","AGENTS.md":"<!-- BEGIN:nextjs-agent-rules -->\n\n# This is NOT the Next.js you know\n\nThis version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.\n\nThis block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.\n\n<!-- END:nextjs-agent-rules -->\n\n# Website Reverse-Engineer Template\n\n## What This Is\nA reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. The Next.js + shadcn/ui + Tailwind v4 base is pre-scaffolded — just run `/clone-website <url1> [<url2> ...]`.\n\n## Tech Stack\n- **Framework:** Next.js 16 (App Router, React 19, TypeScript strict)\n- **UI:** shadcn/ui (Base UI primitives, Tailwind CSS v4, `cn()` utility)\n- **Icons:** Lucide React (default — will be replaced/supplemented by extracted SVGs)\n- **Styling:** Tailwind CSS v4 with oklch design tokens\n- **Deployment:** Vercel\n\n## Commands\n- `npm run dev` — Start dev server\n- `npm run build` — Production build\n- `npm run lint` — ESLint check\n- `npm run typecheck` — TypeScript check\n- `npm run check` — Run lint + typecheck + build\n\n## Code Style\n- TypeScript strict mode, no `any`\n- Named exports, PascalCase components, camelCase utils\n- Tailwind utilities or scoped CSS; avoid inline styles unless behavior needs dynamic values\n- 2-space indentation\n- Responsive: mobile-first\n\n## Design Principles\n- **Pixel-perfect emulation** — match the target's spacing, colors, typography exactly\n- **No personal aesthetic changes during emulation phase** — match 1:1 first, customize later\n- **Real content** — use actual text and assets from the target site, not placeholders\n- **Beauty-first** — every pixel matters\n\n## Project Structure\n```\nsrc/\n  app/              # Next.js routes\n  components/       # React components\n    ui/             # shadcn/ui primitives\n    sites/<site>/   # Source-specific components, including extracted SVGs\n  lib/\n    utils.ts        # cn() utility (shadcn)\n  types/            # TypeScript interfaces\n  hooks/            # Custom React hooks\npublic/\n  sites/<site>/     # Source-specific images, fonts, video, and other assets\ndocs/\n  research/<site>/  # Page brief, asset map, and inspection evidence\n  design-references/ # Screenshots and visual references\nscripts/            # Asset download scripts\n.agents/\n  skills/\n    clone-website/  # Canonical cross-agent cloning workflow\n.claude/\n  commands/\n    clone-website.md # Thin Claude Code invocation bridge\n```\n\n## Agent Workflow\n- Edit `.agents/skills/clone-website/` for cloning-workflow changes. It is the canonical skill used by Codex, Cursor, and OpenCode.\n- Keep `.claude/commands/clone-website.md` as a thin Claude Code bridge to the canonical skill; do not duplicate the workflow there.\n","CLAUDE.md":"@AGENTS.md\n"},"items":[{"name":"AGENTS.md","path":"AGENTS.md","rawUrl":"https://raw.githubusercontent.com/JCodesMore/ai-website-cloner-template/HEAD/AGENTS.md","title":"AI Agent Protocol & Instructions","category":"root-instruction","format":"markdown","content":"<!-- BEGIN:nextjs-agent-rules -->\n\n# This is NOT the Next.js you know\n\nThis version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.\n\nThis block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.\n\n<!-- END:nextjs-agent-rules -->\n\n# Website Reverse-Engineer Template\n\n## What This Is\nA reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. The Next.js + shadcn/ui + Tailwind v4 base is pre-scaffolded — just run `/clone-website <url1> [<url2> ...]`.\n\n## Tech Stack\n- **Framework:** Next.js 16 (App Router, React 19, TypeScript strict)\n- **UI:** shadcn/ui (Base UI primitives, Tailwind CSS v4, `cn()` utility)\n- **Icons:** Lucide React (default — will be replaced/supplemented by extracted SVGs)\n- **Styling:** Tailwind CSS v4 with oklch design tokens\n- **Deployment:** Vercel\n\n## Commands\n- `npm run dev` — Start dev server\n- `npm run build` — Production build\n- `npm run lint` — ESLint check\n- `npm run typecheck` — TypeScript check\n- `npm run check` — Run lint + typecheck + build\n\n## Code Style\n- TypeScript strict mode, no `any`\n- Named exports, PascalCase components, camelCase utils\n- Tailwind utilities or scoped CSS; avoid inline styles unless behavior needs dynamic values\n- 2-space indentation\n- Responsive: mobile-first\n\n## Design Principles\n- **Pixel-perfect emulation** — match the target's spacing, colors, typography exactly\n- **No personal aesthetic changes during emulation phase** — match 1:1 first, customize later\n- **Real content** — use actual text and assets from the target site, not placeholders\n- **Beauty-first** — every pixel matters\n\n## Project Structure\n```\nsrc/\n  app/              # Next.js routes\n  components/       # React components\n    ui/             # shadcn/ui primitives\n    sites/<site>/   # Source-specific components, including extracted SVGs\n  lib/\n    utils.ts        # cn() utility (shadcn)\n  types/            # TypeScript interfaces\n  hooks/            # Custom React hooks\npublic/\n  sites/<site>/     # Source-specific images, fonts, video, and other assets\ndocs/\n  research/<site>/  # Page brief, asset map, and inspection evidence\n  design-references/ # Screenshots and visual references\nscripts/            # Asset download scripts\n.agents/\n  skills/\n    clone-website/  # Canonical cross-agent cloning workflow\n.claude/\n  commands/\n    clone-website.md # Thin Claude Code invocation bridge\n```\n\n## Agent Workflow\n- Edit `.agents/skills/clone-website/` for cloning-workflow changes. It is the canonical skill used by Codex, Cursor, and OpenCode.\n- Keep `.claude/commands/clone-website.md` as a thin Claude Code bridge to the canonical skill; do not duplicate the workflow there.\n","isInternal":false,"tokens":761,"sizeBytes":3164},{"name":"CLAUDE.md","path":"CLAUDE.md","rawUrl":"https://raw.githubusercontent.com/JCodesMore/ai-website-cloner-template/HEAD/CLAUDE.md","title":"Claude Agent Guidelines & System Prompt","category":"claude-rule","format":"markdown","content":"@AGENTS.md\n","isInternal":false,"tokens":5,"sizeBytes":11},{"name":"framer-and-motion.md","path":".agents/skills/clone-website/references/framer-and-motion.md","rawUrl":"https://raw.githubusercontent.com/JCodesMore/ai-website-cloner-template/HEAD/.agents/skills/clone-website/references/framer-and-motion.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Framer and animated pages\n\nUse for Framer-generated pages or animation beyond simple hover transitions. Framer is the publishing tool; reproduce its rendered design and behavior in the target framework.\n\n## Framer inspection\n\nFramer can render duplicate desktop/mobile variants and hide one with breakpoint classes. Read **visible** layout/computed styles at each viewport instead of copying all nodes. `data-framer-name` identifies sections; generated classes are not component architecture.\n\nWait for hydration/entrance animations and scroll through content below the fold. Capture initial/revealed positions when movement matters. Full-page screenshots alone can leave offscreen reveal content invisible.\n\nUse `currentSrc`, enough resolution for the largest rendered size, and the observed crop. Framer CDN image URLs can return AVIF despite PNG filenames. Verify bytes and use the actual format locally. Fonts and SVG definitions are part of fidelity.\n\nCheck each font's actual weight/style before declaring `@font-face`; a static medium file advertised as a variable family makes regular text too heavy. If asset bundling misses a public font, retrieve its observed URL directly. Exported inline SVGs need their namespace and referenced definitions to work as standalone files; confirm they render through the local `<img>` URL, not only inline.\n\nAnimated SVGs can depend on ancestor selectors, shared symbols, fonts, and stylesheet keyframes. Preserve those asset dependencies and watch a full cycle: replacing a repeating sequence with a few objects that pulse together loses the source behavior.\n\nFor CMS grids, visit supplied routes and exercise every filter. Map destinations: a static first-state list does not reproduce filtering/navigation.\n\nRebuild semantic components/data. Deployment scripts and minified wrappers are evidence, not code to paste into a new app.\n\n## Motion inspection\n\n| Driver | Evidence | Typical implementation |\n|---|---|---|\n| Time | cycle, pause, direction, looping media | CSS keyframes, video, animation library |\n| Scroll reveal | entry boundary, start/end positions, reverse replay | IntersectionObserver + CSS |\n| Continuous scroll | progress, pin duration, layer speeds | scroll progress + CSS variables or library |\n| Click/hover | alternate content, transition, dismissal/navigation | React state + CSS |\n| Pointer/canvas | response, renderer/media identity | matched renderer or disclosed approximation |\n\nObserve both directions and mobile. A pinned scene needs scroll distance and release behavior, not just sticky positioning. An animated visual may be a video: use actual media when available.\n\nMatch measurable easing/duration. Clean up animation loops with component lifecycle. Framer's smooth scrolling is Lenis: a `lenis` class on `html` or a `window.lenis` global exposes the options to reproduce.\n\n## Verify the experience\n\nCompare initial, active, and settled states at comparable positions. Test controls during motion and navigate away/back to detect stuck states. Confirm motion does not widen the document or hide content permanently. Name any unimplemented shader/canvas behavior rather than presenting a still as proof.\n","isInternal":false,"tokens":603,"sizeBytes":3186},{"name":"inspection-guide.md","path":".agents/skills/clone-website/references/inspection-guide.md","rawUrl":"https://raw.githubusercontent.com/JCodesMore/ai-website-cloner-template/HEAD/.agents/skills/clone-website/references/inspection-guide.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# Inspect a source page\n\nCapture evidence that changes the build: layout, content, assets, and states. One page brief usually suffices.\n\n## Visual structure\n\nRecord section order, max-width, gutters, column proportions, and sticky/fixed layers. Measure heading/body family, weight, size, line height, and letter spacing. Match the actual font before adjusting widths to repair wrapping.\n\nSweep width from mobile to beyond the desktop design, narrowing around each transition; max-width caps only show on wider screens. Record stacking, navigation/menu changes, type reflow, and different crops/assets. A scaled desktop screenshot is not a mobile reference.\n\nCapture whole-page evidence after visiting lazy/reveal sections, plus full-size hero and interaction views. Fonts or entry motion can make early screenshots misleading.\n\n## Assets\n\nUse available browser asset inventory/download tools or DOM-backed URLs with direct downloads. Include:\n\n- Images: `currentSrc`, `srcset`, dimensions, `object-fit`, crop position, alt text.\n- Layers: visible images/backgrounds/SVGs and stacking/positioning.\n- Video: source, poster, autoplay/loop/mute behavior, aspect ratio, controls.\n- Fonts: actual loaded family/weights and files used by the page.\n- SVG: viewBox plus referenced gradients, masks, symbols, and filters.\n\nSave assets used by the cloned scope and their source URL → local path mapping. Distinguish repeated filenames. Check content type, dimensions, and browser rendering: HTTP success can return an error page; CDNs may change formats without changing URL extensions.\n\nIf a browser bundle fails for a public font/image, download the observed URL directly. Keep unresolved assets explicit and preserve applicable attribution.\n\n## State evidence\n\nRecord trigger → visible result. Scroll before clicking so pinned scenes are not mistaken for tabs. Inspect alternate content, selection, layout, and transition.\n\nMeasure important before/after styles using the browser's supported DOM evaluation. For a selector observed on the page, useful fields are textContent, getBoundingClientRect(), and computed font, letterSpacing, color, background, gap, padding, borderRadius, position, transform, and transition.\n\nPage-wide scripts (smooth scrolling, snapping, cursor followers, page transitions) change every interaction. Identify them from root classes, globals, and loaded scripts, and record their options.\n\nEvaluation environments differ: read-only DOM snapshots may omit APIs such as `document.fonts`. Use asset metadata or developer inspection for missing measurements rather than inferring values from an unsupported API.\n\n## Handoff and comparison\n\nProvide screenshots, geometry/type, content, local asset paths, responsive changes, and trigger/state behavior. Establish shared navigation/styles before parallel page work.\n\nKeep comparison screenshots labeled by URL/route and viewport. Test controls and inspect their visible result. Check mobile overflow and failed assets separately from similarity.\n","isInternal":false,"tokens":568,"sizeBytes":3014},{"name":"SKILL.md","path":".agents/skills/clone-website/SKILL.md","rawUrl":"https://raw.githubusercontent.com/JCodesMore/ai-website-cloner-template/HEAD/.agents/skills/clone-website/SKILL.md","title":"clone-website","category":"anthropic-skill","format":"markdown","content":"---\nname: clone-website\ndescription: Rebuild existing web pages as working local code, matching their real content, assets, responsive layout, and interactions. Use for website cloning, replication, or reverse engineering, including Framer sites and animated pages.\n---\n\n# Clone a website\n\nRecreate the supplied pages in the current app. Match the source before adding a new design direction. Deliver working, editable code: screenshots, iframes, and downloaded production bundles are references, not the implementation.\n\n## 1. Map the work\n\nRead project instructions, the actual framework/scripts, and existing routes. Open the source URLs with the available browser. Prefer direct HTTP, asset tools, or APIs for extraction when practical; use the browser to establish appearance and behavior.\n\nRecord a short source-to-local route map and the files each page owns. Follow the app's conventions; in this template use `src/app/`, `src/components/sites/<site>/`, `public/sites/<site>/`, and `docs/research/<site>/`. Give origins, pages, and downloads distinct names; add a port or URL hash when readable names collide.\n\n- A first root clone may replace the untouched template homepage.\n- Preserve source pathnames for multiple pages from one origin. Query/fragment variations usually represent states of the same route; reproduce those states.\n- Preserve existing authored routes/assets. Update them when requested; resolve unrequested route collisions before replacing anything.\n- When adding pages to an existing clone, extend its layout and global styles without replacing the styles used by existing pages.\n- Use separate apps for different origins unless the user wants a combined app. Combined sites need distinct route prefixes and scoped fonts, styles, and layout.\n- Escape literal URL segments that conflict with framework syntax (`_`, `@`, brackets, parentheses) using its supported mechanism, then verify the actual requested URL.\n\nExisting clones are useful starting points: compare them with the current source and record what was reused. Finish when every requested URL has a destination and file ownership is clear.\n\n## 2. Observe before building\n\nInspect the whole page at desktop and mobile widths. Scroll top to bottom to load lazy media and reveal sticky/pinned scenes. Then exercise menus, tabs, accordions, carousels, hover states, and primary links. Distinguish changes driven by **scroll, click, hover, or time**; a click imitation of a scroll-driven section is a different product.\n\nTreat each observation as one sample of a **rule**. Read declared values (computed styles, CSS variables, a library's live options) rather than inferring them from one rendering, and vary viewport width (including wider than the design), viewport height, input, and state until you know what drives each change. Drive the page with the inputs visitors use (wheel, touch, keyboard, pointer); scripted scrolling bypasses behavior attached to them, such as smooth scrolling.\n\nSave source screenshots labeled with viewport, scroll position, and interaction state. Capture alternate-state content/assets. Keep one compact page brief: section order, typography, layout measurements, asset mapping, and interactions. Add section briefs only when they help independent builders.\n\nRead [the inspection reference](references/inspection-guide.md) for extraction and state comparison. For **Framer-generated pages, sticky scenes, reveal animations, or animated media**, read [Framer and motion](references/framer-and-motion.md).\n\nUse the source's real text and the files it actually loads: fonts, images, SVGs, and video. A same-named substitute from another provider or icon set has different metrics or shapes. Measure important geometry/computed styles. Inspect layered images and media elements before rebuilding a visual as HTML. Track source URL → local asset path and verify content type/dimensions: a `.png` URL may return AVIF.\n\nFinish when every section and meaningful state has enough evidence to build, with unavailable details identified. A large DOM dump does not replace looking at the page.\n\n## 3. Build a complete first pass\n\nEstablish fonts, page width, colors, assets, routes, page-wide behavior, and shared components first. Build each shared component with every observed state (hover, focus, breakpoints) so builders reuse it as-is. Reuse fitting components. Prefer CSS for layout/simple motion and an animation library when source behavior needs it.\n\nBuild coherent sections with real content. Delegate independent pages/sections after shared files have an owner. Give builders screenshots, relevant measurements/state notes, asset paths, destination files, and a concrete finish line. A concise brief with precise file references is enough; no fixed agent count or per-component paperwork is required.\n\nRecreate in-scope interactions. Preserve real outbound destinations. Rewrite links to local routes when those routes are included; leave out-of-scope destinations pointing to the source and disclose them. Visible controls must perform the behavior they promise.\n\nRun the appropriate project check after an integrated slice. Finish this pass when every requested section/route renders with actual assets and important controls work.\n\n## 4. Compare, repair, repeat\n\nOpen source/local pages at the **same viewport, scroll position, and state**. Let fonts, media, and reveal animations settle. Review the whole page wherever step 2 found a rule changing, plus a viewport wider than the design; judge scroll and pointer behavior with real input. A side-by-side montage locates drift; full-size sections establish detail.\n\nFix the largest visible differences first: geometry, missing sections/layers, typography/wrapping, asset crop, then spacing and motion. Recheck affected views. Compare animated regions in initial, active, and settled states, including reverse scroll when relevant.\n\nExercise the real local workflow: navigation between cloned routes, mobile menu, tab/accordion states, carousel boundaries, primary actions, media controls, and observed scroll-linked transitions. Check runtime errors, missing assets, and horizontal overflow. When adding pages, verify existing routes still work. Use a few browser checks at these boundaries rather than assertions about class names.\n\nRun the project's production check. Completion requires a successful build **and** rendered comparison. State remaining differences precisely instead of calling an unchecked result pixel-perfect.\n\n## Deliver\n\nReturn preview/run instructions, the source-to-local route map, representative desktop/mobile comparisons, checks actually run, and remaining visual/functional gaps. Keep reference clones in separate apps when maintaining the reusable template.\n","frontmatter":{"name":"clone-website","description":"Rebuild existing web pages as working local code, matching their real content, assets, responsive layout, and interactions. Use for website cloning, replication, or reverse engineering, including Framer sites and animated pages."},"isInternal":false,"tokens":1287,"sizeBytes":6762},{"name":"clone-website.md","path":".claude/commands/clone-website.md","rawUrl":"https://raw.githubusercontent.com/JCodesMore/ai-website-cloner-template/HEAD/.claude/commands/clone-website.md","title":"Command: /clone-website","category":"command-prompt","format":"markdown","content":"---\ndescription: Rebuild one or more websites as working Next.js pages matching their content, assets, responsive layout, and interactions. Use for website cloning, replication, or reverse engineering.\nargument-hint: \"<url1> [<url2> ...]\"\n---\n\nRead `${CLAUDE_PROJECT_DIR}/.agents/skills/clone-website/SKILL.md` completely, then follow it for the target URL or URLs in the user's request. When invoked directly, `$ARGUMENTS` contains those URL arguments.\n","frontmatter":{"description":"Rebuild one or more websites as working Next.js pages matching their content, assets, responsive layout, and interactions. Use for website cloning, replication, or reverse engineering.","argument-hint":"<url1> [<url2> ...]"},"isInternal":false,"tokens":104,"sizeBytes":454}],"systemPromptSnippet":"<yakaai_skills repo=\"JCodesMore/ai-website-cloner-template\">\n<!-- File: AGENTS.md (Tokens: ~761 | Category: root-instruction) -->\n<!-- BEGIN:nextjs-agent-rules -->\n\n# This is NOT the Next.js you know\n\nThis version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.\n\nThis block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.\n\n<!-- END:nextjs-agent-rules -->\n\n# Website Reverse-Engineer Template\n\n## What This Is\nA reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. The Next.js + shadcn/ui + Tailwind v4 base is pre-scaffolded — just run `/clone-website <url1> [<url2> ...]`.\n\n## Tech Stack\n- **Framework:** Next.js 16 (App Router, React 19, TypeScript strict)\n- **UI:** shadcn/ui (Base UI primitives, Tailwind CSS v4, `cn()` utility)\n- **Icons:** Lucide React (default — will be replaced/supplemented by extracted SVGs)\n- **Styling:** Tailwind CSS v4 with oklch design tokens\n- **Deployment:** Vercel\n\n## Commands\n- `npm run dev` — Start dev server\n- `npm run build` — Production build\n- `npm run lint` — ESLint check\n- `npm run typecheck` — TypeScript check\n- `npm run check` — Run lint + typecheck + build\n\n## Code Style\n- TypeScript strict mode, no `any`\n- Named exports, PascalCase components, camelCase utils\n- Tailwind utilities or scoped CSS; avoid inline styles unless behavior needs dynamic values\n- 2-space indentation\n- Responsive: mobile-first\n\n## Design Principles\n- **Pixel-perfect emulation** — match the target's spacing, colors, typography exactly\n- **No personal aesthetic changes during emulation phase** — match 1:1 first, customize later\n- **Real content** — use actual text and assets from the target site, not placeholders\n- **Beauty-first** — every pixel matters\n\n## Project Structure\n```\nsrc/\n  app/              # Next.js routes\n  components/       # React components\n    ui/             # shadcn/ui primitives\n    sites/<site>/   # Source-specific components, including extracted SVGs\n  lib/\n    utils.ts        # cn() utility (shadcn)\n  types/            # TypeScript interfaces\n  hooks/            # Custom React hooks\npublic/\n  sites/<site>/     # Source-specific images, fonts, video, and other assets\ndocs/\n  research/<site>/  # Page brief, asset map, and inspection evidence\n  design-references/ # Screenshots and visual references\nscripts/            # Asset download scripts\n.agents/\n  skills/\n    clone-website/  # Canonical cross-agent cloning workflow\n.claude/\n  commands/\n    clone-website.md # Thin Claude Code invocation bridge\n```\n\n## Agent Workflow\n- Edit `.agents/skills/clone-website/` for cloning-workflow changes. It is the canonical skill used by Codex, Cursor, and OpenCode.\n- Keep `.claude/commands/clone-website.md` as a thin Claude Code bridge to the canonical skill; do not duplicate the workflow there.\n\n<!-- File: CLAUDE.md (Tokens: ~5 | Category: claude-rule) -->\n@AGENTS.md\n\n<!-- File: .agents/skills/clone-website/references/framer-and-motion.md (Tokens: ~603 | Category: anthropic-skill) -->\n# Framer and animated pages\n\nUse for Framer-generated pages or animation beyond simple hover transitions. Framer is the publishing tool; reproduce its rendered design and behavior in the target framework.\n\n## Framer inspection\n\nFramer can render duplicate desktop/mobile variants and hide one with breakpoint classes. Read **visible** layout/computed styles at each viewport instead of copying all nodes. `data-framer-name` identifies sections; generated classes are not component architecture.\n\nWait for hydration/entrance animations and scroll through content below the fold. Capture initial/revealed positions when movement matters. Full-page screenshots alone can leave offscreen reveal content invisible.\n\nUse `currentSrc`, enough resolution for the largest rendered size, and the observed crop. Framer CDN image URLs can return AVIF despite PNG filenames. Verify bytes and use the actual format locally. Fonts and SVG definitions are part of fidelity.\n\nCheck each font's actual weight/style before declaring `@font-face`; a static medium file advertised as a variable family makes regular text too heavy. If asset bundling misses a public font, retrieve its observed URL directly. Exported inline SVGs need their namespace and referenced definitions to work as standalone files; confirm they render through the local `<img>` URL, not only inline.\n\nAnimated SVGs can depend on ancestor selectors, shared symbols, fonts, and stylesheet keyframes. Preserve those asset dependencies and watch a full cycle: replacing a repeating sequence with a few objects that pulse together loses the source behavior.\n\nFor CMS grids, visit supplied routes and exercise every filter. Map destinations: a static first-state list does not reproduce filtering/navigation.\n\nRebuild semantic components/data. Deployment scripts and minified wrappers are evidence, not code to paste into a new app.\n\n## Motion inspection\n\n| Driver | Evidence | Typical implementation |\n|---|---|---|\n| Time | cycle, pause, direction, looping media | CSS keyframes, video, animation library |\n| Scroll reveal | entry boundary, start/end positions, reverse replay | IntersectionObserver + CSS |\n| Continuous scroll | progress, pin duration, layer speeds | scroll progress + CSS variables or library |\n| Click/hover | alternate content, transition, dismissal/navigation | React state + CSS |\n| Pointer/canvas | response, renderer/media identity | matched renderer or disclosed approximation |\n\nObserve both directions and mobile. A pinned scene needs scroll distance and release behavior, not just sticky positioning. An animated visual may be a video: use actual media when available.\n\nMatch measurable easing/duration. Clean up animation loops with component lifecycle. Framer's smooth scrolling is Lenis: a `lenis` class on `html` or a `window.lenis` global exposes the options to reproduce.\n\n## Verify the experience\n\nCompare initial, active, and settled states at comparable positions. Test controls during motion and navigate away/back to detect stuck states. Confirm motion does not widen the document or hide content permanently. Name any unimplemented shader/canvas behavior rather than presenting a still as proof.\n\n<!-- File: .agents/skills/clone-website/references/inspection-guide.md (Tokens: ~568 | Category: anthropic-skill) -->\n# Inspect a source page\n\nCapture evidence that changes the build: layout, content, assets, and states. One page brief usually suffices.\n\n## Visual structure\n\nRecord section order, max-width, gutters, column proportions, and sticky/fixed layers. Measure heading/body family, weight, size, line height, and letter spacing. Match the actual font before adjusting widths to repair wrapping.\n\nSweep width from mobile to beyond the desktop design, narrowing around each transition; max-width caps only show on wider screens. Record stacking, navigation/menu changes, type reflow, and different crops/assets. A scaled desktop screenshot is not a mobile reference.\n\nCapture whole-page evidence after visiting lazy/reveal sections, plus full-size hero and interaction views. Fonts or entry motion can make early screenshots misleading.\n\n## Assets\n\nUse available browser asset inventory/download tools or DOM-backed URLs with direct downloads. Include:\n\n- Images: `currentSrc`, `srcset`, dimensions, `object-fit`, crop position, alt text.\n- Layers: visible images/backgrounds/SVGs and stacking/positioning.\n- Video: source, poster, autoplay/loop/mute behavior, aspect ratio, controls.\n- Fonts: actual loaded family/weights and files used by the page.\n- SVG: viewBox plus referenced gradients, masks, symbols, and filters.\n\nSave assets used by the cloned scope and their source URL → local path mapping. Distinguish repeated filenames. Check content type, dimensions, and browser rendering: HTTP success can return an error page; CDNs may change formats without changing URL extensions.\n\nIf a browser bundle fails for a public font/image, download the observed URL directly. Keep unresolved assets explicit and preserve applicable attribution.\n\n## State evidence\n\nRecord trigger → visible result. Scroll before clicking so pinned scenes are not mistaken for tabs. Inspect alternate content, selection, layout, and transition.\n\nMeasure important before/after styles using the browser's supported DOM evaluation. For a selector observed on the page, useful fields are textContent, getBoundingClientRect(), and computed font, letterSpacing, color, background, gap, padding, borderRadius, position, transform, and transition.\n\nPage-wide scripts (smooth scrolling, snapping, cursor followers, page transitions) change every interaction. Identify them from root classes, globals, and loaded scripts, and record their options.\n\nEvaluation environments differ: read-only DOM snapshots may omit APIs such as `document.fonts`. Use asset metadata or developer inspection for missing measurements rather than inferring values from an unsupported API.\n\n## Handoff and comparison\n\nProvide screenshots, geometry/type, content, local asset paths, responsive changes, and trigger/state behavior. Establish shared navigation/styles before parallel page work.\n\nKeep comparison screenshots labeled by URL/route and viewport. Test controls and inspect their visible result. Check mobile overflow and failed assets separately from similarity.\n\n<!-- File: .agents/skills/clone-website/SKILL.md (Tokens: ~1287 | Category: anthropic-skill) -->\n---\nname: clone-website\ndescription: Rebuild existing web pages as working local code, matching their real content, assets, responsive layout, and interactions. Use for website cloning, replication, or reverse engineering, including Framer sites and animated pages.\n---\n\n# Clone a website\n\nRecreate the supplied pages in the current app. Match the source before adding a new design direction. Deliver working, editable code: screenshots, iframes, and downloaded production bundles are references, not the implementation.\n\n## 1. Map the work\n\nRead project instructions, the actual framework/scripts, and existing routes. Open the source URLs with the available browser. Prefer direct HTTP, asset tools, or APIs for extraction when practical; use the browser to establish appearance and behavior.\n\nRecord a short source-to-local route map and the files each page owns. Follow the app's conventions; in this template use `src/app/`, `src/components/sites/<site>/`, `public/sites/<site>/`, and `docs/research/<site>/`. Give origins, pages, and downloads distinct names; add a port or URL hash when readable names collide.\n\n- A first root clone may replace the untouched template homepage.\n- Preserve source pathnames for multiple pages from one origin. Query/fragment variations usually represent states of the same route; reproduce those states.\n- Preserve existing authored routes/assets. Update them when requested; resolve unrequested route collisions before replacing anything.\n- When adding pages to an existing clone, extend its layout and global styles without replacing the styles used by existing pages.\n- Use separate apps for different origins unless the user wants a combined app. Combined sites need distinct route prefixes and scoped fonts, styles, and layout.\n- Escape literal URL segments that conflict with framework syntax (`_`, `@`, brackets, parentheses) using its supported mechanism, then verify the actual requested URL.\n\nExisting clones are useful starting points: compare them with the current source and record what was reused. Finish when every requested URL has a destination and file ownership is clear.\n\n## 2. Observe before building\n\nInspect the whole page at desktop and mobile widths. Scroll top to bottom to load lazy media and reveal sticky/pinned scenes. Then exercise menus, tabs, accordions, carousels, hover states, and primary links. Distinguish changes driven by **scroll, click, hover, or time**; a click imitation of a scroll-driven section is a different product.\n\nTreat each observation as one sample of a **rule**. Read declared values (computed styles, CSS variables, a library's live options) rather than inferring them from one rendering, and vary viewport width (including wider than the design), viewport height, input, and state until you know what drives each change. Drive the page with the inputs visitors use (wheel, touch, keyboard, pointer); scripted scrolling bypasses behavior attached to them, such as smooth scrolling.\n\nSave source screenshots labeled with viewport, scroll position, and interaction state. Capture alternate-state content/assets. Keep one compact page brief: section order, typography, layout measurements, asset mapping, and interactions. Add section briefs only when they help independent builders.\n\nRead [the inspection reference](references/inspection-guide.md) for extraction and state comparison. For **Framer-generated pages, sticky scenes, reveal animations, or animated media**, read [Framer and motion](references/framer-and-motion.md).\n\nUse the source's real text and the files it actually loads: fonts, images, SVGs, and video. A same-named substitute from another provider or icon set has different metrics or shapes. Measure important geometry/computed styles. Inspect layered images and media elements before rebuilding a visual as HTML. Track source URL → local asset path and verify content type/dimensions: a `.png` URL may return AVIF.\n\nFinish when every section and meaningful state has enough evidence to build, with unavailable details identified. A large DOM dump does not replace looking at the page.\n\n## 3. Build a complete first pass\n\nEstablish fonts, page width, colors, assets, routes, page-wide behavior, and shared components first. Build each shared component with every observed state (hover, focus, breakpoints) so builders reuse it as-is. Reuse fitting components. Prefer CSS for layout/simple motion and an animation library when source behavior needs it.\n\nBuild coherent sections with real content. Delegate independent pages/sections after shared files have an owner. Give builders screenshots, relevant measurements/state notes, asset paths, destination files, and a concrete finish line. A concise brief with precise file references is enough; no fixed agent count or per-component paperwork is required.\n\nRecreate in-scope interactions. Preserve real outbound destinations. Rewrite links to local routes when those routes are included; leave out-of-scope destinations pointing to the source and disclose them. Visible controls must perform the behavior they promise.\n\nRun the appropriate project check after an integrated slice. Finish this pass when every requested section/route renders with actual assets and important controls work.\n\n## 4. Compare, repair, repeat\n\nOpen source/local pages at the **same viewport, scroll position, and state**. Let fonts, media, and reveal animations settle. Review the whole page wherever step 2 found a rule changing, plus a viewport wider than the design; judge scroll and pointer behavior with real input. A side-by-side montage locates drift; full-size sections establish detail.\n\nFix the largest visible differences first: geometry, missing sections/layers, typography/wrapping, asset crop, then spacing and motion. Recheck affected views. Compare animated regions in initial, active, and settled states, including reverse scroll when relevant.\n\nExercise the real local workflow: navigation between cloned routes, mobile menu, tab/accordion states, carousel boundaries, primary actions, media controls, and observed scroll-linked transitions. Check runtime errors, missing assets, and horizontal overflow. When adding pages, verify existing routes still work. Use a few browser checks at these boundaries rather than assertions about class names.\n\nRun the project's production check. Completion requires a successful build **and** rendered comparison. State remaining differences precisely instead of calling an unchecked result pixel-perfect.\n\n## Deliver\n\nReturn preview/run instructions, the source-to-local route map, representative desktop/mobile comparisons, checks actually run, and remaining visual/functional gaps. Keep reference clones in separate apps when maintaining the reusable template.\n\n<!-- File: .claude/commands/clone-website.md (Tokens: ~104 | Category: command-prompt) -->\n---\ndescription: Rebuild one or more websites as working Next.js pages matching their content, assets, responsive layout, and interactions. Use for website cloning, replication, or reverse engineering.\nargument-hint: \"<url1> [<url2> ...]\"\n---\n\nRead `${CLAUDE_PROJECT_DIR}/.agents/skills/clone-website/SKILL.md` completely, then follow it for the target URL or URLs in the user's request. When invoked directly, `$ARGUMENTS` contains those URL arguments.\n</yakaai_skills>"}