screenshot-to-pagelisted

# screenshot-to-page — screenshot → working route This skill takes one screenshot and one route-name from the user, and produces a working page in the existing scaffolded app. The route renders close to the visual reference, uses **only** components and tokens already defined by the project's design system, and is reachable in `pnpm dev`. ## What this skill targets **Pixel-perfect on what's reproducible**: layout, typography, color, spacing, radii, component states. The skill iterates render → screenshot → pixel-diff → fix until the visual delta is below threshold (default <2% off-tokens). **Placeholder, with explicit flag, on what isn't**: photography, illustration, custom illustrations, brand-licensed imagery. These are static raster contents that no skill can synthesize from a screenshot alone. **Componentized aggressively**: the skill detects repeated visual patterns in the screenshot (3 cards with the same structure, 4 nav links, a list of testimonials, ...) and extracts each pattern into a reusable component before writing JSX. The page file ends up short and readable; the heavy lifting is in `components/<PageName>/`. ## What this skill is NOT - Not a Figma-to-code service. The input is a static raster, not a vector. - Not a layout designer — if the screenshot is ambiguous (e.g., two interpretations of a section break), ask the user. ## When this skill applies - A `<project-root>/` exists (`phase >= scaffolded`). - `.workflow/screenshots/` contains at least one