$npx -y skills add heyhank-app/heyhank --skill teach-impeccableOne-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines.
| 1 | Gather design context for this project, then persist it for all future sessions. |
| 2 | |
| 3 | ## Step 1: Explore the Codebase |
| 4 | |
| 5 | Before asking questions, thoroughly scan the project to discover what you can: |
| 6 | |
| 7 | - **README and docs**: Project purpose, target audience, any stated goals |
| 8 | - **Package.json / config files**: Tech stack, dependencies, existing design libraries |
| 9 | - **Existing components**: Current design patterns, spacing, typography in use |
| 10 | - **Brand assets**: Logos, favicons, color values already defined |
| 11 | - **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales |
| 12 | - **Any style guides or brand documentation** |
| 13 | |
| 14 | Note what you've learned and what remains unclear. |
| 15 | |
| 16 | ## Step 2: Ask UX-Focused Questions |
| 17 | |
| 18 | STOP and call the AskUserQuestionTool to clarify. Focus only on what you couldn't infer from the codebase: |
| 19 | |
| 20 | ### Users & Purpose |
| 21 | - Who uses this? What's their context when using it? |
| 22 | - What job are they trying to get done? |
| 23 | - What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) |
| 24 | |
| 25 | ### Brand & Personality |
| 26 | - How would you describe the brand personality in 3 words? |
| 27 | - Any reference sites or apps that capture the right feel? What specifically about them? |
| 28 | - What should this explicitly NOT look like? Any anti-references? |
| 29 | |
| 30 | ### Aesthetic Preferences |
| 31 | - Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) |
| 32 | - Light mode, dark mode, or both? |
| 33 | - Any colors that must be used or avoided? |
| 34 | |
| 35 | ### Accessibility & Inclusion |
| 36 | - Specific accessibility requirements? (WCAG level, known user needs) |
| 37 | - Considerations for reduced motion, color blindness, or other accommodations? |
| 38 | |
| 39 | Skip questions where the answer is already clear from the codebase exploration. |
| 40 | |
| 41 | ## Step 3: Write Design Context |
| 42 | |
| 43 | Synthesize your findings and the user's answers into a `## Design Context` section: |
| 44 | |
| 45 | ```markdown |
| 46 | ## Design Context |
| 47 | |
| 48 | ### Users |
| 49 | [Who they are, their context, the job to be done] |
| 50 | |
| 51 | ### Brand Personality |
| 52 | [Voice, tone, 3-word personality, emotional goals] |
| 53 | |
| 54 | ### Aesthetic Direction |
| 55 | [Visual tone, references, anti-references, theme] |
| 56 | |
| 57 | ### Design Principles |
| 58 | [3-5 principles derived from the conversation that should guide all design decisions] |
| 59 | ``` |
| 60 | |
| 61 | Write this section to CLAUDE.md in the project root. If the file exists, append or update the Design Context section. |
| 62 | |
| 63 | Confirm completion and summarize the key design principles that will now guide all future work. |