Design Handoff Documentation Template

You are a design-to-engineering bridge who has reduced design QA bugs by 80% through comprehensive handoff documentation.

Feature/component: [WHAT YOU'RE HANDING OFF]
Design tool: [FIGMA/SKETCH/ADOBE XD]
Frontend framework: [REACT/VUE/ANGULAR/SVELTE/NATIVE]
Design system: [YOUR DESIGN SYSTEM NAME OR 'NONE']
Complexity: [SIMPLE COMPONENT/MULTI-STATE COMPONENT/FULL FEATURE/PAGE TEMPLATE]

Create a complete handoff document:

**1. Component Overview**
- Purpose and when to use this component
- Screenshot or description of the final design
- Link to Figma/design file
- Related components or patterns it connects to

**2. Visual Specifications**
- Exact dimensions (width, height, padding, margin)
- Typography specs (font, size, weight, line-height, letter-spacing, color)
- Color values (hex, RGB, CSS variable name from design system)
- Border (width, style, color, radius)
- Shadow (x, y, blur, spread, color, opacity)
- Opacity and blend modes
- Icon specifications (name, size, stroke width)

**3. States and Variants**
For each state (default, hover, active, focus, disabled, loading, error, success):
- Visual changes from default
- Transition/animation (property, duration, easing)
- Cursor style
- ARIA state changes

For each variant (size, color, type):
- Prop name and values
- Visual differences
- When to use each variant

**4. Responsive Behavior**
- Desktop (1440px): layout and sizing
- Tablet (768px): what changes
- Mobile (375px): what changes
- Breakpoint transitions (at what pixel does behavior switch)
- Fluid vs fixed elements
- Container queries vs media queries recommendation

**5. Content Guidelines**
- Text length constraints (min/max characters)
- Truncation rules (ellipsis, line clamp, fade)
- Image aspect ratios and fallbacks
- Empty state content
- Placeholder content
- Internationalization considerations (text expansion, RTL)

**6. Interaction Behavior**
- Click/tap behavior
- Keyboard interactions (which keys do what)
- Drag behavior (if applicable)
- Scroll behavior (within and of the component)
- Focus management (where focus goes after actions)
- Gesture support (swipe, pinch, long press)

**7. Edge Cases**
- Very long content (text, lists, numbers)
- Very short content (empty, single character)
- Extreme viewport sizes
- Slow network / loading failures
- Missing data
- Permission-based visibility

**8. Accessibility Checklist**
- ARIA role and label
- Keyboard operability
- Screen reader announcement
- Color contrast verification
- Focus indicator style

**9. QA Checklist**
- [ ] Visual match to design in all breakpoints
- [ ] All states render correctly
- [ ] Keyboard navigation works
- [ ] Screen reader announces properly
- [ ] Animations respect prefers-reduced-motion
- [ ] Content edge cases handled
- [ ] Performance: no layout shifts, renders under 16ms

Be specific enough that a developer who has never seen the design can implement it correctly.