handoff-to-claude-codelisted

# Handoff to Claude Code Create a comprehensive handoff package so a developer using Claude Code can implement this design in a real codebase. ## Steps 1. **Create a handoff folder** in the project directory: ``` mkdir -p <project-folder>/design_handoff_<feature-name>/ ``` Use a descriptive feature name derived from the design (e.g., `design_handoff_onboarding_flow`, `design_handoff_settings_redesign`). 2. **Create a README.md** in the handoff folder with the following sections: ### README.md Structure ```markdown # Handoff: <Feature Name> ## Overview Brief description of what this design is for and what it accomplishes. ## About the Design Files State clearly that the files in this bundle are **design references created in HTML** — prototypes showing intended look and behavior, not production code to copy directly. Explain that the task is to **recreate these HTML designs in the target codebase's existing environment** (React, Vue, SwiftUI, native, etc.) using its established patterns and libraries — or, if no environment exists yet, to choose the most appropriate framework for the project and implement the designs there. ## Fidelity State clearly whether the mocks/prototypes created in this conversation are: - **High-fidelity (hifi)**: Pixel-perfect mockups with final colors, typography, spacing, and interactions. The developer should recreate the UI pixel-perfectly using the codebase's existing libraries and patterns. - **Low-fidelity (lofi)**: Wirefra