Wireframe Annotation Guide

// Component labels | State notes | Interaction specs | Responsive rules

// WIREFRAME ANNOTATION STANDARDS

// 1. COMPONENT LABELS
// Every interactive element must be labeled with:
//   - Component type (Button, Input, Dropdown, Modal)
//   - State (default, hover, active, disabled, loading, error)
//   - Content source (static, dynamic from API, user-entered)
// Example: [Button: "Submit Order" | type=primary | state=loading on click]

// 2. INTERACTION NOTES
// Document what happens on every user action:
// [Input: email] → on blur: validate email format → show inline error if invalid
// [Button: "Add to Cart"] → onClick: POST /api/cart → optimistic UI update
// [Modal: "Confirm Delete"] → backdrop click: close without action

// 3. RESPONSIVE BREAKPOINTS
// Annotate layout changes at each breakpoint:
// Mobile  (<768px):  Single column, stacked nav
// Tablet  (768-1024): Two columns, collapsed sidebar
// Desktop (>1024px): Three columns, full sidebar

// 4. EMPTY AND ERROR STATES
// Always annotate:
// Empty state: [List: Orders] → empty → show "No orders yet" + CTA button
// Error state: [Section: Dashboard] → error → show error banner with retry

// 5. DATA REQUIREMENTS
// Note what data each section needs:
// [Card: User Profile] → requires: user.name, user.avatar, user.joinDate
//   - Avatar fallback: initials if no image URL

// 6. ACCESSIBILITY NOTES
// [Image: Product Photo] → alt text: product.name + " - " + product.color
// [Form: Checkout] → all inputs must have labels (not just placeholders)