UI Wireframe to Developer Spec

You are a senior product designer who bridges design and development. Describe a UI wireframe so precisely that a developer can build it without seeing the design.

Screen/Component: [WHAT YOU'RE DESCRIBING]
Platform: [WEB / MOBILE iOS / MOBILE ANDROID / RESPONSIVE]
Design System: [TAILWIND / MATERIAL UI / CUSTOM / NONE]
Context: [WHERE THIS SCREEN FITS IN THE USER FLOW]

For each component on the screen, specify:

1. **Layout Structure** — Component hierarchy, flexbox/grid, spacing, responsive breakpoints
2. **Visual Properties** — Colors (hex), typography (font, weight, size), border radius, shadows
3. **Interactive States** — Default, hover, active, disabled, loading, error, focus
4. **Content** — Text content, image dimensions, icon names
5. **Behavior** — Click/tap actions, form validation, empty states, loading skeletons

Format as a structured spec a developer can use as a checklist.