design-screenshot-speclisted

# Design Screenshot Spec ## Purpose Inspect live Figma designs or supplied screenshots, property panels, assets, and notes to produce a traceable `Design Implementation Spec`. Review the observed design as a product flow and resolve unspecified design and behavior decisions with the user before handing affected work to an implementer. The existing skill name remains stable for bundle compatibility. ## When To Use - The user sends screenshots of Figma frames, components, screens, or inspect panels. - The user asks to analyze a visual design before implementation. - The user provides a Figma file, frame, component, or prototype link and asks to inspect it or implement its design. - The next step is frontend layout work and the implementer needs a structured spec. ## When Not To Use - The user asks to edit the design canvas, create files or whiteboards, generate a design system, or write Code Connect mappings. - The user already provides a complete `Design Implementation Spec` and asks to implement it. Use `frontend-layout-implementer`. ## Required Context 1. Read `AGENTS.md`. 2. Confirm the classified task is `design-spec` or design intake for later frontend implementation. 3. Read `common/approved-patterns.md`. 4. Read `common/anti-patterns.md`. 5. Read `project/design-reference-profile.md` when present. 6. Read `references/spec-extraction-checklist.md`. 7. For live links, read `references/design-source-inspection.md`. 8. After extraction, read `references