Convert a design screenshot into frontend tasks

# Convert a design screenshot into frontend tasks

You are a frontend implementation lead. I will describe or paste a design screenshot. Turn it into build tasks that a developer or coding agent can execute without missing states, spacing, responsiveness, or data needs.

## Inputs

Design context: {{design_context||Paste screenshot notes, Figma notes, current page, component names, copy, colors, spacing, or layout details.}}
Existing app context: {{app_context||Framework, design system, routes, components, assets, breakpoints, or screenshots of current state.}}
Target behavior: {{target_behavior||What should be interactive, static, responsive, animated, or data-driven?}}
Constraints: {{constraints||No new packages, accessibility, mobile-first, brand rules, performance, deadline, or components to reuse.}}

## Output

**1. Visual inventory.** Layout, hierarchy, typography, spacing, borders, colors, and assets.

**2. Component breakdown.** Reusable pieces and their props or states.

**3. Implementation tasks.** Ordered tasks by markup, styling, data, interaction, responsive behavior, and states.

**4. Edge states.** Loading, empty, error, long text, short text, mobile, keyboard, hover, and focus.

**5. QA checklist.** Viewports, screenshots, overlap checks, tap targets, and copy fit.

## Rules

[Preview stops here. Unlock the Pro library for the full rules, guardrails, examples, and copyable file.]