From 3ce992cccc5c03113c685f458dbdb5258c585db0 Mon Sep 17 00:00:00 2001 From: Vinaywho Date: Sat, 28 Mar 2026 02:52:54 +0530 Subject: [PATCH] added support for Qoder software --- .agents/skills/adapt/SKILL.md | 12 +- .agents/skills/animate/SKILL.md | 11 +- .agents/skills/arrange/SKILL.md | 11 +- .agents/skills/audit/SKILL.md | 15 +- .agents/skills/bolder/SKILL.md | 11 +- .agents/skills/clarify/SKILL.md | 12 +- .agents/skills/colorize/SKILL.md | 11 +- .agents/skills/critique/SKILL.md | 15 +- .agents/skills/delight/SKILL.md | 11 +- .agents/skills/distill/SKILL.md | 11 +- .agents/skills/extract/SKILL.md | 12 +- .agents/skills/frontend-design/SKILL.md | 9 +- .agents/skills/harden/SKILL.md | 12 +- .agents/skills/normalize/SKILL.md | 11 +- .agents/skills/onboard/SKILL.md | 12 +- .agents/skills/optimize/SKILL.md | 12 +- .agents/skills/overdrive/SKILL.md | 11 +- .agents/skills/polish/SKILL.md | 12 +- .agents/skills/quieter/SKILL.md | 11 +- .agents/skills/teach-impeccable/SKILL.md | 7 +- .agents/skills/typeset/SKILL.md | 11 +- .claude/skills/adapt/SKILL.md | 12 +- .claude/skills/animate/SKILL.md | 11 +- .claude/skills/arrange/SKILL.md | 11 +- .claude/skills/audit/SKILL.md | 15 +- .claude/skills/bolder/SKILL.md | 11 +- .claude/skills/clarify/SKILL.md | 12 +- .claude/skills/colorize/SKILL.md | 11 +- .claude/skills/critique/SKILL.md | 15 +- .claude/skills/delight/SKILL.md | 11 +- .claude/skills/distill/SKILL.md | 11 +- .claude/skills/extract/SKILL.md | 12 +- .claude/skills/frontend-design/SKILL.md | 9 +- .claude/skills/harden/SKILL.md | 12 +- .claude/skills/normalize/SKILL.md | 11 +- .claude/skills/onboard/SKILL.md | 12 +- .claude/skills/optimize/SKILL.md | 12 +- .claude/skills/overdrive/SKILL.md | 11 +- .claude/skills/polish/SKILL.md | 12 +- .claude/skills/quieter/SKILL.md | 11 +- .claude/skills/teach-impeccable/SKILL.md | 7 +- .claude/skills/typeset/SKILL.md | 11 +- .codex/skills/adapt/SKILL.md | 11 +- .codex/skills/animate/SKILL.md | 10 +- .codex/skills/arrange/SKILL.md | 10 +- .codex/skills/audit/SKILL.md | 14 +- .codex/skills/bolder/SKILL.md | 10 +- .codex/skills/clarify/SKILL.md | 11 +- .codex/skills/colorize/SKILL.md | 10 +- .codex/skills/critique/SKILL.md | 14 +- .codex/skills/delight/SKILL.md | 10 +- .codex/skills/distill/SKILL.md | 10 +- .codex/skills/extract/SKILL.md | 11 +- .codex/skills/frontend-design/SKILL.md | 9 +- .codex/skills/harden/SKILL.md | 11 +- .codex/skills/normalize/SKILL.md | 10 +- .codex/skills/onboard/SKILL.md | 11 +- .codex/skills/optimize/SKILL.md | 11 +- .codex/skills/overdrive/SKILL.md | 10 +- .codex/skills/polish/SKILL.md | 11 +- .codex/skills/quieter/SKILL.md | 10 +- .codex/skills/teach-impeccable/SKILL.md | 8 +- .codex/skills/typeset/SKILL.md | 10 +- .cursor/skills/adapt/SKILL.md | 12 +- .cursor/skills/animate/SKILL.md | 11 +- .cursor/skills/arrange/SKILL.md | 11 +- .cursor/skills/audit/SKILL.md | 15 +- .cursor/skills/bolder/SKILL.md | 11 +- .cursor/skills/clarify/SKILL.md | 12 +- .cursor/skills/colorize/SKILL.md | 11 +- .cursor/skills/critique/SKILL.md | 15 +- .cursor/skills/delight/SKILL.md | 11 +- .cursor/skills/distill/SKILL.md | 11 +- .cursor/skills/extract/SKILL.md | 12 +- .cursor/skills/frontend-design/SKILL.md | 9 +- .cursor/skills/harden/SKILL.md | 12 +- .cursor/skills/normalize/SKILL.md | 11 +- .cursor/skills/onboard/SKILL.md | 12 +- .cursor/skills/optimize/SKILL.md | 12 +- .cursor/skills/overdrive/SKILL.md | 11 +- .cursor/skills/polish/SKILL.md | 12 +- .cursor/skills/quieter/SKILL.md | 11 +- .cursor/skills/teach-impeccable/SKILL.md | 8 +- .cursor/skills/typeset/SKILL.md | 11 +- .gemini/skills/adapt/SKILL.md | 12 +- .gemini/skills/animate/SKILL.md | 11 +- .gemini/skills/arrange/SKILL.md | 11 +- .gemini/skills/audit/SKILL.md | 15 +- .gemini/skills/bolder/SKILL.md | 11 +- .gemini/skills/clarify/SKILL.md | 12 +- .gemini/skills/colorize/SKILL.md | 11 +- .gemini/skills/critique/SKILL.md | 15 +- .gemini/skills/delight/SKILL.md | 11 +- .gemini/skills/distill/SKILL.md | 11 +- .gemini/skills/extract/SKILL.md | 12 +- .gemini/skills/frontend-design/SKILL.md | 10 +- .gemini/skills/harden/SKILL.md | 12 +- .gemini/skills/normalize/SKILL.md | 11 +- .gemini/skills/onboard/SKILL.md | 12 +- .gemini/skills/optimize/SKILL.md | 12 +- .gemini/skills/overdrive/SKILL.md | 11 +- .gemini/skills/polish/SKILL.md | 12 +- .gemini/skills/quieter/SKILL.md | 11 +- .gemini/skills/teach-impeccable/SKILL.md | 8 +- .gemini/skills/typeset/SKILL.md | 11 +- .kiro/skills/adapt/SKILL.md | 12 +- .kiro/skills/animate/SKILL.md | 11 +- .kiro/skills/arrange/SKILL.md | 11 +- .kiro/skills/audit/SKILL.md | 15 +- .kiro/skills/bolder/SKILL.md | 11 +- .kiro/skills/clarify/SKILL.md | 12 +- .kiro/skills/colorize/SKILL.md | 11 +- .kiro/skills/critique/SKILL.md | 15 +- .kiro/skills/delight/SKILL.md | 11 +- .kiro/skills/distill/SKILL.md | 11 +- .kiro/skills/extract/SKILL.md | 12 +- .kiro/skills/frontend-design/SKILL.md | 9 +- .kiro/skills/harden/SKILL.md | 12 +- .kiro/skills/normalize/SKILL.md | 11 +- .kiro/skills/onboard/SKILL.md | 12 +- .kiro/skills/optimize/SKILL.md | 12 +- .kiro/skills/overdrive/SKILL.md | 11 +- .kiro/skills/polish/SKILL.md | 12 +- .kiro/skills/quieter/SKILL.md | 11 +- .kiro/skills/teach-impeccable/SKILL.md | 8 +- .kiro/skills/typeset/SKILL.md | 11 +- .opencode/skills/adapt/SKILL.md | 12 +- .opencode/skills/animate/SKILL.md | 11 +- .opencode/skills/arrange/SKILL.md | 11 +- .opencode/skills/audit/SKILL.md | 15 +- .opencode/skills/bolder/SKILL.md | 11 +- .opencode/skills/clarify/SKILL.md | 12 +- .opencode/skills/colorize/SKILL.md | 11 +- .opencode/skills/critique/SKILL.md | 15 +- .opencode/skills/delight/SKILL.md | 11 +- .opencode/skills/distill/SKILL.md | 11 +- .opencode/skills/extract/SKILL.md | 12 +- .opencode/skills/frontend-design/SKILL.md | 9 +- .opencode/skills/harden/SKILL.md | 12 +- .opencode/skills/normalize/SKILL.md | 11 +- .opencode/skills/onboard/SKILL.md | 12 +- .opencode/skills/optimize/SKILL.md | 12 +- .opencode/skills/overdrive/SKILL.md | 11 +- .opencode/skills/polish/SKILL.md | 12 +- .opencode/skills/quieter/SKILL.md | 11 +- .opencode/skills/teach-impeccable/SKILL.md | 7 +- .opencode/skills/typeset/SKILL.md | 11 +- .pi/skills/adapt/SKILL.md | 12 +- .pi/skills/animate/SKILL.md | 11 +- .pi/skills/arrange/SKILL.md | 11 +- .pi/skills/audit/SKILL.md | 15 +- .pi/skills/bolder/SKILL.md | 11 +- .pi/skills/clarify/SKILL.md | 12 +- .pi/skills/colorize/SKILL.md | 11 +- .pi/skills/critique/SKILL.md | 15 +- .pi/skills/delight/SKILL.md | 11 +- .pi/skills/distill/SKILL.md | 11 +- .pi/skills/extract/SKILL.md | 12 +- .pi/skills/frontend-design/SKILL.md | 9 +- .pi/skills/harden/SKILL.md | 12 +- .pi/skills/normalize/SKILL.md | 11 +- .pi/skills/onboard/SKILL.md | 12 +- .pi/skills/optimize/SKILL.md | 12 +- .pi/skills/overdrive/SKILL.md | 11 +- .pi/skills/polish/SKILL.md | 12 +- .pi/skills/quieter/SKILL.md | 11 +- .pi/skills/teach-impeccable/SKILL.md | 8 +- .pi/skills/typeset/SKILL.md | 11 +- .qoder/skills/adapt/SKILL.md | 204 + .qoder/skills/animate/SKILL.md | 179 + .qoder/skills/arrange/SKILL.md | 129 + .qoder/skills/audit/SKILL.md | 152 + .qoder/skills/bolder/SKILL.md | 121 + .qoder/skills/clarify/SKILL.md | 188 + .qoder/skills/colorize/SKILL.md | 147 + .qoder/skills/critique/SKILL.md | 206 + .../critique/reference/cognitive-load.md | 106 + .../critique/reference/heuristics-scoring.md | 234 + .qoder/skills/critique/reference/personas.md | 178 + .qoder/skills/delight/SKILL.md | 308 ++ .qoder/skills/distill/SKILL.md | 126 + .qoder/skills/extract/SKILL.md | 97 + .qoder/skills/frontend-design/SKILL.md | 152 + .../reference/color-and-contrast.md | 132 + .../reference/interaction-design.md | 195 + .../reference/motion-design.md | 99 + .../reference/responsive-design.md | 114 + .../reference/spatial-design.md | 100 + .../frontend-design/reference/typography.md | 133 + .../frontend-design/reference/ux-writing.md | 107 + .qoder/skills/harden/SKILL.md | 360 ++ .qoder/skills/normalize/SKILL.md | 75 + .qoder/skills/onboard/SKILL.md | 251 + .qoder/skills/optimize/SKILL.md | 271 ++ .qoder/skills/overdrive/SKILL.md | 146 + .qoder/skills/polish/SKILL.md | 208 + .qoder/skills/quieter/SKILL.md | 107 + .qoder/skills/teach-impeccable/SKILL.md | 76 + .qoder/skills/typeset/SKILL.md | 120 + .trae-cn/skills/adapt/SKILL.md | 12 +- .trae-cn/skills/animate/SKILL.md | 11 +- .trae-cn/skills/arrange/SKILL.md | 11 +- .trae-cn/skills/audit/SKILL.md | 15 +- .trae-cn/skills/bolder/SKILL.md | 11 +- .trae-cn/skills/clarify/SKILL.md | 12 +- .trae-cn/skills/colorize/SKILL.md | 11 +- .trae-cn/skills/critique/SKILL.md | 15 +- .trae-cn/skills/delight/SKILL.md | 11 +- .trae-cn/skills/distill/SKILL.md | 11 +- .trae-cn/skills/extract/SKILL.md | 12 +- .trae-cn/skills/frontend-design/SKILL.md | 9 +- .trae-cn/skills/harden/SKILL.md | 12 +- .trae-cn/skills/normalize/SKILL.md | 11 +- .trae-cn/skills/onboard/SKILL.md | 12 +- .trae-cn/skills/optimize/SKILL.md | 12 +- .trae-cn/skills/overdrive/SKILL.md | 11 +- .trae-cn/skills/polish/SKILL.md | 12 +- .trae-cn/skills/quieter/SKILL.md | 11 +- .trae-cn/skills/teach-impeccable/SKILL.md | 7 +- .trae-cn/skills/typeset/SKILL.md | 11 +- .trae/skills/adapt/SKILL.md | 12 +- .trae/skills/animate/SKILL.md | 11 +- .trae/skills/arrange/SKILL.md | 11 +- .trae/skills/audit/SKILL.md | 15 +- .trae/skills/bolder/SKILL.md | 11 +- .trae/skills/clarify/SKILL.md | 12 +- .trae/skills/colorize/SKILL.md | 11 +- .trae/skills/critique/SKILL.md | 15 +- .trae/skills/delight/SKILL.md | 11 +- .trae/skills/distill/SKILL.md | 11 +- .trae/skills/extract/SKILL.md | 12 +- .trae/skills/frontend-design/SKILL.md | 9 +- .trae/skills/harden/SKILL.md | 12 +- .trae/skills/normalize/SKILL.md | 11 +- .trae/skills/onboard/SKILL.md | 12 +- .trae/skills/optimize/SKILL.md | 12 +- .trae/skills/overdrive/SKILL.md | 11 +- .trae/skills/polish/SKILL.md | 12 +- .trae/skills/quieter/SKILL.md | 11 +- .trae/skills/teach-impeccable/SKILL.md | 7 +- .trae/skills/typeset/SKILL.md | 11 +- AGENTS.md | 16 +- DEVELOP.md | 11 +- HARNESSES.md | 34 +- README.md | 6 + lib/download-providers.js | 1 + public/css/styles.css | 4083 +---------------- scripts/lib/transformers/providers.js | 6 + scripts/lib/utils.js | 6 + tests/server/download-validation.test.js | 10 +- 250 files changed, 6930 insertions(+), 4651 deletions(-) create mode 100644 .qoder/skills/adapt/SKILL.md create mode 100644 .qoder/skills/animate/SKILL.md create mode 100644 .qoder/skills/arrange/SKILL.md create mode 100644 .qoder/skills/audit/SKILL.md create mode 100644 .qoder/skills/bolder/SKILL.md create mode 100644 .qoder/skills/clarify/SKILL.md create mode 100644 .qoder/skills/colorize/SKILL.md create mode 100644 .qoder/skills/critique/SKILL.md create mode 100644 .qoder/skills/critique/reference/cognitive-load.md create mode 100644 .qoder/skills/critique/reference/heuristics-scoring.md create mode 100644 .qoder/skills/critique/reference/personas.md create mode 100644 .qoder/skills/delight/SKILL.md create mode 100644 .qoder/skills/distill/SKILL.md create mode 100644 .qoder/skills/extract/SKILL.md create mode 100644 .qoder/skills/frontend-design/SKILL.md create mode 100644 .qoder/skills/frontend-design/reference/color-and-contrast.md create mode 100644 .qoder/skills/frontend-design/reference/interaction-design.md create mode 100644 .qoder/skills/frontend-design/reference/motion-design.md create mode 100644 .qoder/skills/frontend-design/reference/responsive-design.md create mode 100644 .qoder/skills/frontend-design/reference/spatial-design.md create mode 100644 .qoder/skills/frontend-design/reference/typography.md create mode 100644 .qoder/skills/frontend-design/reference/ux-writing.md create mode 100644 .qoder/skills/harden/SKILL.md create mode 100644 .qoder/skills/normalize/SKILL.md create mode 100644 .qoder/skills/onboard/SKILL.md create mode 100644 .qoder/skills/optimize/SKILL.md create mode 100644 .qoder/skills/overdrive/SKILL.md create mode 100644 .qoder/skills/polish/SKILL.md create mode 100644 .qoder/skills/quieter/SKILL.md create mode 100644 .qoder/skills/teach-impeccable/SKILL.md create mode 100644 .qoder/skills/typeset/SKILL.md diff --git a/.agents/skills/adapt/SKILL.md b/.agents/skills/adapt/SKILL.md index 165c66d..ac5f7cc 100644 --- a/.agents/skills/adapt/SKILL.md +++ b/.agents/skills/adapt/SKILL.md @@ -1,8 +1,13 @@ --- name: adapt -description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility. -user-invocable: true +description: +--- + +--- +name: adapt +description: "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility." argument-hint: "[target] [context (mobile, tablet, print...)]" +user-invocable: true --- Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. @@ -195,4 +200,5 @@ Test thoroughly across contexts: - **Edge cases**: Very small screens (320px), very large screens (4K) - **Slow connections**: Test on throttled network -Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly. \ No newline at end of file +Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly. + diff --git a/.agents/skills/animate/SKILL.md b/.agents/skills/animate/SKILL.md index 3d006d1..0c3007c 100644 --- a/.agents/skills/animate/SKILL.md +++ b/.agents/skills/animate/SKILL.md @@ -1,8 +1,13 @@ --- name: animate -description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive. -user-invocable: true +description: +--- + +--- +name: animate +description: "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive." argument-hint: "[target]" +user-invocable: true --- Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. @@ -171,4 +176,4 @@ Test animations thoroughly: - **Doesn't block**: Users can interact during/after animations - **Adds value**: Makes interface clearer or more delightful -Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right. \ No newline at end of file +Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right. diff --git a/.agents/skills/arrange/SKILL.md b/.agents/skills/arrange/SKILL.md index ce4cf3a..03599b8 100644 --- a/.agents/skills/arrange/SKILL.md +++ b/.agents/skills/arrange/SKILL.md @@ -1,8 +1,13 @@ --- name: arrange -description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition. -user-invocable: true +description: +--- + +--- +name: arrange +description: "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition." argument-hint: "[target]" +user-invocable: true --- Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. @@ -121,4 +126,4 @@ Create a systematic plan: - **Consistency**: Is the spacing system applied uniformly? - **Responsiveness**: Does the layout adapt gracefully across screen sizes? -Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. \ No newline at end of file +Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. diff --git a/.agents/skills/audit/SKILL.md b/.agents/skills/audit/SKILL.md index 1debe04..188ea75 100644 --- a/.agents/skills/audit/SKILL.md +++ b/.agents/skills/audit/SKILL.md @@ -1,8 +1,13 @@ --- name: audit -description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review. -user-invocable: true +description: +--- + +--- +name: audit +description: "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review." argument-hint: "[area (feature, page, component...)]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -108,7 +113,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive) +- **Suggested command**: Which command to use (prefer: ) ### Patterns & Systemic Issues @@ -127,7 +132,7 @@ List recommended commands in priority order (P0 first, then P1, then P2): 1. **[P?] `/command-name`** — Brief description (specific context from audit findings) 2. **[P?] `/command-name`** — Brief description (specific context) -**Rules**: Only recommend commands from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended. +**Rules**: Only recommend commands from: . Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended. After presenting the summary, tell the user: @@ -144,4 +149,4 @@ After presenting the summary, tell the user: - Forget to prioritize (everything can't be P0) - Report false positives without verification -Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement. \ No newline at end of file +Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement. diff --git a/.agents/skills/bolder/SKILL.md b/.agents/skills/bolder/SKILL.md index 0b03f02..3429d1e 100644 --- a/.agents/skills/bolder/SKILL.md +++ b/.agents/skills/bolder/SKILL.md @@ -1,8 +1,13 @@ --- name: bolder -description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character. -user-invocable: true +description: +--- + +--- +name: bolder +description: "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character." argument-hint: "[target]" +user-invocable: true --- Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. @@ -113,4 +118,4 @@ Ensure amplification maintains usability and coherence: **The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." -Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file +Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. diff --git a/.agents/skills/clarify/SKILL.md b/.agents/skills/clarify/SKILL.md index 4db9228..c599b35 100644 --- a/.agents/skills/clarify/SKILL.md +++ b/.agents/skills/clarify/SKILL.md @@ -1,8 +1,13 @@ --- name: clarify -description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing. -user-invocable: true +description: +--- + +--- +name: clarify +description: "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing." argument-hint: "[target]" +user-invocable: true --- Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. @@ -179,4 +184,5 @@ Test that copy improvements work: - **Consistency**: Does it match terminology elsewhere? - **Tone**: Is it appropriate for the situation? -Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. \ No newline at end of file +Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. + diff --git a/.agents/skills/colorize/SKILL.md b/.agents/skills/colorize/SKILL.md index 0b092ac..11f9267 100644 --- a/.agents/skills/colorize/SKILL.md +++ b/.agents/skills/colorize/SKILL.md @@ -1,8 +1,13 @@ --- name: colorize -description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette. -user-invocable: true +description: +--- + +--- +name: colorize +description: "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette." argument-hint: "[target]" +user-invocable: true --- Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. @@ -139,4 +144,4 @@ Test that colorization improves the experience: - **Still accessible**: Do all color combinations meet WCAG standards? - **Not overwhelming**: Is color balanced and purposeful? -Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. \ No newline at end of file +Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. diff --git a/.agents/skills/critique/SKILL.md b/.agents/skills/critique/SKILL.md index 70ac82f..472320d 100644 --- a/.agents/skills/critique/SKILL.md +++ b/.agents/skills/critique/SKILL.md @@ -1,8 +1,13 @@ --- name: critique -description: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component. -user-invocable: true +description: +--- + +--- +name: critique +description: "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component." argument-hint: "[area (feature, page, component...)]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -126,7 +131,7 @@ For each issue, tag with **P0–P3 severity** (consult [heuristics-scoring](refe - **[P?] What**: Name the problem clearly - **Why it matters**: How this hurts users or undermines goals - **Fix**: What to do about it (be concrete) -- **Suggested command**: Which command could address this (from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive) +- **Suggested command**: Which command could address this (from: ) ### Persona Red Flags > *Consult [personas](reference/personas.md)* @@ -185,7 +190,7 @@ List recommended commands in priority order, based on the user's answers: ... **Rules for recommendations**: -- Only recommend commands from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive +- Only recommend commands from: - Order by the user's stated priorities first, then by impact - Each item's description should carry enough context that the command knows what to focus on - Map each Priority Issue to the appropriate command @@ -198,4 +203,4 @@ After presenting the summary, tell the user: > You can ask me to run these one at a time, all at once, or in any order you prefer. > -> Re-run `/critique` after fixes to see your score improve. \ No newline at end of file +> Re-run `/critique` after fixes to see your score improve. diff --git a/.agents/skills/delight/SKILL.md b/.agents/skills/delight/SKILL.md index fe39492..a7cc7b3 100644 --- a/.agents/skills/delight/SKILL.md +++ b/.agents/skills/delight/SKILL.md @@ -1,8 +1,13 @@ --- name: delight -description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable. -user-invocable: true +description: +--- + +--- +name: delight +description: "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable." argument-hint: "[target]" +user-invocable: true --- Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. @@ -300,4 +305,4 @@ Test that delight actually delights: - **Appropriate**: Matches brand and context - **Accessible**: Works with reduced motion, screen readers -Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. \ No newline at end of file +Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. diff --git a/.agents/skills/distill/SKILL.md b/.agents/skills/distill/SKILL.md index fd2a8e4..45c3b81 100644 --- a/.agents/skills/distill/SKILL.md +++ b/.agents/skills/distill/SKILL.md @@ -1,8 +1,13 @@ --- name: distill -description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused. -user-invocable: true +description: +--- + +--- +name: distill +description: "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused." argument-hint: "[target]" +user-invocable: true --- Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. @@ -118,4 +123,4 @@ If you removed features or options: - Consider if they need alternative access points - Note any user feedback to monitor -Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." \ No newline at end of file +Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." diff --git a/.agents/skills/extract/SKILL.md b/.agents/skills/extract/SKILL.md index 4b57ea3..50d972b 100644 --- a/.agents/skills/extract/SKILL.md +++ b/.agents/skills/extract/SKILL.md @@ -1,8 +1,13 @@ --- name: extract -description: Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens. -user-invocable: true +description: +--- + +--- +name: extract +description: "Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens." argument-hint: "[target]" +user-invocable: true --- Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse. @@ -88,4 +93,5 @@ Update design system documentation: - Add examples and guidelines - Update any Storybook or component catalog -Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently. \ No newline at end of file +Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently. + diff --git a/.agents/skills/frontend-design/SKILL.md b/.agents/skills/frontend-design/SKILL.md index dd7c5dd..54c8775 100644 --- a/.agents/skills/frontend-design/SKILL.md +++ b/.agents/skills/frontend-design/SKILL.md @@ -1,6 +1,11 @@ --- name: frontend-design -description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. +description: +--- + +--- +name: frontend-design +description: "Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context." license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. --- @@ -144,4 +149,4 @@ Match implementation complexity to the aesthetic vision. Maximalist designs need Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices across generations. -Remember: the model is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision. \ No newline at end of file +Remember: the model is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision. diff --git a/.agents/skills/harden/SKILL.md b/.agents/skills/harden/SKILL.md index d870ddd..8cb2d59 100644 --- a/.agents/skills/harden/SKILL.md +++ b/.agents/skills/harden/SKILL.md @@ -1,8 +1,13 @@ --- name: harden -description: Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues. -user-invocable: true +description: +--- + +--- +name: harden +description: "Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues." argument-hint: "[target]" +user-invocable: true --- Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. @@ -351,4 +356,5 @@ Test thoroughly with edge cases: - **Errors**: Force API errors, test all error states - **Empty**: Remove all data, test empty states -Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. \ No newline at end of file +Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. + diff --git a/.agents/skills/normalize/SKILL.md b/.agents/skills/normalize/SKILL.md index 4015c54..03ec5c6 100644 --- a/.agents/skills/normalize/SKILL.md +++ b/.agents/skills/normalize/SKILL.md @@ -1,8 +1,13 @@ --- name: normalize -description: Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system. -user-invocable: true +description: +--- + +--- +name: normalize +description: "Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system." argument-hint: "[feature (page, route, component...)]" +user-invocable: true --- Analyze and redesign the feature to perfectly match our design system standards, aesthetics, and established patterns. @@ -67,4 +72,4 @@ After normalization, ensure code quality: - **Verify quality**: Lint, type-check, and test according to repository guidelines. Ensure normalization didn't introduce regressions. - **Ensure DRYness**: Look for duplication introduced during refactoring and consolidate. -Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness. \ No newline at end of file +Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness. diff --git a/.agents/skills/onboard/SKILL.md b/.agents/skills/onboard/SKILL.md index 1466605..c1bbd68 100644 --- a/.agents/skills/onboard/SKILL.md +++ b/.agents/skills/onboard/SKILL.md @@ -1,8 +1,13 @@ --- name: onboard -description: Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows. -user-invocable: true +description: +--- + +--- +name: onboard +description: "Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows." argument-hint: "[target]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -242,4 +247,5 @@ Test with real users: - **Completion rate**: Are users completing? (If low, simplify) - **Time to value**: How long until users get first value? -Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. \ No newline at end of file +Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. + diff --git a/.agents/skills/optimize/SKILL.md b/.agents/skills/optimize/SKILL.md index 5315a8d..757caa4 100644 --- a/.agents/skills/optimize/SKILL.md +++ b/.agents/skills/optimize/SKILL.md @@ -1,8 +1,13 @@ --- name: optimize -description: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience. -user-invocable: true +description: +--- + +--- +name: optimize +description: "Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience." argument-hint: "[target]" +user-invocable: true --- Identify and fix performance issues to create faster, smoother user experiences. @@ -262,4 +267,5 @@ Test that optimizations worked: - **No regressions**: Ensure functionality still works - **User perception**: Does it *feel* faster? -Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. \ No newline at end of file +Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. + diff --git a/.agents/skills/overdrive/SKILL.md b/.agents/skills/overdrive/SKILL.md index fd9199e..dd887ef 100644 --- a/.agents/skills/overdrive/SKILL.md +++ b/.agents/skills/overdrive/SKILL.md @@ -1,8 +1,13 @@ --- name: overdrive -description: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary. -user-invocable: true +description: +--- + +--- +name: overdrive +description: "Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary." argument-hint: "[target]" +user-invocable: true --- Start your response with: @@ -138,4 +143,4 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the - **The accessibility test**: Enable reduced motion. Still beautiful? - **The context test**: Does this make sense for THIS brand and audience? -Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. \ No newline at end of file +Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. diff --git a/.agents/skills/polish/SKILL.md b/.agents/skills/polish/SKILL.md index fcaae6e..0b587b4 100644 --- a/.agents/skills/polish/SKILL.md +++ b/.agents/skills/polish/SKILL.md @@ -1,8 +1,13 @@ --- name: polish -description: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great. -user-invocable: true +description: +--- + +--- +name: polish +description: "Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great." argument-hint: "[target]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -199,4 +204,5 @@ Before marking as done: - **Compare to design**: Match intended design - **Check all states**: Don't just test happy path -Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. \ No newline at end of file +Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. + diff --git a/.agents/skills/quieter/SKILL.md b/.agents/skills/quieter/SKILL.md index 555ca44..d8f31e5 100644 --- a/.agents/skills/quieter/SKILL.md +++ b/.agents/skills/quieter/SKILL.md @@ -1,8 +1,13 @@ --- name: quieter -description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic. -user-invocable: true +description: +--- + +--- +name: quieter +description: "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic." argument-hint: "[target]" +user-invocable: true --- Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. @@ -99,4 +104,4 @@ Ensure refinement maintains quality: - **Better reading**: Is text easier to read for extended periods? - **Sophistication**: Does it feel more refined and premium? -Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. \ No newline at end of file +Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. diff --git a/.agents/skills/teach-impeccable/SKILL.md b/.agents/skills/teach-impeccable/SKILL.md index 423a9a0..4233259 100644 --- a/.agents/skills/teach-impeccable/SKILL.md +++ b/.agents/skills/teach-impeccable/SKILL.md @@ -1,3 +1,8 @@ +--- +name: teach-impeccable +description: +--- + --- name: teach-impeccable description: One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines. @@ -68,4 +73,4 @@ Write this section to `.impeccable.md` in the project root. If the file already Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to .github/copilot-instructions.md. If yes, append or update the section there as well. -Confirm completion and summarize the key design principles that will now guide all future work. \ No newline at end of file +Confirm completion and summarize the key design principles that will now guide all future work. diff --git a/.agents/skills/typeset/SKILL.md b/.agents/skills/typeset/SKILL.md index 139153a..23cc54b 100644 --- a/.agents/skills/typeset/SKILL.md +++ b/.agents/skills/typeset/SKILL.md @@ -1,8 +1,13 @@ --- name: typeset -description: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography. -user-invocable: true +description: +--- + +--- +name: typeset +description: "Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography." argument-hint: "[target]" +user-invocable: true --- Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. @@ -112,4 +117,4 @@ Build a clear type scale: - **Performance**: Are web fonts loading efficiently without layout shift? - **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? -Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. \ No newline at end of file +Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. diff --git a/.claude/skills/adapt/SKILL.md b/.claude/skills/adapt/SKILL.md index 165c66d..ac5f7cc 100644 --- a/.claude/skills/adapt/SKILL.md +++ b/.claude/skills/adapt/SKILL.md @@ -1,8 +1,13 @@ --- name: adapt -description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility. -user-invocable: true +description: +--- + +--- +name: adapt +description: "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility." argument-hint: "[target] [context (mobile, tablet, print...)]" +user-invocable: true --- Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. @@ -195,4 +200,5 @@ Test thoroughly across contexts: - **Edge cases**: Very small screens (320px), very large screens (4K) - **Slow connections**: Test on throttled network -Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly. \ No newline at end of file +Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly. + diff --git a/.claude/skills/animate/SKILL.md b/.claude/skills/animate/SKILL.md index c2aeb2a..59b488f 100644 --- a/.claude/skills/animate/SKILL.md +++ b/.claude/skills/animate/SKILL.md @@ -1,8 +1,13 @@ --- name: animate -description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive. -user-invocable: true +description: +--- + +--- +name: animate +description: "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive." argument-hint: "[target]" +user-invocable: true --- Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. @@ -171,4 +176,4 @@ Test animations thoroughly: - **Doesn't block**: Users can interact during/after animations - **Adds value**: Makes interface clearer or more delightful -Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right. \ No newline at end of file +Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right. diff --git a/.claude/skills/arrange/SKILL.md b/.claude/skills/arrange/SKILL.md index ce4cf3a..03599b8 100644 --- a/.claude/skills/arrange/SKILL.md +++ b/.claude/skills/arrange/SKILL.md @@ -1,8 +1,13 @@ --- name: arrange -description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition. -user-invocable: true +description: +--- + +--- +name: arrange +description: "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition." argument-hint: "[target]" +user-invocable: true --- Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. @@ -121,4 +126,4 @@ Create a systematic plan: - **Consistency**: Is the spacing system applied uniformly? - **Responsiveness**: Does the layout adapt gracefully across screen sizes? -Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. \ No newline at end of file +Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. diff --git a/.claude/skills/audit/SKILL.md b/.claude/skills/audit/SKILL.md index 1debe04..188ea75 100644 --- a/.claude/skills/audit/SKILL.md +++ b/.claude/skills/audit/SKILL.md @@ -1,8 +1,13 @@ --- name: audit -description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review. -user-invocable: true +description: +--- + +--- +name: audit +description: "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review." argument-hint: "[area (feature, page, component...)]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -108,7 +113,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive) +- **Suggested command**: Which command to use (prefer: ) ### Patterns & Systemic Issues @@ -127,7 +132,7 @@ List recommended commands in priority order (P0 first, then P1, then P2): 1. **[P?] `/command-name`** — Brief description (specific context from audit findings) 2. **[P?] `/command-name`** — Brief description (specific context) -**Rules**: Only recommend commands from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended. +**Rules**: Only recommend commands from: . Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended. After presenting the summary, tell the user: @@ -144,4 +149,4 @@ After presenting the summary, tell the user: - Forget to prioritize (everything can't be P0) - Report false positives without verification -Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement. \ No newline at end of file +Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement. diff --git a/.claude/skills/bolder/SKILL.md b/.claude/skills/bolder/SKILL.md index cc5be2f..ad4e415 100644 --- a/.claude/skills/bolder/SKILL.md +++ b/.claude/skills/bolder/SKILL.md @@ -1,8 +1,13 @@ --- name: bolder -description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character. -user-invocable: true +description: +--- + +--- +name: bolder +description: "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character." argument-hint: "[target]" +user-invocable: true --- Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. @@ -113,4 +118,4 @@ Ensure amplification maintains usability and coherence: **The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." -Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file +Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. diff --git a/.claude/skills/clarify/SKILL.md b/.claude/skills/clarify/SKILL.md index 4db9228..c599b35 100644 --- a/.claude/skills/clarify/SKILL.md +++ b/.claude/skills/clarify/SKILL.md @@ -1,8 +1,13 @@ --- name: clarify -description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing. -user-invocable: true +description: +--- + +--- +name: clarify +description: "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing." argument-hint: "[target]" +user-invocable: true --- Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. @@ -179,4 +184,5 @@ Test that copy improvements work: - **Consistency**: Does it match terminology elsewhere? - **Tone**: Is it appropriate for the situation? -Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. \ No newline at end of file +Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. + diff --git a/.claude/skills/colorize/SKILL.md b/.claude/skills/colorize/SKILL.md index 01205dd..f295dae 100644 --- a/.claude/skills/colorize/SKILL.md +++ b/.claude/skills/colorize/SKILL.md @@ -1,8 +1,13 @@ --- name: colorize -description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette. -user-invocable: true +description: +--- + +--- +name: colorize +description: "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette." argument-hint: "[target]" +user-invocable: true --- Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. @@ -139,4 +144,4 @@ Test that colorization improves the experience: - **Still accessible**: Do all color combinations meet WCAG standards? - **Not overwhelming**: Is color balanced and purposeful? -Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. \ No newline at end of file +Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. diff --git a/.claude/skills/critique/SKILL.md b/.claude/skills/critique/SKILL.md index 2c8e073..b759316 100644 --- a/.claude/skills/critique/SKILL.md +++ b/.claude/skills/critique/SKILL.md @@ -1,8 +1,13 @@ --- name: critique -description: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component. -user-invocable: true +description: +--- + +--- +name: critique +description: "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component." argument-hint: "[area (feature, page, component...)]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -126,7 +131,7 @@ For each issue, tag with **P0–P3 severity** (consult [heuristics-scoring](refe - **[P?] What**: Name the problem clearly - **Why it matters**: How this hurts users or undermines goals - **Fix**: What to do about it (be concrete) -- **Suggested command**: Which command could address this (from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive) +- **Suggested command**: Which command could address this (from: ) ### Persona Red Flags > *Consult [personas](reference/personas.md)* @@ -185,7 +190,7 @@ List recommended commands in priority order, based on the user's answers: ... **Rules for recommendations**: -- Only recommend commands from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive +- Only recommend commands from: - Order by the user's stated priorities first, then by impact - Each item's description should carry enough context that the command knows what to focus on - Map each Priority Issue to the appropriate command @@ -198,4 +203,4 @@ After presenting the summary, tell the user: > You can ask me to run these one at a time, all at once, or in any order you prefer. > -> Re-run `/critique` after fixes to see your score improve. \ No newline at end of file +> Re-run `/critique` after fixes to see your score improve. diff --git a/.claude/skills/delight/SKILL.md b/.claude/skills/delight/SKILL.md index ff33d72..69149fa 100644 --- a/.claude/skills/delight/SKILL.md +++ b/.claude/skills/delight/SKILL.md @@ -1,8 +1,13 @@ --- name: delight -description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable. -user-invocable: true +description: +--- + +--- +name: delight +description: "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable." argument-hint: "[target]" +user-invocable: true --- Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. @@ -300,4 +305,4 @@ Test that delight actually delights: - **Appropriate**: Matches brand and context - **Accessible**: Works with reduced motion, screen readers -Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. \ No newline at end of file +Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. diff --git a/.claude/skills/distill/SKILL.md b/.claude/skills/distill/SKILL.md index acd8146..f09377e 100644 --- a/.claude/skills/distill/SKILL.md +++ b/.claude/skills/distill/SKILL.md @@ -1,8 +1,13 @@ --- name: distill -description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused. -user-invocable: true +description: +--- + +--- +name: distill +description: "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused." argument-hint: "[target]" +user-invocable: true --- Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. @@ -118,4 +123,4 @@ If you removed features or options: - Consider if they need alternative access points - Note any user feedback to monitor -Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." \ No newline at end of file +Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." diff --git a/.claude/skills/extract/SKILL.md b/.claude/skills/extract/SKILL.md index 4b57ea3..50d972b 100644 --- a/.claude/skills/extract/SKILL.md +++ b/.claude/skills/extract/SKILL.md @@ -1,8 +1,13 @@ --- name: extract -description: Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens. -user-invocable: true +description: +--- + +--- +name: extract +description: "Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens." argument-hint: "[target]" +user-invocable: true --- Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse. @@ -88,4 +93,5 @@ Update design system documentation: - Add examples and guidelines - Update any Storybook or component catalog -Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently. \ No newline at end of file +Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently. + diff --git a/.claude/skills/frontend-design/SKILL.md b/.claude/skills/frontend-design/SKILL.md index f7ad804..fbdcd51 100644 --- a/.claude/skills/frontend-design/SKILL.md +++ b/.claude/skills/frontend-design/SKILL.md @@ -1,6 +1,11 @@ --- name: frontend-design -description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. +description: +--- + +--- +name: frontend-design +description: "Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context." license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. --- @@ -144,4 +149,4 @@ Match implementation complexity to the aesthetic vision. Maximalist designs need Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices across generations. -Remember: Claude is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision. \ No newline at end of file +Remember: Claude is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision. diff --git a/.claude/skills/harden/SKILL.md b/.claude/skills/harden/SKILL.md index d870ddd..8cb2d59 100644 --- a/.claude/skills/harden/SKILL.md +++ b/.claude/skills/harden/SKILL.md @@ -1,8 +1,13 @@ --- name: harden -description: Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues. -user-invocable: true +description: +--- + +--- +name: harden +description: "Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues." argument-hint: "[target]" +user-invocable: true --- Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. @@ -351,4 +356,5 @@ Test thoroughly with edge cases: - **Errors**: Force API errors, test all error states - **Empty**: Remove all data, test empty states -Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. \ No newline at end of file +Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. + diff --git a/.claude/skills/normalize/SKILL.md b/.claude/skills/normalize/SKILL.md index 4015c54..03ec5c6 100644 --- a/.claude/skills/normalize/SKILL.md +++ b/.claude/skills/normalize/SKILL.md @@ -1,8 +1,13 @@ --- name: normalize -description: Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system. -user-invocable: true +description: +--- + +--- +name: normalize +description: "Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system." argument-hint: "[feature (page, route, component...)]" +user-invocable: true --- Analyze and redesign the feature to perfectly match our design system standards, aesthetics, and established patterns. @@ -67,4 +72,4 @@ After normalization, ensure code quality: - **Verify quality**: Lint, type-check, and test according to repository guidelines. Ensure normalization didn't introduce regressions. - **Ensure DRYness**: Look for duplication introduced during refactoring and consolidate. -Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness. \ No newline at end of file +Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness. diff --git a/.claude/skills/onboard/SKILL.md b/.claude/skills/onboard/SKILL.md index 1466605..c1bbd68 100644 --- a/.claude/skills/onboard/SKILL.md +++ b/.claude/skills/onboard/SKILL.md @@ -1,8 +1,13 @@ --- name: onboard -description: Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows. -user-invocable: true +description: +--- + +--- +name: onboard +description: "Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows." argument-hint: "[target]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -242,4 +247,5 @@ Test with real users: - **Completion rate**: Are users completing? (If low, simplify) - **Time to value**: How long until users get first value? -Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. \ No newline at end of file +Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. + diff --git a/.claude/skills/optimize/SKILL.md b/.claude/skills/optimize/SKILL.md index 5315a8d..757caa4 100644 --- a/.claude/skills/optimize/SKILL.md +++ b/.claude/skills/optimize/SKILL.md @@ -1,8 +1,13 @@ --- name: optimize -description: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience. -user-invocable: true +description: +--- + +--- +name: optimize +description: "Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience." argument-hint: "[target]" +user-invocable: true --- Identify and fix performance issues to create faster, smoother user experiences. @@ -262,4 +267,5 @@ Test that optimizations worked: - **No regressions**: Ensure functionality still works - **User perception**: Does it *feel* faster? -Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. \ No newline at end of file +Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. + diff --git a/.claude/skills/overdrive/SKILL.md b/.claude/skills/overdrive/SKILL.md index e0a5d9c..1d6afc3 100644 --- a/.claude/skills/overdrive/SKILL.md +++ b/.claude/skills/overdrive/SKILL.md @@ -1,8 +1,13 @@ --- name: overdrive -description: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary. -user-invocable: true +description: +--- + +--- +name: overdrive +description: "Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary." argument-hint: "[target]" +user-invocable: true --- Start your response with: @@ -138,4 +143,4 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the - **The accessibility test**: Enable reduced motion. Still beautiful? - **The context test**: Does this make sense for THIS brand and audience? -Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. \ No newline at end of file +Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. diff --git a/.claude/skills/polish/SKILL.md b/.claude/skills/polish/SKILL.md index fcaae6e..0b587b4 100644 --- a/.claude/skills/polish/SKILL.md +++ b/.claude/skills/polish/SKILL.md @@ -1,8 +1,13 @@ --- name: polish -description: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great. -user-invocable: true +description: +--- + +--- +name: polish +description: "Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great." argument-hint: "[target]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -199,4 +204,5 @@ Before marking as done: - **Compare to design**: Match intended design - **Check all states**: Don't just test happy path -Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. \ No newline at end of file +Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. + diff --git a/.claude/skills/quieter/SKILL.md b/.claude/skills/quieter/SKILL.md index 9090eac..db80041 100644 --- a/.claude/skills/quieter/SKILL.md +++ b/.claude/skills/quieter/SKILL.md @@ -1,8 +1,13 @@ --- name: quieter -description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic. -user-invocable: true +description: +--- + +--- +name: quieter +description: "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic." argument-hint: "[target]" +user-invocable: true --- Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. @@ -99,4 +104,4 @@ Ensure refinement maintains quality: - **Better reading**: Is text easier to read for extended periods? - **Sophistication**: Does it feel more refined and premium? -Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. \ No newline at end of file +Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. diff --git a/.claude/skills/teach-impeccable/SKILL.md b/.claude/skills/teach-impeccable/SKILL.md index 96f31fe..613ed4d 100644 --- a/.claude/skills/teach-impeccable/SKILL.md +++ b/.claude/skills/teach-impeccable/SKILL.md @@ -1,3 +1,8 @@ +--- +name: teach-impeccable +description: +--- + --- name: teach-impeccable description: One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines. @@ -68,4 +73,4 @@ Write this section to `.impeccable.md` in the project root. If the file already Then STOP and call the AskUserQuestion tool to clarify. whether they'd also like the Design Context appended to CLAUDE.md. If yes, append or update the section there as well. -Confirm completion and summarize the key design principles that will now guide all future work. \ No newline at end of file +Confirm completion and summarize the key design principles that will now guide all future work. diff --git a/.claude/skills/typeset/SKILL.md b/.claude/skills/typeset/SKILL.md index 139153a..23cc54b 100644 --- a/.claude/skills/typeset/SKILL.md +++ b/.claude/skills/typeset/SKILL.md @@ -1,8 +1,13 @@ --- name: typeset -description: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography. -user-invocable: true +description: +--- + +--- +name: typeset +description: "Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography." argument-hint: "[target]" +user-invocable: true --- Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. @@ -112,4 +117,4 @@ Build a clear type scale: - **Performance**: Are web fonts loading efficiently without layout shift? - **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? -Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. \ No newline at end of file +Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. diff --git a/.codex/skills/adapt/SKILL.md b/.codex/skills/adapt/SKILL.md index 12c1576..c29baa2 100644 --- a/.codex/skills/adapt/SKILL.md +++ b/.codex/skills/adapt/SKILL.md @@ -1,7 +1,13 @@ --- name: adapt -description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility. +description: +--- + +--- +name: adapt +description: "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility." argument-hint: "[target] [context (mobile, tablet, print...)]" +user-invocable: true --- Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. @@ -194,4 +200,5 @@ Test thoroughly across contexts: - **Edge cases**: Very small screens (320px), very large screens (4K) - **Slow connections**: Test on throttled network -Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly. \ No newline at end of file +Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly. + diff --git a/.codex/skills/animate/SKILL.md b/.codex/skills/animate/SKILL.md index 5055541..07bc782 100644 --- a/.codex/skills/animate/SKILL.md +++ b/.codex/skills/animate/SKILL.md @@ -1,7 +1,13 @@ --- name: animate -description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive. +description: +--- + +--- +name: animate +description: "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive." argument-hint: "[target]" +user-invocable: true --- Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. @@ -170,4 +176,4 @@ Test animations thoroughly: - **Doesn't block**: Users can interact during/after animations - **Adds value**: Makes interface clearer or more delightful -Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right. \ No newline at end of file +Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right. diff --git a/.codex/skills/arrange/SKILL.md b/.codex/skills/arrange/SKILL.md index a9f2f3a..0e3ead9 100644 --- a/.codex/skills/arrange/SKILL.md +++ b/.codex/skills/arrange/SKILL.md @@ -1,7 +1,13 @@ --- name: arrange -description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition. +description: +--- + +--- +name: arrange +description: "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition." argument-hint: "[target]" +user-invocable: true --- Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. @@ -120,4 +126,4 @@ Create a systematic plan: - **Consistency**: Is the spacing system applied uniformly? - **Responsiveness**: Does the layout adapt gracefully across screen sizes? -Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. \ No newline at end of file +Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. diff --git a/.codex/skills/audit/SKILL.md b/.codex/skills/audit/SKILL.md index def1967..61eb343 100644 --- a/.codex/skills/audit/SKILL.md +++ b/.codex/skills/audit/SKILL.md @@ -1,7 +1,13 @@ --- name: audit -description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review. +description: +--- + +--- +name: audit +description: "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review." argument-hint: "[area (feature, page, component...)]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -107,7 +113,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: $animate, $quieter, $optimize, $adapt, $clarify, $distill, $delight, $onboard, $normalize, $audit, $harden, $polish, $extract, $bolder, $arrange, $typeset, $critique, $colorize, $overdrive) +- **Suggested command**: Which command to use (prefer: ) ### Patterns & Systemic Issues @@ -126,7 +132,7 @@ List recommended commands in priority order (P0 first, then P1, then P2): 1. **[P?] `$command-name`** — Brief description (specific context from audit findings) 2. **[P?] `$command-name`** — Brief description (specific context) -**Rules**: Only recommend commands from: $animate, $quieter, $optimize, $adapt, $clarify, $distill, $delight, $onboard, $normalize, $audit, $harden, $polish, $extract, $bolder, $arrange, $typeset, $critique, $colorize, $overdrive. Map findings to the most appropriate command. End with `$polish` as the final step if any fixes were recommended. +**Rules**: Only recommend commands from: . Map findings to the most appropriate command. End with `$polish` as the final step if any fixes were recommended. After presenting the summary, tell the user: @@ -143,4 +149,4 @@ After presenting the summary, tell the user: - Forget to prioritize (everything can't be P0) - Report false positives without verification -Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement. \ No newline at end of file +Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement. diff --git a/.codex/skills/bolder/SKILL.md b/.codex/skills/bolder/SKILL.md index 9fccbf5..4236e87 100644 --- a/.codex/skills/bolder/SKILL.md +++ b/.codex/skills/bolder/SKILL.md @@ -1,7 +1,13 @@ --- name: bolder -description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character. +description: +--- + +--- +name: bolder +description: "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character." argument-hint: "[target]" +user-invocable: true --- Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. @@ -112,4 +118,4 @@ Ensure amplification maintains usability and coherence: **The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." -Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file +Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. diff --git a/.codex/skills/clarify/SKILL.md b/.codex/skills/clarify/SKILL.md index 145c72a..869ca5a 100644 --- a/.codex/skills/clarify/SKILL.md +++ b/.codex/skills/clarify/SKILL.md @@ -1,7 +1,13 @@ --- name: clarify -description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing. +description: +--- + +--- +name: clarify +description: "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing." argument-hint: "[target]" +user-invocable: true --- Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. @@ -178,4 +184,5 @@ Test that copy improvements work: - **Consistency**: Does it match terminology elsewhere? - **Tone**: Is it appropriate for the situation? -Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. \ No newline at end of file +Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. + diff --git a/.codex/skills/colorize/SKILL.md b/.codex/skills/colorize/SKILL.md index 9c76379..18717ae 100644 --- a/.codex/skills/colorize/SKILL.md +++ b/.codex/skills/colorize/SKILL.md @@ -1,7 +1,13 @@ --- name: colorize -description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette. +description: +--- + +--- +name: colorize +description: "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette." argument-hint: "[target]" +user-invocable: true --- Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. @@ -138,4 +144,4 @@ Test that colorization improves the experience: - **Still accessible**: Do all color combinations meet WCAG standards? - **Not overwhelming**: Is color balanced and purposeful? -Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. \ No newline at end of file +Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. diff --git a/.codex/skills/critique/SKILL.md b/.codex/skills/critique/SKILL.md index 5cb4af1..f68e075 100644 --- a/.codex/skills/critique/SKILL.md +++ b/.codex/skills/critique/SKILL.md @@ -1,7 +1,13 @@ --- name: critique -description: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component. +description: +--- + +--- +name: critique +description: "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component." argument-hint: "[area (feature, page, component...)]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -125,7 +131,7 @@ For each issue, tag with **P0–P3 severity** (consult [heuristics-scoring](refe - **[P?] What**: Name the problem clearly - **Why it matters**: How this hurts users or undermines goals - **Fix**: What to do about it (be concrete) -- **Suggested command**: Which command could address this (from: $animate, $quieter, $optimize, $adapt, $clarify, $distill, $delight, $onboard, $normalize, $audit, $harden, $polish, $extract, $bolder, $arrange, $typeset, $critique, $colorize, $overdrive) +- **Suggested command**: Which command could address this (from: ) ### Persona Red Flags > *Consult [personas](reference/personas.md)* @@ -184,7 +190,7 @@ List recommended commands in priority order, based on the user's answers: ... **Rules for recommendations**: -- Only recommend commands from: $animate, $quieter, $optimize, $adapt, $clarify, $distill, $delight, $onboard, $normalize, $audit, $harden, $polish, $extract, $bolder, $arrange, $typeset, $critique, $colorize, $overdrive +- Only recommend commands from: - Order by the user's stated priorities first, then by impact - Each item's description should carry enough context that the command knows what to focus on - Map each Priority Issue to the appropriate command @@ -197,4 +203,4 @@ After presenting the summary, tell the user: > You can ask me to run these one at a time, all at once, or in any order you prefer. > -> Re-run `$critique` after fixes to see your score improve. \ No newline at end of file +> Re-run `$critique` after fixes to see your score improve. diff --git a/.codex/skills/delight/SKILL.md b/.codex/skills/delight/SKILL.md index 9a3b443..143ce95 100644 --- a/.codex/skills/delight/SKILL.md +++ b/.codex/skills/delight/SKILL.md @@ -1,7 +1,13 @@ --- name: delight -description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable. +description: +--- + +--- +name: delight +description: "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable." argument-hint: "[target]" +user-invocable: true --- Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. @@ -299,4 +305,4 @@ Test that delight actually delights: - **Appropriate**: Matches brand and context - **Accessible**: Works with reduced motion, screen readers -Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. \ No newline at end of file +Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. diff --git a/.codex/skills/distill/SKILL.md b/.codex/skills/distill/SKILL.md index 6ece451..8475827 100644 --- a/.codex/skills/distill/SKILL.md +++ b/.codex/skills/distill/SKILL.md @@ -1,7 +1,13 @@ --- name: distill -description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused. +description: +--- + +--- +name: distill +description: "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused." argument-hint: "[target]" +user-invocable: true --- Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. @@ -117,4 +123,4 @@ If you removed features or options: - Consider if they need alternative access points - Note any user feedback to monitor -Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." \ No newline at end of file +Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." diff --git a/.codex/skills/extract/SKILL.md b/.codex/skills/extract/SKILL.md index 77b9d0d..50d972b 100644 --- a/.codex/skills/extract/SKILL.md +++ b/.codex/skills/extract/SKILL.md @@ -1,7 +1,13 @@ --- name: extract -description: Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens. +description: +--- + +--- +name: extract +description: "Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens." argument-hint: "[target]" +user-invocable: true --- Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse. @@ -87,4 +93,5 @@ Update design system documentation: - Add examples and guidelines - Update any Storybook or component catalog -Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently. \ No newline at end of file +Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently. + diff --git a/.codex/skills/frontend-design/SKILL.md b/.codex/skills/frontend-design/SKILL.md index a776c78..5f638c4 100644 --- a/.codex/skills/frontend-design/SKILL.md +++ b/.codex/skills/frontend-design/SKILL.md @@ -1,6 +1,11 @@ --- name: frontend-design -description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. +description: +--- + +--- +name: frontend-design +description: "Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context." license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. --- @@ -144,4 +149,4 @@ Match implementation complexity to the aesthetic vision. Maximalist designs need Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices across generations. -Remember: GPT is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision. \ No newline at end of file +Remember: GPT is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision. diff --git a/.codex/skills/harden/SKILL.md b/.codex/skills/harden/SKILL.md index 8919f5e..8cb2d59 100644 --- a/.codex/skills/harden/SKILL.md +++ b/.codex/skills/harden/SKILL.md @@ -1,7 +1,13 @@ --- name: harden -description: Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues. +description: +--- + +--- +name: harden +description: "Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues." argument-hint: "[target]" +user-invocable: true --- Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. @@ -350,4 +356,5 @@ Test thoroughly with edge cases: - **Errors**: Force API errors, test all error states - **Empty**: Remove all data, test empty states -Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. \ No newline at end of file +Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. + diff --git a/.codex/skills/normalize/SKILL.md b/.codex/skills/normalize/SKILL.md index 3cb987a..b98daa5 100644 --- a/.codex/skills/normalize/SKILL.md +++ b/.codex/skills/normalize/SKILL.md @@ -1,7 +1,13 @@ --- name: normalize -description: Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system. +description: +--- + +--- +name: normalize +description: "Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system." argument-hint: "[feature (page, route, component...)]" +user-invocable: true --- Analyze and redesign the feature to perfectly match our design system standards, aesthetics, and established patterns. @@ -66,4 +72,4 @@ After normalization, ensure code quality: - **Verify quality**: Lint, type-check, and test according to repository guidelines. Ensure normalization didn't introduce regressions. - **Ensure DRYness**: Look for duplication introduced during refactoring and consolidate. -Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness. \ No newline at end of file +Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness. diff --git a/.codex/skills/onboard/SKILL.md b/.codex/skills/onboard/SKILL.md index 35d4968..88a8f97 100644 --- a/.codex/skills/onboard/SKILL.md +++ b/.codex/skills/onboard/SKILL.md @@ -1,7 +1,13 @@ --- name: onboard -description: Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows. +description: +--- + +--- +name: onboard +description: "Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows." argument-hint: "[target]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -241,4 +247,5 @@ Test with real users: - **Completion rate**: Are users completing? (If low, simplify) - **Time to value**: How long until users get first value? -Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. \ No newline at end of file +Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. + diff --git a/.codex/skills/optimize/SKILL.md b/.codex/skills/optimize/SKILL.md index 9691680..757caa4 100644 --- a/.codex/skills/optimize/SKILL.md +++ b/.codex/skills/optimize/SKILL.md @@ -1,7 +1,13 @@ --- name: optimize -description: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience. +description: +--- + +--- +name: optimize +description: "Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience." argument-hint: "[target]" +user-invocable: true --- Identify and fix performance issues to create faster, smoother user experiences. @@ -261,4 +267,5 @@ Test that optimizations worked: - **No regressions**: Ensure functionality still works - **User perception**: Does it *feel* faster? -Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. \ No newline at end of file +Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. + diff --git a/.codex/skills/overdrive/SKILL.md b/.codex/skills/overdrive/SKILL.md index df38a08..26217e8 100644 --- a/.codex/skills/overdrive/SKILL.md +++ b/.codex/skills/overdrive/SKILL.md @@ -1,7 +1,13 @@ --- name: overdrive -description: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary. +description: +--- + +--- +name: overdrive +description: "Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary." argument-hint: "[target]" +user-invocable: true --- Start your response with: @@ -137,4 +143,4 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the - **The accessibility test**: Enable reduced motion. Still beautiful? - **The context test**: Does this make sense for THIS brand and audience? -Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. \ No newline at end of file +Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. diff --git a/.codex/skills/polish/SKILL.md b/.codex/skills/polish/SKILL.md index 5010db3..2d0112e 100644 --- a/.codex/skills/polish/SKILL.md +++ b/.codex/skills/polish/SKILL.md @@ -1,7 +1,13 @@ --- name: polish -description: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great. +description: +--- + +--- +name: polish +description: "Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great." argument-hint: "[target]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -198,4 +204,5 @@ Before marking as done: - **Compare to design**: Match intended design - **Check all states**: Don't just test happy path -Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. \ No newline at end of file +Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. + diff --git a/.codex/skills/quieter/SKILL.md b/.codex/skills/quieter/SKILL.md index 5390054..6244075 100644 --- a/.codex/skills/quieter/SKILL.md +++ b/.codex/skills/quieter/SKILL.md @@ -1,7 +1,13 @@ --- name: quieter -description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic. +description: +--- + +--- +name: quieter +description: "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic." argument-hint: "[target]" +user-invocable: true --- Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. @@ -98,4 +104,4 @@ Ensure refinement maintains quality: - **Better reading**: Is text easier to read for extended periods? - **Sophistication**: Does it feel more refined and premium? -Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. \ No newline at end of file +Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. diff --git a/.codex/skills/teach-impeccable/SKILL.md b/.codex/skills/teach-impeccable/SKILL.md index 5267bf5..2c18f1d 100644 --- a/.codex/skills/teach-impeccable/SKILL.md +++ b/.codex/skills/teach-impeccable/SKILL.md @@ -1,6 +1,12 @@ +--- +name: teach-impeccable +description: +--- + --- name: teach-impeccable description: One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines. +user-invocable: true --- Gather design context for this project, then persist it for all future sessions. @@ -67,4 +73,4 @@ Write this section to `.impeccable.md` in the project root. If the file already Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to AGENTS.md. If yes, append or update the section there as well. -Confirm completion and summarize the key design principles that will now guide all future work. \ No newline at end of file +Confirm completion and summarize the key design principles that will now guide all future work. diff --git a/.codex/skills/typeset/SKILL.md b/.codex/skills/typeset/SKILL.md index 2391781..170ca8f 100644 --- a/.codex/skills/typeset/SKILL.md +++ b/.codex/skills/typeset/SKILL.md @@ -1,7 +1,13 @@ --- name: typeset -description: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography. +description: +--- + +--- +name: typeset +description: "Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography." argument-hint: "[target]" +user-invocable: true --- Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. @@ -111,4 +117,4 @@ Build a clear type scale: - **Performance**: Are web fonts loading efficiently without layout shift? - **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? -Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. \ No newline at end of file +Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. diff --git a/.cursor/skills/adapt/SKILL.md b/.cursor/skills/adapt/SKILL.md index 2b30e16..ac5f7cc 100644 --- a/.cursor/skills/adapt/SKILL.md +++ b/.cursor/skills/adapt/SKILL.md @@ -1,6 +1,13 @@ --- name: adapt -description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility. +description: +--- + +--- +name: adapt +description: "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility." +argument-hint: "[target] [context (mobile, tablet, print...)]" +user-invocable: true --- Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. @@ -193,4 +200,5 @@ Test thoroughly across contexts: - **Edge cases**: Very small screens (320px), very large screens (4K) - **Slow connections**: Test on throttled network -Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly. \ No newline at end of file +Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly. + diff --git a/.cursor/skills/animate/SKILL.md b/.cursor/skills/animate/SKILL.md index f22c210..0c3007c 100644 --- a/.cursor/skills/animate/SKILL.md +++ b/.cursor/skills/animate/SKILL.md @@ -1,6 +1,13 @@ --- name: animate -description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive. +description: +--- + +--- +name: animate +description: "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive." +argument-hint: "[target]" +user-invocable: true --- Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. @@ -169,4 +176,4 @@ Test animations thoroughly: - **Doesn't block**: Users can interact during/after animations - **Adds value**: Makes interface clearer or more delightful -Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right. \ No newline at end of file +Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right. diff --git a/.cursor/skills/arrange/SKILL.md b/.cursor/skills/arrange/SKILL.md index 1d3a6be..03599b8 100644 --- a/.cursor/skills/arrange/SKILL.md +++ b/.cursor/skills/arrange/SKILL.md @@ -1,6 +1,13 @@ --- name: arrange -description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition. +description: +--- + +--- +name: arrange +description: "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition." +argument-hint: "[target]" +user-invocable: true --- Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. @@ -119,4 +126,4 @@ Create a systematic plan: - **Consistency**: Is the spacing system applied uniformly? - **Responsiveness**: Does the layout adapt gracefully across screen sizes? -Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. \ No newline at end of file +Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. diff --git a/.cursor/skills/audit/SKILL.md b/.cursor/skills/audit/SKILL.md index 6dc747d..188ea75 100644 --- a/.cursor/skills/audit/SKILL.md +++ b/.cursor/skills/audit/SKILL.md @@ -1,6 +1,13 @@ --- name: audit -description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review. +description: +--- + +--- +name: audit +description: "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review." +argument-hint: "[area (feature, page, component...)]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -106,7 +113,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive) +- **Suggested command**: Which command to use (prefer: ) ### Patterns & Systemic Issues @@ -125,7 +132,7 @@ List recommended commands in priority order (P0 first, then P1, then P2): 1. **[P?] `/command-name`** — Brief description (specific context from audit findings) 2. **[P?] `/command-name`** — Brief description (specific context) -**Rules**: Only recommend commands from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended. +**Rules**: Only recommend commands from: . Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended. After presenting the summary, tell the user: @@ -142,4 +149,4 @@ After presenting the summary, tell the user: - Forget to prioritize (everything can't be P0) - Report false positives without verification -Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement. \ No newline at end of file +Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement. diff --git a/.cursor/skills/bolder/SKILL.md b/.cursor/skills/bolder/SKILL.md index a43c800..3429d1e 100644 --- a/.cursor/skills/bolder/SKILL.md +++ b/.cursor/skills/bolder/SKILL.md @@ -1,6 +1,13 @@ --- name: bolder -description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character. +description: +--- + +--- +name: bolder +description: "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character." +argument-hint: "[target]" +user-invocable: true --- Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. @@ -111,4 +118,4 @@ Ensure amplification maintains usability and coherence: **The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." -Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file +Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. diff --git a/.cursor/skills/clarify/SKILL.md b/.cursor/skills/clarify/SKILL.md index 462a515..c599b35 100644 --- a/.cursor/skills/clarify/SKILL.md +++ b/.cursor/skills/clarify/SKILL.md @@ -1,6 +1,13 @@ --- name: clarify -description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing. +description: +--- + +--- +name: clarify +description: "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing." +argument-hint: "[target]" +user-invocable: true --- Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. @@ -177,4 +184,5 @@ Test that copy improvements work: - **Consistency**: Does it match terminology elsewhere? - **Tone**: Is it appropriate for the situation? -Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. \ No newline at end of file +Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. + diff --git a/.cursor/skills/colorize/SKILL.md b/.cursor/skills/colorize/SKILL.md index 39cabda..11f9267 100644 --- a/.cursor/skills/colorize/SKILL.md +++ b/.cursor/skills/colorize/SKILL.md @@ -1,6 +1,13 @@ --- name: colorize -description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette. +description: +--- + +--- +name: colorize +description: "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette." +argument-hint: "[target]" +user-invocable: true --- Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. @@ -137,4 +144,4 @@ Test that colorization improves the experience: - **Still accessible**: Do all color combinations meet WCAG standards? - **Not overwhelming**: Is color balanced and purposeful? -Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. \ No newline at end of file +Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. diff --git a/.cursor/skills/critique/SKILL.md b/.cursor/skills/critique/SKILL.md index 3d2746f..e7c25e8 100644 --- a/.cursor/skills/critique/SKILL.md +++ b/.cursor/skills/critique/SKILL.md @@ -1,6 +1,13 @@ --- name: critique -description: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component. +description: +--- + +--- +name: critique +description: "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component." +argument-hint: "[area (feature, page, component...)]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -124,7 +131,7 @@ For each issue, tag with **P0–P3 severity** (consult [heuristics-scoring](refe - **[P?] What**: Name the problem clearly - **Why it matters**: How this hurts users or undermines goals - **Fix**: What to do about it (be concrete) -- **Suggested command**: Which command could address this (from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive) +- **Suggested command**: Which command could address this (from: ) ### Persona Red Flags > *Consult [personas](reference/personas.md)* @@ -183,7 +190,7 @@ List recommended commands in priority order, based on the user's answers: ... **Rules for recommendations**: -- Only recommend commands from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive +- Only recommend commands from: - Order by the user's stated priorities first, then by impact - Each item's description should carry enough context that the command knows what to focus on - Map each Priority Issue to the appropriate command @@ -196,4 +203,4 @@ After presenting the summary, tell the user: > You can ask me to run these one at a time, all at once, or in any order you prefer. > -> Re-run `/critique` after fixes to see your score improve. \ No newline at end of file +> Re-run `/critique` after fixes to see your score improve. diff --git a/.cursor/skills/delight/SKILL.md b/.cursor/skills/delight/SKILL.md index d3d76c3..a7cc7b3 100644 --- a/.cursor/skills/delight/SKILL.md +++ b/.cursor/skills/delight/SKILL.md @@ -1,6 +1,13 @@ --- name: delight -description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable. +description: +--- + +--- +name: delight +description: "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable." +argument-hint: "[target]" +user-invocable: true --- Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. @@ -298,4 +305,4 @@ Test that delight actually delights: - **Appropriate**: Matches brand and context - **Accessible**: Works with reduced motion, screen readers -Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. \ No newline at end of file +Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. diff --git a/.cursor/skills/distill/SKILL.md b/.cursor/skills/distill/SKILL.md index 05b49d3..45c3b81 100644 --- a/.cursor/skills/distill/SKILL.md +++ b/.cursor/skills/distill/SKILL.md @@ -1,6 +1,13 @@ --- name: distill -description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused. +description: +--- + +--- +name: distill +description: "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused." +argument-hint: "[target]" +user-invocable: true --- Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. @@ -116,4 +123,4 @@ If you removed features or options: - Consider if they need alternative access points - Note any user feedback to monitor -Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." \ No newline at end of file +Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." diff --git a/.cursor/skills/extract/SKILL.md b/.cursor/skills/extract/SKILL.md index 83d9524..50d972b 100644 --- a/.cursor/skills/extract/SKILL.md +++ b/.cursor/skills/extract/SKILL.md @@ -1,6 +1,13 @@ --- name: extract -description: Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens. +description: +--- + +--- +name: extract +description: "Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens." +argument-hint: "[target]" +user-invocable: true --- Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse. @@ -86,4 +93,5 @@ Update design system documentation: - Add examples and guidelines - Update any Storybook or component catalog -Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently. \ No newline at end of file +Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently. + diff --git a/.cursor/skills/frontend-design/SKILL.md b/.cursor/skills/frontend-design/SKILL.md index dd7c5dd..54c8775 100644 --- a/.cursor/skills/frontend-design/SKILL.md +++ b/.cursor/skills/frontend-design/SKILL.md @@ -1,6 +1,11 @@ --- name: frontend-design -description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. +description: +--- + +--- +name: frontend-design +description: "Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context." license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. --- @@ -144,4 +149,4 @@ Match implementation complexity to the aesthetic vision. Maximalist designs need Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices across generations. -Remember: the model is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision. \ No newline at end of file +Remember: the model is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision. diff --git a/.cursor/skills/harden/SKILL.md b/.cursor/skills/harden/SKILL.md index bb2cc7f..8cb2d59 100644 --- a/.cursor/skills/harden/SKILL.md +++ b/.cursor/skills/harden/SKILL.md @@ -1,6 +1,13 @@ --- name: harden -description: Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues. +description: +--- + +--- +name: harden +description: "Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues." +argument-hint: "[target]" +user-invocable: true --- Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. @@ -349,4 +356,5 @@ Test thoroughly with edge cases: - **Errors**: Force API errors, test all error states - **Empty**: Remove all data, test empty states -Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. \ No newline at end of file +Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. + diff --git a/.cursor/skills/normalize/SKILL.md b/.cursor/skills/normalize/SKILL.md index 260a96f..03ec5c6 100644 --- a/.cursor/skills/normalize/SKILL.md +++ b/.cursor/skills/normalize/SKILL.md @@ -1,6 +1,13 @@ --- name: normalize -description: Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system. +description: +--- + +--- +name: normalize +description: "Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system." +argument-hint: "[feature (page, route, component...)]" +user-invocable: true --- Analyze and redesign the feature to perfectly match our design system standards, aesthetics, and established patterns. @@ -65,4 +72,4 @@ After normalization, ensure code quality: - **Verify quality**: Lint, type-check, and test according to repository guidelines. Ensure normalization didn't introduce regressions. - **Ensure DRYness**: Look for duplication introduced during refactoring and consolidate. -Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness. \ No newline at end of file +Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness. diff --git a/.cursor/skills/onboard/SKILL.md b/.cursor/skills/onboard/SKILL.md index 2e9f777..c1bbd68 100644 --- a/.cursor/skills/onboard/SKILL.md +++ b/.cursor/skills/onboard/SKILL.md @@ -1,6 +1,13 @@ --- name: onboard -description: Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows. +description: +--- + +--- +name: onboard +description: "Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows." +argument-hint: "[target]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -240,4 +247,5 @@ Test with real users: - **Completion rate**: Are users completing? (If low, simplify) - **Time to value**: How long until users get first value? -Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. \ No newline at end of file +Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. + diff --git a/.cursor/skills/optimize/SKILL.md b/.cursor/skills/optimize/SKILL.md index 837bb13..757caa4 100644 --- a/.cursor/skills/optimize/SKILL.md +++ b/.cursor/skills/optimize/SKILL.md @@ -1,6 +1,13 @@ --- name: optimize -description: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience. +description: +--- + +--- +name: optimize +description: "Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience." +argument-hint: "[target]" +user-invocable: true --- Identify and fix performance issues to create faster, smoother user experiences. @@ -260,4 +267,5 @@ Test that optimizations worked: - **No regressions**: Ensure functionality still works - **User perception**: Does it *feel* faster? -Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. \ No newline at end of file +Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. + diff --git a/.cursor/skills/overdrive/SKILL.md b/.cursor/skills/overdrive/SKILL.md index f890cea..dd887ef 100644 --- a/.cursor/skills/overdrive/SKILL.md +++ b/.cursor/skills/overdrive/SKILL.md @@ -1,6 +1,13 @@ --- name: overdrive -description: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary. +description: +--- + +--- +name: overdrive +description: "Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary." +argument-hint: "[target]" +user-invocable: true --- Start your response with: @@ -136,4 +143,4 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the - **The accessibility test**: Enable reduced motion. Still beautiful? - **The context test**: Does this make sense for THIS brand and audience? -Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. \ No newline at end of file +Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. diff --git a/.cursor/skills/polish/SKILL.md b/.cursor/skills/polish/SKILL.md index fe7c632..0b587b4 100644 --- a/.cursor/skills/polish/SKILL.md +++ b/.cursor/skills/polish/SKILL.md @@ -1,6 +1,13 @@ --- name: polish -description: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great. +description: +--- + +--- +name: polish +description: "Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great." +argument-hint: "[target]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -197,4 +204,5 @@ Before marking as done: - **Compare to design**: Match intended design - **Check all states**: Don't just test happy path -Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. \ No newline at end of file +Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. + diff --git a/.cursor/skills/quieter/SKILL.md b/.cursor/skills/quieter/SKILL.md index 22375f0..d8f31e5 100644 --- a/.cursor/skills/quieter/SKILL.md +++ b/.cursor/skills/quieter/SKILL.md @@ -1,6 +1,13 @@ --- name: quieter -description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic. +description: +--- + +--- +name: quieter +description: "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic." +argument-hint: "[target]" +user-invocable: true --- Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. @@ -97,4 +104,4 @@ Ensure refinement maintains quality: - **Better reading**: Is text easier to read for extended periods? - **Sophistication**: Does it feel more refined and premium? -Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. \ No newline at end of file +Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. diff --git a/.cursor/skills/teach-impeccable/SKILL.md b/.cursor/skills/teach-impeccable/SKILL.md index 114f0fc..a7e7331 100644 --- a/.cursor/skills/teach-impeccable/SKILL.md +++ b/.cursor/skills/teach-impeccable/SKILL.md @@ -1,6 +1,12 @@ +--- +name: teach-impeccable +description: +--- + --- name: teach-impeccable description: One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines. +user-invocable: true --- Gather design context for this project, then persist it for all future sessions. @@ -67,4 +73,4 @@ Write this section to `.impeccable.md` in the project root. If the file already Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to .cursorrules. If yes, append or update the section there as well. -Confirm completion and summarize the key design principles that will now guide all future work. \ No newline at end of file +Confirm completion and summarize the key design principles that will now guide all future work. diff --git a/.cursor/skills/typeset/SKILL.md b/.cursor/skills/typeset/SKILL.md index 2acf08b..23cc54b 100644 --- a/.cursor/skills/typeset/SKILL.md +++ b/.cursor/skills/typeset/SKILL.md @@ -1,6 +1,13 @@ --- name: typeset -description: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography. +description: +--- + +--- +name: typeset +description: "Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography." +argument-hint: "[target]" +user-invocable: true --- Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. @@ -110,4 +117,4 @@ Build a clear type scale: - **Performance**: Are web fonts loading efficiently without layout shift? - **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? -Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. \ No newline at end of file +Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. diff --git a/.gemini/skills/adapt/SKILL.md b/.gemini/skills/adapt/SKILL.md index 2b30e16..ac5f7cc 100644 --- a/.gemini/skills/adapt/SKILL.md +++ b/.gemini/skills/adapt/SKILL.md @@ -1,6 +1,13 @@ --- name: adapt -description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility. +description: +--- + +--- +name: adapt +description: "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility." +argument-hint: "[target] [context (mobile, tablet, print...)]" +user-invocable: true --- Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. @@ -193,4 +200,5 @@ Test thoroughly across contexts: - **Edge cases**: Very small screens (320px), very large screens (4K) - **Slow connections**: Test on throttled network -Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly. \ No newline at end of file +Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly. + diff --git a/.gemini/skills/animate/SKILL.md b/.gemini/skills/animate/SKILL.md index f22c210..0c3007c 100644 --- a/.gemini/skills/animate/SKILL.md +++ b/.gemini/skills/animate/SKILL.md @@ -1,6 +1,13 @@ --- name: animate -description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive. +description: +--- + +--- +name: animate +description: "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive." +argument-hint: "[target]" +user-invocable: true --- Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. @@ -169,4 +176,4 @@ Test animations thoroughly: - **Doesn't block**: Users can interact during/after animations - **Adds value**: Makes interface clearer or more delightful -Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right. \ No newline at end of file +Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right. diff --git a/.gemini/skills/arrange/SKILL.md b/.gemini/skills/arrange/SKILL.md index 1d3a6be..03599b8 100644 --- a/.gemini/skills/arrange/SKILL.md +++ b/.gemini/skills/arrange/SKILL.md @@ -1,6 +1,13 @@ --- name: arrange -description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition. +description: +--- + +--- +name: arrange +description: "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition." +argument-hint: "[target]" +user-invocable: true --- Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. @@ -119,4 +126,4 @@ Create a systematic plan: - **Consistency**: Is the spacing system applied uniformly? - **Responsiveness**: Does the layout adapt gracefully across screen sizes? -Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. \ No newline at end of file +Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. diff --git a/.gemini/skills/audit/SKILL.md b/.gemini/skills/audit/SKILL.md index 6dc747d..188ea75 100644 --- a/.gemini/skills/audit/SKILL.md +++ b/.gemini/skills/audit/SKILL.md @@ -1,6 +1,13 @@ --- name: audit -description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review. +description: +--- + +--- +name: audit +description: "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review." +argument-hint: "[area (feature, page, component...)]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -106,7 +113,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive) +- **Suggested command**: Which command to use (prefer: ) ### Patterns & Systemic Issues @@ -125,7 +132,7 @@ List recommended commands in priority order (P0 first, then P1, then P2): 1. **[P?] `/command-name`** — Brief description (specific context from audit findings) 2. **[P?] `/command-name`** — Brief description (specific context) -**Rules**: Only recommend commands from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended. +**Rules**: Only recommend commands from: . Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended. After presenting the summary, tell the user: @@ -142,4 +149,4 @@ After presenting the summary, tell the user: - Forget to prioritize (everything can't be P0) - Report false positives without verification -Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement. \ No newline at end of file +Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement. diff --git a/.gemini/skills/bolder/SKILL.md b/.gemini/skills/bolder/SKILL.md index a43c800..3429d1e 100644 --- a/.gemini/skills/bolder/SKILL.md +++ b/.gemini/skills/bolder/SKILL.md @@ -1,6 +1,13 @@ --- name: bolder -description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character. +description: +--- + +--- +name: bolder +description: "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character." +argument-hint: "[target]" +user-invocable: true --- Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. @@ -111,4 +118,4 @@ Ensure amplification maintains usability and coherence: **The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." -Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file +Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. diff --git a/.gemini/skills/clarify/SKILL.md b/.gemini/skills/clarify/SKILL.md index 462a515..c599b35 100644 --- a/.gemini/skills/clarify/SKILL.md +++ b/.gemini/skills/clarify/SKILL.md @@ -1,6 +1,13 @@ --- name: clarify -description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing. +description: +--- + +--- +name: clarify +description: "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing." +argument-hint: "[target]" +user-invocable: true --- Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. @@ -177,4 +184,5 @@ Test that copy improvements work: - **Consistency**: Does it match terminology elsewhere? - **Tone**: Is it appropriate for the situation? -Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. \ No newline at end of file +Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. + diff --git a/.gemini/skills/colorize/SKILL.md b/.gemini/skills/colorize/SKILL.md index 39cabda..11f9267 100644 --- a/.gemini/skills/colorize/SKILL.md +++ b/.gemini/skills/colorize/SKILL.md @@ -1,6 +1,13 @@ --- name: colorize -description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette. +description: +--- + +--- +name: colorize +description: "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette." +argument-hint: "[target]" +user-invocable: true --- Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. @@ -137,4 +144,4 @@ Test that colorization improves the experience: - **Still accessible**: Do all color combinations meet WCAG standards? - **Not overwhelming**: Is color balanced and purposeful? -Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. \ No newline at end of file +Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. diff --git a/.gemini/skills/critique/SKILL.md b/.gemini/skills/critique/SKILL.md index 12180ce..5680365 100644 --- a/.gemini/skills/critique/SKILL.md +++ b/.gemini/skills/critique/SKILL.md @@ -1,6 +1,13 @@ --- name: critique -description: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component. +description: +--- + +--- +name: critique +description: "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component." +argument-hint: "[area (feature, page, component...)]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -124,7 +131,7 @@ For each issue, tag with **P0–P3 severity** (consult [heuristics-scoring](refe - **[P?] What**: Name the problem clearly - **Why it matters**: How this hurts users or undermines goals - **Fix**: What to do about it (be concrete) -- **Suggested command**: Which command could address this (from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive) +- **Suggested command**: Which command could address this (from: ) ### Persona Red Flags > *Consult [personas](reference/personas.md)* @@ -183,7 +190,7 @@ List recommended commands in priority order, based on the user's answers: ... **Rules for recommendations**: -- Only recommend commands from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive +- Only recommend commands from: - Order by the user's stated priorities first, then by impact - Each item's description should carry enough context that the command knows what to focus on - Map each Priority Issue to the appropriate command @@ -196,4 +203,4 @@ After presenting the summary, tell the user: > You can ask me to run these one at a time, all at once, or in any order you prefer. > -> Re-run `/critique` after fixes to see your score improve. \ No newline at end of file +> Re-run `/critique` after fixes to see your score improve. diff --git a/.gemini/skills/delight/SKILL.md b/.gemini/skills/delight/SKILL.md index d3d76c3..a7cc7b3 100644 --- a/.gemini/skills/delight/SKILL.md +++ b/.gemini/skills/delight/SKILL.md @@ -1,6 +1,13 @@ --- name: delight -description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable. +description: +--- + +--- +name: delight +description: "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable." +argument-hint: "[target]" +user-invocable: true --- Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. @@ -298,4 +305,4 @@ Test that delight actually delights: - **Appropriate**: Matches brand and context - **Accessible**: Works with reduced motion, screen readers -Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. \ No newline at end of file +Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. diff --git a/.gemini/skills/distill/SKILL.md b/.gemini/skills/distill/SKILL.md index 05b49d3..45c3b81 100644 --- a/.gemini/skills/distill/SKILL.md +++ b/.gemini/skills/distill/SKILL.md @@ -1,6 +1,13 @@ --- name: distill -description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused. +description: +--- + +--- +name: distill +description: "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused." +argument-hint: "[target]" +user-invocable: true --- Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. @@ -116,4 +123,4 @@ If you removed features or options: - Consider if they need alternative access points - Note any user feedback to monitor -Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." \ No newline at end of file +Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." diff --git a/.gemini/skills/extract/SKILL.md b/.gemini/skills/extract/SKILL.md index 83d9524..50d972b 100644 --- a/.gemini/skills/extract/SKILL.md +++ b/.gemini/skills/extract/SKILL.md @@ -1,6 +1,13 @@ --- name: extract -description: Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens. +description: +--- + +--- +name: extract +description: "Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens." +argument-hint: "[target]" +user-invocable: true --- Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse. @@ -86,4 +93,5 @@ Update design system documentation: - Add examples and guidelines - Update any Storybook or component catalog -Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently. \ No newline at end of file +Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently. + diff --git a/.gemini/skills/frontend-design/SKILL.md b/.gemini/skills/frontend-design/SKILL.md index 1200100..e8f16a4 100644 --- a/.gemini/skills/frontend-design/SKILL.md +++ b/.gemini/skills/frontend-design/SKILL.md @@ -1,6 +1,12 @@ --- name: frontend-design -description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. +description: +--- + +--- +name: frontend-design +description: "Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context." +license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. --- This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. @@ -143,4 +149,4 @@ Match implementation complexity to the aesthetic vision. Maximalist designs need Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices across generations. -Remember: Gemini is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision. \ No newline at end of file +Remember: Gemini is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision. diff --git a/.gemini/skills/harden/SKILL.md b/.gemini/skills/harden/SKILL.md index bb2cc7f..8cb2d59 100644 --- a/.gemini/skills/harden/SKILL.md +++ b/.gemini/skills/harden/SKILL.md @@ -1,6 +1,13 @@ --- name: harden -description: Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues. +description: +--- + +--- +name: harden +description: "Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues." +argument-hint: "[target]" +user-invocable: true --- Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. @@ -349,4 +356,5 @@ Test thoroughly with edge cases: - **Errors**: Force API errors, test all error states - **Empty**: Remove all data, test empty states -Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. \ No newline at end of file +Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. + diff --git a/.gemini/skills/normalize/SKILL.md b/.gemini/skills/normalize/SKILL.md index 260a96f..03ec5c6 100644 --- a/.gemini/skills/normalize/SKILL.md +++ b/.gemini/skills/normalize/SKILL.md @@ -1,6 +1,13 @@ --- name: normalize -description: Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system. +description: +--- + +--- +name: normalize +description: "Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system." +argument-hint: "[feature (page, route, component...)]" +user-invocable: true --- Analyze and redesign the feature to perfectly match our design system standards, aesthetics, and established patterns. @@ -65,4 +72,4 @@ After normalization, ensure code quality: - **Verify quality**: Lint, type-check, and test according to repository guidelines. Ensure normalization didn't introduce regressions. - **Ensure DRYness**: Look for duplication introduced during refactoring and consolidate. -Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness. \ No newline at end of file +Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness. diff --git a/.gemini/skills/onboard/SKILL.md b/.gemini/skills/onboard/SKILL.md index 2e9f777..c1bbd68 100644 --- a/.gemini/skills/onboard/SKILL.md +++ b/.gemini/skills/onboard/SKILL.md @@ -1,6 +1,13 @@ --- name: onboard -description: Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows. +description: +--- + +--- +name: onboard +description: "Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows." +argument-hint: "[target]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -240,4 +247,5 @@ Test with real users: - **Completion rate**: Are users completing? (If low, simplify) - **Time to value**: How long until users get first value? -Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. \ No newline at end of file +Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. + diff --git a/.gemini/skills/optimize/SKILL.md b/.gemini/skills/optimize/SKILL.md index 837bb13..757caa4 100644 --- a/.gemini/skills/optimize/SKILL.md +++ b/.gemini/skills/optimize/SKILL.md @@ -1,6 +1,13 @@ --- name: optimize -description: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience. +description: +--- + +--- +name: optimize +description: "Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience." +argument-hint: "[target]" +user-invocable: true --- Identify and fix performance issues to create faster, smoother user experiences. @@ -260,4 +267,5 @@ Test that optimizations worked: - **No regressions**: Ensure functionality still works - **User perception**: Does it *feel* faster? -Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. \ No newline at end of file +Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. + diff --git a/.gemini/skills/overdrive/SKILL.md b/.gemini/skills/overdrive/SKILL.md index f890cea..dd887ef 100644 --- a/.gemini/skills/overdrive/SKILL.md +++ b/.gemini/skills/overdrive/SKILL.md @@ -1,6 +1,13 @@ --- name: overdrive -description: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary. +description: +--- + +--- +name: overdrive +description: "Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary." +argument-hint: "[target]" +user-invocable: true --- Start your response with: @@ -136,4 +143,4 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the - **The accessibility test**: Enable reduced motion. Still beautiful? - **The context test**: Does this make sense for THIS brand and audience? -Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. \ No newline at end of file +Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. diff --git a/.gemini/skills/polish/SKILL.md b/.gemini/skills/polish/SKILL.md index fe7c632..0b587b4 100644 --- a/.gemini/skills/polish/SKILL.md +++ b/.gemini/skills/polish/SKILL.md @@ -1,6 +1,13 @@ --- name: polish -description: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great. +description: +--- + +--- +name: polish +description: "Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great." +argument-hint: "[target]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -197,4 +204,5 @@ Before marking as done: - **Compare to design**: Match intended design - **Check all states**: Don't just test happy path -Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. \ No newline at end of file +Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. + diff --git a/.gemini/skills/quieter/SKILL.md b/.gemini/skills/quieter/SKILL.md index 22375f0..d8f31e5 100644 --- a/.gemini/skills/quieter/SKILL.md +++ b/.gemini/skills/quieter/SKILL.md @@ -1,6 +1,13 @@ --- name: quieter -description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic. +description: +--- + +--- +name: quieter +description: "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic." +argument-hint: "[target]" +user-invocable: true --- Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. @@ -97,4 +104,4 @@ Ensure refinement maintains quality: - **Better reading**: Is text easier to read for extended periods? - **Sophistication**: Does it feel more refined and premium? -Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. \ No newline at end of file +Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. diff --git a/.gemini/skills/teach-impeccable/SKILL.md b/.gemini/skills/teach-impeccable/SKILL.md index dc342c4..3a651af 100644 --- a/.gemini/skills/teach-impeccable/SKILL.md +++ b/.gemini/skills/teach-impeccable/SKILL.md @@ -1,6 +1,12 @@ +--- +name: teach-impeccable +description: +--- + --- name: teach-impeccable description: One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines. +user-invocable: true --- Gather design context for this project, then persist it for all future sessions. @@ -67,4 +73,4 @@ Write this section to `.impeccable.md` in the project root. If the file already Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to GEMINI.md. If yes, append or update the section there as well. -Confirm completion and summarize the key design principles that will now guide all future work. \ No newline at end of file +Confirm completion and summarize the key design principles that will now guide all future work. diff --git a/.gemini/skills/typeset/SKILL.md b/.gemini/skills/typeset/SKILL.md index 2acf08b..23cc54b 100644 --- a/.gemini/skills/typeset/SKILL.md +++ b/.gemini/skills/typeset/SKILL.md @@ -1,6 +1,13 @@ --- name: typeset -description: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography. +description: +--- + +--- +name: typeset +description: "Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography." +argument-hint: "[target]" +user-invocable: true --- Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. @@ -110,4 +117,4 @@ Build a clear type scale: - **Performance**: Are web fonts loading efficiently without layout shift? - **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? -Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. \ No newline at end of file +Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. diff --git a/.kiro/skills/adapt/SKILL.md b/.kiro/skills/adapt/SKILL.md index 2b30e16..ac5f7cc 100644 --- a/.kiro/skills/adapt/SKILL.md +++ b/.kiro/skills/adapt/SKILL.md @@ -1,6 +1,13 @@ --- name: adapt -description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility. +description: +--- + +--- +name: adapt +description: "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility." +argument-hint: "[target] [context (mobile, tablet, print...)]" +user-invocable: true --- Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. @@ -193,4 +200,5 @@ Test thoroughly across contexts: - **Edge cases**: Very small screens (320px), very large screens (4K) - **Slow connections**: Test on throttled network -Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly. \ No newline at end of file +Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly. + diff --git a/.kiro/skills/animate/SKILL.md b/.kiro/skills/animate/SKILL.md index f22c210..0c3007c 100644 --- a/.kiro/skills/animate/SKILL.md +++ b/.kiro/skills/animate/SKILL.md @@ -1,6 +1,13 @@ --- name: animate -description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive. +description: +--- + +--- +name: animate +description: "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive." +argument-hint: "[target]" +user-invocable: true --- Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. @@ -169,4 +176,4 @@ Test animations thoroughly: - **Doesn't block**: Users can interact during/after animations - **Adds value**: Makes interface clearer or more delightful -Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right. \ No newline at end of file +Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right. diff --git a/.kiro/skills/arrange/SKILL.md b/.kiro/skills/arrange/SKILL.md index 1d3a6be..03599b8 100644 --- a/.kiro/skills/arrange/SKILL.md +++ b/.kiro/skills/arrange/SKILL.md @@ -1,6 +1,13 @@ --- name: arrange -description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition. +description: +--- + +--- +name: arrange +description: "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition." +argument-hint: "[target]" +user-invocable: true --- Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. @@ -119,4 +126,4 @@ Create a systematic plan: - **Consistency**: Is the spacing system applied uniformly? - **Responsiveness**: Does the layout adapt gracefully across screen sizes? -Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. \ No newline at end of file +Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. diff --git a/.kiro/skills/audit/SKILL.md b/.kiro/skills/audit/SKILL.md index 6dc747d..188ea75 100644 --- a/.kiro/skills/audit/SKILL.md +++ b/.kiro/skills/audit/SKILL.md @@ -1,6 +1,13 @@ --- name: audit -description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review. +description: +--- + +--- +name: audit +description: "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review." +argument-hint: "[area (feature, page, component...)]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -106,7 +113,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive) +- **Suggested command**: Which command to use (prefer: ) ### Patterns & Systemic Issues @@ -125,7 +132,7 @@ List recommended commands in priority order (P0 first, then P1, then P2): 1. **[P?] `/command-name`** — Brief description (specific context from audit findings) 2. **[P?] `/command-name`** — Brief description (specific context) -**Rules**: Only recommend commands from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended. +**Rules**: Only recommend commands from: . Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended. After presenting the summary, tell the user: @@ -142,4 +149,4 @@ After presenting the summary, tell the user: - Forget to prioritize (everything can't be P0) - Report false positives without verification -Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement. \ No newline at end of file +Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement. diff --git a/.kiro/skills/bolder/SKILL.md b/.kiro/skills/bolder/SKILL.md index a43c800..3429d1e 100644 --- a/.kiro/skills/bolder/SKILL.md +++ b/.kiro/skills/bolder/SKILL.md @@ -1,6 +1,13 @@ --- name: bolder -description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character. +description: +--- + +--- +name: bolder +description: "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character." +argument-hint: "[target]" +user-invocable: true --- Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. @@ -111,4 +118,4 @@ Ensure amplification maintains usability and coherence: **The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." -Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file +Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. diff --git a/.kiro/skills/clarify/SKILL.md b/.kiro/skills/clarify/SKILL.md index 462a515..c599b35 100644 --- a/.kiro/skills/clarify/SKILL.md +++ b/.kiro/skills/clarify/SKILL.md @@ -1,6 +1,13 @@ --- name: clarify -description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing. +description: +--- + +--- +name: clarify +description: "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing." +argument-hint: "[target]" +user-invocable: true --- Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. @@ -177,4 +184,5 @@ Test that copy improvements work: - **Consistency**: Does it match terminology elsewhere? - **Tone**: Is it appropriate for the situation? -Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. \ No newline at end of file +Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. + diff --git a/.kiro/skills/colorize/SKILL.md b/.kiro/skills/colorize/SKILL.md index 39cabda..11f9267 100644 --- a/.kiro/skills/colorize/SKILL.md +++ b/.kiro/skills/colorize/SKILL.md @@ -1,6 +1,13 @@ --- name: colorize -description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette. +description: +--- + +--- +name: colorize +description: "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette." +argument-hint: "[target]" +user-invocable: true --- Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. @@ -137,4 +144,4 @@ Test that colorization improves the experience: - **Still accessible**: Do all color combinations meet WCAG standards? - **Not overwhelming**: Is color balanced and purposeful? -Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. \ No newline at end of file +Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. diff --git a/.kiro/skills/critique/SKILL.md b/.kiro/skills/critique/SKILL.md index 5d9660a..45e0bb7 100644 --- a/.kiro/skills/critique/SKILL.md +++ b/.kiro/skills/critique/SKILL.md @@ -1,6 +1,13 @@ --- name: critique -description: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component. +description: +--- + +--- +name: critique +description: "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component." +argument-hint: "[area (feature, page, component...)]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -124,7 +131,7 @@ For each issue, tag with **P0–P3 severity** (consult [heuristics-scoring](refe - **[P?] What**: Name the problem clearly - **Why it matters**: How this hurts users or undermines goals - **Fix**: What to do about it (be concrete) -- **Suggested command**: Which command could address this (from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive) +- **Suggested command**: Which command could address this (from: ) ### Persona Red Flags > *Consult [personas](reference/personas.md)* @@ -183,7 +190,7 @@ List recommended commands in priority order, based on the user's answers: ... **Rules for recommendations**: -- Only recommend commands from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive +- Only recommend commands from: - Order by the user's stated priorities first, then by impact - Each item's description should carry enough context that the command knows what to focus on - Map each Priority Issue to the appropriate command @@ -196,4 +203,4 @@ After presenting the summary, tell the user: > You can ask me to run these one at a time, all at once, or in any order you prefer. > -> Re-run `/critique` after fixes to see your score improve. \ No newline at end of file +> Re-run `/critique` after fixes to see your score improve. diff --git a/.kiro/skills/delight/SKILL.md b/.kiro/skills/delight/SKILL.md index d3d76c3..a7cc7b3 100644 --- a/.kiro/skills/delight/SKILL.md +++ b/.kiro/skills/delight/SKILL.md @@ -1,6 +1,13 @@ --- name: delight -description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable. +description: +--- + +--- +name: delight +description: "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable." +argument-hint: "[target]" +user-invocable: true --- Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. @@ -298,4 +305,4 @@ Test that delight actually delights: - **Appropriate**: Matches brand and context - **Accessible**: Works with reduced motion, screen readers -Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. \ No newline at end of file +Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. diff --git a/.kiro/skills/distill/SKILL.md b/.kiro/skills/distill/SKILL.md index 05b49d3..45c3b81 100644 --- a/.kiro/skills/distill/SKILL.md +++ b/.kiro/skills/distill/SKILL.md @@ -1,6 +1,13 @@ --- name: distill -description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused. +description: +--- + +--- +name: distill +description: "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused." +argument-hint: "[target]" +user-invocable: true --- Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. @@ -116,4 +123,4 @@ If you removed features or options: - Consider if they need alternative access points - Note any user feedback to monitor -Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." \ No newline at end of file +Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." diff --git a/.kiro/skills/extract/SKILL.md b/.kiro/skills/extract/SKILL.md index 83d9524..50d972b 100644 --- a/.kiro/skills/extract/SKILL.md +++ b/.kiro/skills/extract/SKILL.md @@ -1,6 +1,13 @@ --- name: extract -description: Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens. +description: +--- + +--- +name: extract +description: "Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens." +argument-hint: "[target]" +user-invocable: true --- Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse. @@ -86,4 +93,5 @@ Update design system documentation: - Add examples and guidelines - Update any Storybook or component catalog -Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently. \ No newline at end of file +Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently. + diff --git a/.kiro/skills/frontend-design/SKILL.md b/.kiro/skills/frontend-design/SKILL.md index f7ad804..fbdcd51 100644 --- a/.kiro/skills/frontend-design/SKILL.md +++ b/.kiro/skills/frontend-design/SKILL.md @@ -1,6 +1,11 @@ --- name: frontend-design -description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. +description: +--- + +--- +name: frontend-design +description: "Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context." license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. --- @@ -144,4 +149,4 @@ Match implementation complexity to the aesthetic vision. Maximalist designs need Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices across generations. -Remember: Claude is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision. \ No newline at end of file +Remember: Claude is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision. diff --git a/.kiro/skills/harden/SKILL.md b/.kiro/skills/harden/SKILL.md index bb2cc7f..8cb2d59 100644 --- a/.kiro/skills/harden/SKILL.md +++ b/.kiro/skills/harden/SKILL.md @@ -1,6 +1,13 @@ --- name: harden -description: Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues. +description: +--- + +--- +name: harden +description: "Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues." +argument-hint: "[target]" +user-invocable: true --- Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. @@ -349,4 +356,5 @@ Test thoroughly with edge cases: - **Errors**: Force API errors, test all error states - **Empty**: Remove all data, test empty states -Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. \ No newline at end of file +Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. + diff --git a/.kiro/skills/normalize/SKILL.md b/.kiro/skills/normalize/SKILL.md index 260a96f..03ec5c6 100644 --- a/.kiro/skills/normalize/SKILL.md +++ b/.kiro/skills/normalize/SKILL.md @@ -1,6 +1,13 @@ --- name: normalize -description: Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system. +description: +--- + +--- +name: normalize +description: "Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system." +argument-hint: "[feature (page, route, component...)]" +user-invocable: true --- Analyze and redesign the feature to perfectly match our design system standards, aesthetics, and established patterns. @@ -65,4 +72,4 @@ After normalization, ensure code quality: - **Verify quality**: Lint, type-check, and test according to repository guidelines. Ensure normalization didn't introduce regressions. - **Ensure DRYness**: Look for duplication introduced during refactoring and consolidate. -Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness. \ No newline at end of file +Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness. diff --git a/.kiro/skills/onboard/SKILL.md b/.kiro/skills/onboard/SKILL.md index 2e9f777..c1bbd68 100644 --- a/.kiro/skills/onboard/SKILL.md +++ b/.kiro/skills/onboard/SKILL.md @@ -1,6 +1,13 @@ --- name: onboard -description: Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows. +description: +--- + +--- +name: onboard +description: "Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows." +argument-hint: "[target]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -240,4 +247,5 @@ Test with real users: - **Completion rate**: Are users completing? (If low, simplify) - **Time to value**: How long until users get first value? -Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. \ No newline at end of file +Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. + diff --git a/.kiro/skills/optimize/SKILL.md b/.kiro/skills/optimize/SKILL.md index 837bb13..757caa4 100644 --- a/.kiro/skills/optimize/SKILL.md +++ b/.kiro/skills/optimize/SKILL.md @@ -1,6 +1,13 @@ --- name: optimize -description: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience. +description: +--- + +--- +name: optimize +description: "Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience." +argument-hint: "[target]" +user-invocable: true --- Identify and fix performance issues to create faster, smoother user experiences. @@ -260,4 +267,5 @@ Test that optimizations worked: - **No regressions**: Ensure functionality still works - **User perception**: Does it *feel* faster? -Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. \ No newline at end of file +Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. + diff --git a/.kiro/skills/overdrive/SKILL.md b/.kiro/skills/overdrive/SKILL.md index f890cea..dd887ef 100644 --- a/.kiro/skills/overdrive/SKILL.md +++ b/.kiro/skills/overdrive/SKILL.md @@ -1,6 +1,13 @@ --- name: overdrive -description: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary. +description: +--- + +--- +name: overdrive +description: "Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary." +argument-hint: "[target]" +user-invocable: true --- Start your response with: @@ -136,4 +143,4 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the - **The accessibility test**: Enable reduced motion. Still beautiful? - **The context test**: Does this make sense for THIS brand and audience? -Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. \ No newline at end of file +Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. diff --git a/.kiro/skills/polish/SKILL.md b/.kiro/skills/polish/SKILL.md index fe7c632..0b587b4 100644 --- a/.kiro/skills/polish/SKILL.md +++ b/.kiro/skills/polish/SKILL.md @@ -1,6 +1,13 @@ --- name: polish -description: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great. +description: +--- + +--- +name: polish +description: "Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great." +argument-hint: "[target]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -197,4 +204,5 @@ Before marking as done: - **Compare to design**: Match intended design - **Check all states**: Don't just test happy path -Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. \ No newline at end of file +Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. + diff --git a/.kiro/skills/quieter/SKILL.md b/.kiro/skills/quieter/SKILL.md index 22375f0..d8f31e5 100644 --- a/.kiro/skills/quieter/SKILL.md +++ b/.kiro/skills/quieter/SKILL.md @@ -1,6 +1,13 @@ --- name: quieter -description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic. +description: +--- + +--- +name: quieter +description: "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic." +argument-hint: "[target]" +user-invocable: true --- Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. @@ -97,4 +104,4 @@ Ensure refinement maintains quality: - **Better reading**: Is text easier to read for extended periods? - **Sophistication**: Does it feel more refined and premium? -Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. \ No newline at end of file +Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. diff --git a/.kiro/skills/teach-impeccable/SKILL.md b/.kiro/skills/teach-impeccable/SKILL.md index 72d8070..b00a2b1 100644 --- a/.kiro/skills/teach-impeccable/SKILL.md +++ b/.kiro/skills/teach-impeccable/SKILL.md @@ -1,6 +1,12 @@ +--- +name: teach-impeccable +description: +--- + --- name: teach-impeccable description: One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines. +user-invocable: true --- Gather design context for this project, then persist it for all future sessions. @@ -67,4 +73,4 @@ Write this section to `.impeccable.md` in the project root. If the file already Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to .kiro/settings.json. If yes, append or update the section there as well. -Confirm completion and summarize the key design principles that will now guide all future work. \ No newline at end of file +Confirm completion and summarize the key design principles that will now guide all future work. diff --git a/.kiro/skills/typeset/SKILL.md b/.kiro/skills/typeset/SKILL.md index 2acf08b..23cc54b 100644 --- a/.kiro/skills/typeset/SKILL.md +++ b/.kiro/skills/typeset/SKILL.md @@ -1,6 +1,13 @@ --- name: typeset -description: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography. +description: +--- + +--- +name: typeset +description: "Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography." +argument-hint: "[target]" +user-invocable: true --- Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. @@ -110,4 +117,4 @@ Build a clear type scale: - **Performance**: Are web fonts loading efficiently without layout shift? - **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? -Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. \ No newline at end of file +Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. diff --git a/.opencode/skills/adapt/SKILL.md b/.opencode/skills/adapt/SKILL.md index 165c66d..ac5f7cc 100644 --- a/.opencode/skills/adapt/SKILL.md +++ b/.opencode/skills/adapt/SKILL.md @@ -1,8 +1,13 @@ --- name: adapt -description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility. -user-invocable: true +description: +--- + +--- +name: adapt +description: "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility." argument-hint: "[target] [context (mobile, tablet, print...)]" +user-invocable: true --- Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. @@ -195,4 +200,5 @@ Test thoroughly across contexts: - **Edge cases**: Very small screens (320px), very large screens (4K) - **Slow connections**: Test on throttled network -Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly. \ No newline at end of file +Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly. + diff --git a/.opencode/skills/animate/SKILL.md b/.opencode/skills/animate/SKILL.md index 479f991..14aacc1 100644 --- a/.opencode/skills/animate/SKILL.md +++ b/.opencode/skills/animate/SKILL.md @@ -1,8 +1,13 @@ --- name: animate -description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive. -user-invocable: true +description: +--- + +--- +name: animate +description: "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive." argument-hint: "[target]" +user-invocable: true --- Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. @@ -171,4 +176,4 @@ Test animations thoroughly: - **Doesn't block**: Users can interact during/after animations - **Adds value**: Makes interface clearer or more delightful -Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right. \ No newline at end of file +Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right. diff --git a/.opencode/skills/arrange/SKILL.md b/.opencode/skills/arrange/SKILL.md index ce4cf3a..03599b8 100644 --- a/.opencode/skills/arrange/SKILL.md +++ b/.opencode/skills/arrange/SKILL.md @@ -1,8 +1,13 @@ --- name: arrange -description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition. -user-invocable: true +description: +--- + +--- +name: arrange +description: "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition." argument-hint: "[target]" +user-invocable: true --- Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. @@ -121,4 +126,4 @@ Create a systematic plan: - **Consistency**: Is the spacing system applied uniformly? - **Responsiveness**: Does the layout adapt gracefully across screen sizes? -Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. \ No newline at end of file +Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. diff --git a/.opencode/skills/audit/SKILL.md b/.opencode/skills/audit/SKILL.md index 1debe04..188ea75 100644 --- a/.opencode/skills/audit/SKILL.md +++ b/.opencode/skills/audit/SKILL.md @@ -1,8 +1,13 @@ --- name: audit -description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review. -user-invocable: true +description: +--- + +--- +name: audit +description: "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review." argument-hint: "[area (feature, page, component...)]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -108,7 +113,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive) +- **Suggested command**: Which command to use (prefer: ) ### Patterns & Systemic Issues @@ -127,7 +132,7 @@ List recommended commands in priority order (P0 first, then P1, then P2): 1. **[P?] `/command-name`** — Brief description (specific context from audit findings) 2. **[P?] `/command-name`** — Brief description (specific context) -**Rules**: Only recommend commands from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended. +**Rules**: Only recommend commands from: . Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended. After presenting the summary, tell the user: @@ -144,4 +149,4 @@ After presenting the summary, tell the user: - Forget to prioritize (everything can't be P0) - Report false positives without verification -Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement. \ No newline at end of file +Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement. diff --git a/.opencode/skills/bolder/SKILL.md b/.opencode/skills/bolder/SKILL.md index b4b0147..34f3559 100644 --- a/.opencode/skills/bolder/SKILL.md +++ b/.opencode/skills/bolder/SKILL.md @@ -1,8 +1,13 @@ --- name: bolder -description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character. -user-invocable: true +description: +--- + +--- +name: bolder +description: "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character." argument-hint: "[target]" +user-invocable: true --- Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. @@ -113,4 +118,4 @@ Ensure amplification maintains usability and coherence: **The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." -Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file +Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. diff --git a/.opencode/skills/clarify/SKILL.md b/.opencode/skills/clarify/SKILL.md index 4db9228..c599b35 100644 --- a/.opencode/skills/clarify/SKILL.md +++ b/.opencode/skills/clarify/SKILL.md @@ -1,8 +1,13 @@ --- name: clarify -description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing. -user-invocable: true +description: +--- + +--- +name: clarify +description: "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing." argument-hint: "[target]" +user-invocable: true --- Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. @@ -179,4 +184,5 @@ Test that copy improvements work: - **Consistency**: Does it match terminology elsewhere? - **Tone**: Is it appropriate for the situation? -Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. \ No newline at end of file +Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. + diff --git a/.opencode/skills/colorize/SKILL.md b/.opencode/skills/colorize/SKILL.md index c77cedb..03266aa 100644 --- a/.opencode/skills/colorize/SKILL.md +++ b/.opencode/skills/colorize/SKILL.md @@ -1,8 +1,13 @@ --- name: colorize -description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette. -user-invocable: true +description: +--- + +--- +name: colorize +description: "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette." argument-hint: "[target]" +user-invocable: true --- Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. @@ -139,4 +144,4 @@ Test that colorization improves the experience: - **Still accessible**: Do all color combinations meet WCAG standards? - **Not overwhelming**: Is color balanced and purposeful? -Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. \ No newline at end of file +Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. diff --git a/.opencode/skills/critique/SKILL.md b/.opencode/skills/critique/SKILL.md index 74f39ab..a75ee6c 100644 --- a/.opencode/skills/critique/SKILL.md +++ b/.opencode/skills/critique/SKILL.md @@ -1,8 +1,13 @@ --- name: critique -description: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component. -user-invocable: true +description: +--- + +--- +name: critique +description: "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component." argument-hint: "[area (feature, page, component...)]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -126,7 +131,7 @@ For each issue, tag with **P0–P3 severity** (consult [heuristics-scoring](refe - **[P?] What**: Name the problem clearly - **Why it matters**: How this hurts users or undermines goals - **Fix**: What to do about it (be concrete) -- **Suggested command**: Which command could address this (from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive) +- **Suggested command**: Which command could address this (from: ) ### Persona Red Flags > *Consult [personas](reference/personas.md)* @@ -185,7 +190,7 @@ List recommended commands in priority order, based on the user's answers: ... **Rules for recommendations**: -- Only recommend commands from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive +- Only recommend commands from: - Order by the user's stated priorities first, then by impact - Each item's description should carry enough context that the command knows what to focus on - Map each Priority Issue to the appropriate command @@ -198,4 +203,4 @@ After presenting the summary, tell the user: > You can ask me to run these one at a time, all at once, or in any order you prefer. > -> Re-run `/critique` after fixes to see your score improve. \ No newline at end of file +> Re-run `/critique` after fixes to see your score improve. diff --git a/.opencode/skills/delight/SKILL.md b/.opencode/skills/delight/SKILL.md index 72a683b..6edaeff 100644 --- a/.opencode/skills/delight/SKILL.md +++ b/.opencode/skills/delight/SKILL.md @@ -1,8 +1,13 @@ --- name: delight -description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable. -user-invocable: true +description: +--- + +--- +name: delight +description: "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable." argument-hint: "[target]" +user-invocable: true --- Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. @@ -300,4 +305,4 @@ Test that delight actually delights: - **Appropriate**: Matches brand and context - **Accessible**: Works with reduced motion, screen readers -Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. \ No newline at end of file +Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. diff --git a/.opencode/skills/distill/SKILL.md b/.opencode/skills/distill/SKILL.md index 6c6ecbf..f5d3542 100644 --- a/.opencode/skills/distill/SKILL.md +++ b/.opencode/skills/distill/SKILL.md @@ -1,8 +1,13 @@ --- name: distill -description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused. -user-invocable: true +description: +--- + +--- +name: distill +description: "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused." argument-hint: "[target]" +user-invocable: true --- Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. @@ -118,4 +123,4 @@ If you removed features or options: - Consider if they need alternative access points - Note any user feedback to monitor -Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." \ No newline at end of file +Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." diff --git a/.opencode/skills/extract/SKILL.md b/.opencode/skills/extract/SKILL.md index 4b57ea3..50d972b 100644 --- a/.opencode/skills/extract/SKILL.md +++ b/.opencode/skills/extract/SKILL.md @@ -1,8 +1,13 @@ --- name: extract -description: Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens. -user-invocable: true +description: +--- + +--- +name: extract +description: "Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens." argument-hint: "[target]" +user-invocable: true --- Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse. @@ -88,4 +93,5 @@ Update design system documentation: - Add examples and guidelines - Update any Storybook or component catalog -Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently. \ No newline at end of file +Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently. + diff --git a/.opencode/skills/frontend-design/SKILL.md b/.opencode/skills/frontend-design/SKILL.md index f7ad804..fbdcd51 100644 --- a/.opencode/skills/frontend-design/SKILL.md +++ b/.opencode/skills/frontend-design/SKILL.md @@ -1,6 +1,11 @@ --- name: frontend-design -description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. +description: +--- + +--- +name: frontend-design +description: "Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context." license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. --- @@ -144,4 +149,4 @@ Match implementation complexity to the aesthetic vision. Maximalist designs need Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices across generations. -Remember: Claude is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision. \ No newline at end of file +Remember: Claude is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision. diff --git a/.opencode/skills/harden/SKILL.md b/.opencode/skills/harden/SKILL.md index d870ddd..8cb2d59 100644 --- a/.opencode/skills/harden/SKILL.md +++ b/.opencode/skills/harden/SKILL.md @@ -1,8 +1,13 @@ --- name: harden -description: Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues. -user-invocable: true +description: +--- + +--- +name: harden +description: "Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues." argument-hint: "[target]" +user-invocable: true --- Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. @@ -351,4 +356,5 @@ Test thoroughly with edge cases: - **Errors**: Force API errors, test all error states - **Empty**: Remove all data, test empty states -Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. \ No newline at end of file +Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. + diff --git a/.opencode/skills/normalize/SKILL.md b/.opencode/skills/normalize/SKILL.md index 4015c54..03ec5c6 100644 --- a/.opencode/skills/normalize/SKILL.md +++ b/.opencode/skills/normalize/SKILL.md @@ -1,8 +1,13 @@ --- name: normalize -description: Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system. -user-invocable: true +description: +--- + +--- +name: normalize +description: "Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system." argument-hint: "[feature (page, route, component...)]" +user-invocable: true --- Analyze and redesign the feature to perfectly match our design system standards, aesthetics, and established patterns. @@ -67,4 +72,4 @@ After normalization, ensure code quality: - **Verify quality**: Lint, type-check, and test according to repository guidelines. Ensure normalization didn't introduce regressions. - **Ensure DRYness**: Look for duplication introduced during refactoring and consolidate. -Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness. \ No newline at end of file +Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness. diff --git a/.opencode/skills/onboard/SKILL.md b/.opencode/skills/onboard/SKILL.md index 1466605..c1bbd68 100644 --- a/.opencode/skills/onboard/SKILL.md +++ b/.opencode/skills/onboard/SKILL.md @@ -1,8 +1,13 @@ --- name: onboard -description: Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows. -user-invocable: true +description: +--- + +--- +name: onboard +description: "Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows." argument-hint: "[target]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -242,4 +247,5 @@ Test with real users: - **Completion rate**: Are users completing? (If low, simplify) - **Time to value**: How long until users get first value? -Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. \ No newline at end of file +Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. + diff --git a/.opencode/skills/optimize/SKILL.md b/.opencode/skills/optimize/SKILL.md index 5315a8d..757caa4 100644 --- a/.opencode/skills/optimize/SKILL.md +++ b/.opencode/skills/optimize/SKILL.md @@ -1,8 +1,13 @@ --- name: optimize -description: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience. -user-invocable: true +description: +--- + +--- +name: optimize +description: "Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience." argument-hint: "[target]" +user-invocable: true --- Identify and fix performance issues to create faster, smoother user experiences. @@ -262,4 +267,5 @@ Test that optimizations worked: - **No regressions**: Ensure functionality still works - **User perception**: Does it *feel* faster? -Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. \ No newline at end of file +Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. + diff --git a/.opencode/skills/overdrive/SKILL.md b/.opencode/skills/overdrive/SKILL.md index 660b9af..f14d9aa 100644 --- a/.opencode/skills/overdrive/SKILL.md +++ b/.opencode/skills/overdrive/SKILL.md @@ -1,8 +1,13 @@ --- name: overdrive -description: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary. -user-invocable: true +description: +--- + +--- +name: overdrive +description: "Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary." argument-hint: "[target]" +user-invocable: true --- Start your response with: @@ -138,4 +143,4 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the - **The accessibility test**: Enable reduced motion. Still beautiful? - **The context test**: Does this make sense for THIS brand and audience? -Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. \ No newline at end of file +Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. diff --git a/.opencode/skills/polish/SKILL.md b/.opencode/skills/polish/SKILL.md index fcaae6e..0b587b4 100644 --- a/.opencode/skills/polish/SKILL.md +++ b/.opencode/skills/polish/SKILL.md @@ -1,8 +1,13 @@ --- name: polish -description: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great. -user-invocable: true +description: +--- + +--- +name: polish +description: "Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great." argument-hint: "[target]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -199,4 +204,5 @@ Before marking as done: - **Compare to design**: Match intended design - **Check all states**: Don't just test happy path -Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. \ No newline at end of file +Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. + diff --git a/.opencode/skills/quieter/SKILL.md b/.opencode/skills/quieter/SKILL.md index dcf4d31..02acd84 100644 --- a/.opencode/skills/quieter/SKILL.md +++ b/.opencode/skills/quieter/SKILL.md @@ -1,8 +1,13 @@ --- name: quieter -description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic. -user-invocable: true +description: +--- + +--- +name: quieter +description: "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic." argument-hint: "[target]" +user-invocable: true --- Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. @@ -99,4 +104,4 @@ Ensure refinement maintains quality: - **Better reading**: Is text easier to read for extended periods? - **Sophistication**: Does it feel more refined and premium? -Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. \ No newline at end of file +Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. diff --git a/.opencode/skills/teach-impeccable/SKILL.md b/.opencode/skills/teach-impeccable/SKILL.md index 929496c..96c4cdd 100644 --- a/.opencode/skills/teach-impeccable/SKILL.md +++ b/.opencode/skills/teach-impeccable/SKILL.md @@ -1,3 +1,8 @@ +--- +name: teach-impeccable +description: +--- + --- name: teach-impeccable description: One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines. @@ -68,4 +73,4 @@ Write this section to `.impeccable.md` in the project root. If the file already Then STOP and call the `question` tool to clarify. whether they'd also like the Design Context appended to AGENTS.md. If yes, append or update the section there as well. -Confirm completion and summarize the key design principles that will now guide all future work. \ No newline at end of file +Confirm completion and summarize the key design principles that will now guide all future work. diff --git a/.opencode/skills/typeset/SKILL.md b/.opencode/skills/typeset/SKILL.md index 139153a..23cc54b 100644 --- a/.opencode/skills/typeset/SKILL.md +++ b/.opencode/skills/typeset/SKILL.md @@ -1,8 +1,13 @@ --- name: typeset -description: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography. -user-invocable: true +description: +--- + +--- +name: typeset +description: "Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography." argument-hint: "[target]" +user-invocable: true --- Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. @@ -112,4 +117,4 @@ Build a clear type scale: - **Performance**: Are web fonts loading efficiently without layout shift? - **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? -Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. \ No newline at end of file +Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. diff --git a/.pi/skills/adapt/SKILL.md b/.pi/skills/adapt/SKILL.md index 2b30e16..ac5f7cc 100644 --- a/.pi/skills/adapt/SKILL.md +++ b/.pi/skills/adapt/SKILL.md @@ -1,6 +1,13 @@ --- name: adapt -description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility. +description: +--- + +--- +name: adapt +description: "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility." +argument-hint: "[target] [context (mobile, tablet, print...)]" +user-invocable: true --- Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. @@ -193,4 +200,5 @@ Test thoroughly across contexts: - **Edge cases**: Very small screens (320px), very large screens (4K) - **Slow connections**: Test on throttled network -Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly. \ No newline at end of file +Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly. + diff --git a/.pi/skills/animate/SKILL.md b/.pi/skills/animate/SKILL.md index f22c210..0c3007c 100644 --- a/.pi/skills/animate/SKILL.md +++ b/.pi/skills/animate/SKILL.md @@ -1,6 +1,13 @@ --- name: animate -description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive. +description: +--- + +--- +name: animate +description: "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive." +argument-hint: "[target]" +user-invocable: true --- Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. @@ -169,4 +176,4 @@ Test animations thoroughly: - **Doesn't block**: Users can interact during/after animations - **Adds value**: Makes interface clearer or more delightful -Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right. \ No newline at end of file +Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right. diff --git a/.pi/skills/arrange/SKILL.md b/.pi/skills/arrange/SKILL.md index 1d3a6be..03599b8 100644 --- a/.pi/skills/arrange/SKILL.md +++ b/.pi/skills/arrange/SKILL.md @@ -1,6 +1,13 @@ --- name: arrange -description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition. +description: +--- + +--- +name: arrange +description: "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition." +argument-hint: "[target]" +user-invocable: true --- Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. @@ -119,4 +126,4 @@ Create a systematic plan: - **Consistency**: Is the spacing system applied uniformly? - **Responsiveness**: Does the layout adapt gracefully across screen sizes? -Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. \ No newline at end of file +Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. diff --git a/.pi/skills/audit/SKILL.md b/.pi/skills/audit/SKILL.md index 6dc747d..188ea75 100644 --- a/.pi/skills/audit/SKILL.md +++ b/.pi/skills/audit/SKILL.md @@ -1,6 +1,13 @@ --- name: audit -description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review. +description: +--- + +--- +name: audit +description: "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review." +argument-hint: "[area (feature, page, component...)]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -106,7 +113,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive) +- **Suggested command**: Which command to use (prefer: ) ### Patterns & Systemic Issues @@ -125,7 +132,7 @@ List recommended commands in priority order (P0 first, then P1, then P2): 1. **[P?] `/command-name`** — Brief description (specific context from audit findings) 2. **[P?] `/command-name`** — Brief description (specific context) -**Rules**: Only recommend commands from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended. +**Rules**: Only recommend commands from: . Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended. After presenting the summary, tell the user: @@ -142,4 +149,4 @@ After presenting the summary, tell the user: - Forget to prioritize (everything can't be P0) - Report false positives without verification -Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement. \ No newline at end of file +Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement. diff --git a/.pi/skills/bolder/SKILL.md b/.pi/skills/bolder/SKILL.md index a43c800..3429d1e 100644 --- a/.pi/skills/bolder/SKILL.md +++ b/.pi/skills/bolder/SKILL.md @@ -1,6 +1,13 @@ --- name: bolder -description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character. +description: +--- + +--- +name: bolder +description: "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character." +argument-hint: "[target]" +user-invocable: true --- Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. @@ -111,4 +118,4 @@ Ensure amplification maintains usability and coherence: **The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." -Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file +Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. diff --git a/.pi/skills/clarify/SKILL.md b/.pi/skills/clarify/SKILL.md index 462a515..c599b35 100644 --- a/.pi/skills/clarify/SKILL.md +++ b/.pi/skills/clarify/SKILL.md @@ -1,6 +1,13 @@ --- name: clarify -description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing. +description: +--- + +--- +name: clarify +description: "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing." +argument-hint: "[target]" +user-invocable: true --- Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. @@ -177,4 +184,5 @@ Test that copy improvements work: - **Consistency**: Does it match terminology elsewhere? - **Tone**: Is it appropriate for the situation? -Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. \ No newline at end of file +Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. + diff --git a/.pi/skills/colorize/SKILL.md b/.pi/skills/colorize/SKILL.md index 39cabda..11f9267 100644 --- a/.pi/skills/colorize/SKILL.md +++ b/.pi/skills/colorize/SKILL.md @@ -1,6 +1,13 @@ --- name: colorize -description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette. +description: +--- + +--- +name: colorize +description: "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette." +argument-hint: "[target]" +user-invocable: true --- Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. @@ -137,4 +144,4 @@ Test that colorization improves the experience: - **Still accessible**: Do all color combinations meet WCAG standards? - **Not overwhelming**: Is color balanced and purposeful? -Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. \ No newline at end of file +Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. diff --git a/.pi/skills/critique/SKILL.md b/.pi/skills/critique/SKILL.md index dba9b20..2c70741 100644 --- a/.pi/skills/critique/SKILL.md +++ b/.pi/skills/critique/SKILL.md @@ -1,6 +1,13 @@ --- name: critique -description: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component. +description: +--- + +--- +name: critique +description: "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component." +argument-hint: "[area (feature, page, component...)]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -124,7 +131,7 @@ For each issue, tag with **P0–P3 severity** (consult [heuristics-scoring](refe - **[P?] What**: Name the problem clearly - **Why it matters**: How this hurts users or undermines goals - **Fix**: What to do about it (be concrete) -- **Suggested command**: Which command could address this (from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive) +- **Suggested command**: Which command could address this (from: ) ### Persona Red Flags > *Consult [personas](reference/personas.md)* @@ -183,7 +190,7 @@ List recommended commands in priority order, based on the user's answers: ... **Rules for recommendations**: -- Only recommend commands from: /animate, /quieter, /optimize, /adapt, /clarify, /distill, /delight, /onboard, /normalize, /audit, /harden, /polish, /extract, /bolder, /arrange, /typeset, /critique, /colorize, /overdrive +- Only recommend commands from: - Order by the user's stated priorities first, then by impact - Each item's description should carry enough context that the command knows what to focus on - Map each Priority Issue to the appropriate command @@ -196,4 +203,4 @@ After presenting the summary, tell the user: > You can ask me to run these one at a time, all at once, or in any order you prefer. > -> Re-run `/critique` after fixes to see your score improve. \ No newline at end of file +> Re-run `/critique` after fixes to see your score improve. diff --git a/.pi/skills/delight/SKILL.md b/.pi/skills/delight/SKILL.md index d3d76c3..a7cc7b3 100644 --- a/.pi/skills/delight/SKILL.md +++ b/.pi/skills/delight/SKILL.md @@ -1,6 +1,13 @@ --- name: delight -description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable. +description: +--- + +--- +name: delight +description: "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable." +argument-hint: "[target]" +user-invocable: true --- Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. @@ -298,4 +305,4 @@ Test that delight actually delights: - **Appropriate**: Matches brand and context - **Accessible**: Works with reduced motion, screen readers -Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. \ No newline at end of file +Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. diff --git a/.pi/skills/distill/SKILL.md b/.pi/skills/distill/SKILL.md index 05b49d3..45c3b81 100644 --- a/.pi/skills/distill/SKILL.md +++ b/.pi/skills/distill/SKILL.md @@ -1,6 +1,13 @@ --- name: distill -description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused. +description: +--- + +--- +name: distill +description: "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused." +argument-hint: "[target]" +user-invocable: true --- Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. @@ -116,4 +123,4 @@ If you removed features or options: - Consider if they need alternative access points - Note any user feedback to monitor -Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." \ No newline at end of file +Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." diff --git a/.pi/skills/extract/SKILL.md b/.pi/skills/extract/SKILL.md index 83d9524..50d972b 100644 --- a/.pi/skills/extract/SKILL.md +++ b/.pi/skills/extract/SKILL.md @@ -1,6 +1,13 @@ --- name: extract -description: Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens. +description: +--- + +--- +name: extract +description: "Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens." +argument-hint: "[target]" +user-invocable: true --- Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse. @@ -86,4 +93,5 @@ Update design system documentation: - Add examples and guidelines - Update any Storybook or component catalog -Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently. \ No newline at end of file +Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently. + diff --git a/.pi/skills/frontend-design/SKILL.md b/.pi/skills/frontend-design/SKILL.md index dd7c5dd..54c8775 100644 --- a/.pi/skills/frontend-design/SKILL.md +++ b/.pi/skills/frontend-design/SKILL.md @@ -1,6 +1,11 @@ --- name: frontend-design -description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. +description: +--- + +--- +name: frontend-design +description: "Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context." license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. --- @@ -144,4 +149,4 @@ Match implementation complexity to the aesthetic vision. Maximalist designs need Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices across generations. -Remember: the model is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision. \ No newline at end of file +Remember: the model is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision. diff --git a/.pi/skills/harden/SKILL.md b/.pi/skills/harden/SKILL.md index bb2cc7f..8cb2d59 100644 --- a/.pi/skills/harden/SKILL.md +++ b/.pi/skills/harden/SKILL.md @@ -1,6 +1,13 @@ --- name: harden -description: Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues. +description: +--- + +--- +name: harden +description: "Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues." +argument-hint: "[target]" +user-invocable: true --- Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. @@ -349,4 +356,5 @@ Test thoroughly with edge cases: - **Errors**: Force API errors, test all error states - **Empty**: Remove all data, test empty states -Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. \ No newline at end of file +Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. + diff --git a/.pi/skills/normalize/SKILL.md b/.pi/skills/normalize/SKILL.md index 260a96f..03ec5c6 100644 --- a/.pi/skills/normalize/SKILL.md +++ b/.pi/skills/normalize/SKILL.md @@ -1,6 +1,13 @@ --- name: normalize -description: Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system. +description: +--- + +--- +name: normalize +description: "Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system." +argument-hint: "[feature (page, route, component...)]" +user-invocable: true --- Analyze and redesign the feature to perfectly match our design system standards, aesthetics, and established patterns. @@ -65,4 +72,4 @@ After normalization, ensure code quality: - **Verify quality**: Lint, type-check, and test according to repository guidelines. Ensure normalization didn't introduce regressions. - **Ensure DRYness**: Look for duplication introduced during refactoring and consolidate. -Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness. \ No newline at end of file +Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness. diff --git a/.pi/skills/onboard/SKILL.md b/.pi/skills/onboard/SKILL.md index 2e9f777..c1bbd68 100644 --- a/.pi/skills/onboard/SKILL.md +++ b/.pi/skills/onboard/SKILL.md @@ -1,6 +1,13 @@ --- name: onboard -description: Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows. +description: +--- + +--- +name: onboard +description: "Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows." +argument-hint: "[target]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -240,4 +247,5 @@ Test with real users: - **Completion rate**: Are users completing? (If low, simplify) - **Time to value**: How long until users get first value? -Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. \ No newline at end of file +Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. + diff --git a/.pi/skills/optimize/SKILL.md b/.pi/skills/optimize/SKILL.md index 837bb13..757caa4 100644 --- a/.pi/skills/optimize/SKILL.md +++ b/.pi/skills/optimize/SKILL.md @@ -1,6 +1,13 @@ --- name: optimize -description: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience. +description: +--- + +--- +name: optimize +description: "Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience." +argument-hint: "[target]" +user-invocable: true --- Identify and fix performance issues to create faster, smoother user experiences. @@ -260,4 +267,5 @@ Test that optimizations worked: - **No regressions**: Ensure functionality still works - **User perception**: Does it *feel* faster? -Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. \ No newline at end of file +Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. + diff --git a/.pi/skills/overdrive/SKILL.md b/.pi/skills/overdrive/SKILL.md index f890cea..dd887ef 100644 --- a/.pi/skills/overdrive/SKILL.md +++ b/.pi/skills/overdrive/SKILL.md @@ -1,6 +1,13 @@ --- name: overdrive -description: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary. +description: +--- + +--- +name: overdrive +description: "Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary." +argument-hint: "[target]" +user-invocable: true --- Start your response with: @@ -136,4 +143,4 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the - **The accessibility test**: Enable reduced motion. Still beautiful? - **The context test**: Does this make sense for THIS brand and audience? -Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. \ No newline at end of file +Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. diff --git a/.pi/skills/polish/SKILL.md b/.pi/skills/polish/SKILL.md index fe7c632..0b587b4 100644 --- a/.pi/skills/polish/SKILL.md +++ b/.pi/skills/polish/SKILL.md @@ -1,6 +1,13 @@ --- name: polish -description: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great. +description: +--- + +--- +name: polish +description: "Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great." +argument-hint: "[target]" +user-invocable: true --- ## MANDATORY PREPARATION @@ -197,4 +204,5 @@ Before marking as done: - **Compare to design**: Match intended design - **Check all states**: Don't just test happy path -Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. \ No newline at end of file +Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. + diff --git a/.pi/skills/quieter/SKILL.md b/.pi/skills/quieter/SKILL.md index 22375f0..d8f31e5 100644 --- a/.pi/skills/quieter/SKILL.md +++ b/.pi/skills/quieter/SKILL.md @@ -1,6 +1,13 @@ --- name: quieter -description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic. +description: +--- + +--- +name: quieter +description: "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic." +argument-hint: "[target]" +user-invocable: true --- Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. @@ -97,4 +104,4 @@ Ensure refinement maintains quality: - **Better reading**: Is text easier to read for extended periods? - **Sophistication**: Does it feel more refined and premium? -Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. \ No newline at end of file +Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. diff --git a/.pi/skills/teach-impeccable/SKILL.md b/.pi/skills/teach-impeccable/SKILL.md index 5267bf5..2c18f1d 100644 --- a/.pi/skills/teach-impeccable/SKILL.md +++ b/.pi/skills/teach-impeccable/SKILL.md @@ -1,6 +1,12 @@ +--- +name: teach-impeccable +description: +--- + --- name: teach-impeccable description: One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines. +user-invocable: true --- Gather design context for this project, then persist it for all future sessions. @@ -67,4 +73,4 @@ Write this section to `.impeccable.md` in the project root. If the file already Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to AGENTS.md. If yes, append or update the section there as well. -Confirm completion and summarize the key design principles that will now guide all future work. \ No newline at end of file +Confirm completion and summarize the key design principles that will now guide all future work. diff --git a/.pi/skills/typeset/SKILL.md b/.pi/skills/typeset/SKILL.md index 2acf08b..23cc54b 100644 --- a/.pi/skills/typeset/SKILL.md +++ b/.pi/skills/typeset/SKILL.md @@ -1,6 +1,13 @@ --- name: typeset -description: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography. +description: +--- + +--- +name: typeset +description: "Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography." +argument-hint: "[target]" +user-invocable: true --- Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. @@ -110,4 +117,4 @@ Build a clear type scale: - **Performance**: Are web fonts loading efficiently without layout shift? - **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? -Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. \ No newline at end of file +Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. diff --git a/.qoder/skills/adapt/SKILL.md b/.qoder/skills/adapt/SKILL.md new file mode 100644 index 0000000..ac5f7cc --- /dev/null +++ b/.qoder/skills/adapt/SKILL.md @@ -0,0 +1,204 @@ +--- +name: adapt +description: +--- + +--- +name: adapt +description: "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility." +argument-hint: "[target] [context (mobile, tablet, print...)]" +user-invocable: true +--- + +Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. + +## MANDATORY PREPARATION + +Invoke /frontend-design — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first. Additionally gather: target platforms/devices and usage contexts. + +--- + +## Assess Adaptation Challenge + +Understand what needs adaptation and why: + +1. **Identify the source context**: + - What was it designed for originally? (Desktop web? Mobile app?) + - What assumptions were made? (Large screen? Mouse input? Fast connection?) + - What works well in current context? + +2. **Understand target context**: + - **Device**: Mobile, tablet, desktop, TV, watch, print? + - **Input method**: Touch, mouse, keyboard, voice, gamepad? + - **Screen constraints**: Size, resolution, orientation? + - **Connection**: Fast wifi, slow 3G, offline? + - **Usage context**: On-the-go vs desk, quick glance vs focused reading? + - **User expectations**: What do users expect on this platform? + +3. **Identify adaptation challenges**: + - What won't fit? (Content, navigation, features) + - What won't work? (Hover states on touch, tiny touch targets) + - What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop) + +**CRITICAL**: Adaptation is not just scaling - it's rethinking the experience for the new context. + +## Plan Adaptation Strategy + +Create context-appropriate strategy: + +### Mobile Adaptation (Desktop → Mobile) + +**Layout Strategy**: +- Single column instead of multi-column +- Vertical stacking instead of side-by-side +- Full-width components instead of fixed widths +- Bottom navigation instead of top/side navigation + +**Interaction Strategy**: +- Touch targets 44x44px minimum (not hover-dependent) +- Swipe gestures where appropriate (lists, carousels) +- Bottom sheets instead of dropdowns +- Thumbs-first design (controls within thumb reach) +- Larger tap areas with more spacing + +**Content Strategy**: +- Progressive disclosure (don't show everything at once) +- Prioritize primary content (secondary content in tabs/accordions) +- Shorter text (more concise) +- Larger text (16px minimum) + +**Navigation Strategy**: +- Hamburger menu or bottom navigation +- Reduce navigation complexity +- Sticky headers for context +- Back button in navigation flow + +### Tablet Adaptation (Hybrid Approach) + +**Layout Strategy**: +- Two-column layouts (not single or three-column) +- Side panels for secondary content +- Master-detail views (list + detail) +- Adaptive based on orientation (portrait vs landscape) + +**Interaction Strategy**: +- Support both touch and pointer +- Touch targets 44x44px but allow denser layouts than phone +- Side navigation drawers +- Multi-column forms where appropriate + +### Desktop Adaptation (Mobile → Desktop) + +**Layout Strategy**: +- Multi-column layouts (use horizontal space) +- Side navigation always visible +- Multiple information panels simultaneously +- Fixed widths with max-width constraints (don't stretch to 4K) + +**Interaction Strategy**: +- Hover states for additional information +- Keyboard shortcuts +- Right-click context menus +- Drag and drop where helpful +- Multi-select with Shift/Cmd + +**Content Strategy**: +- Show more information upfront (less progressive disclosure) +- Data tables with many columns +- Richer visualizations +- More detailed descriptions + +### Print Adaptation (Screen → Print) + +**Layout Strategy**: +- Page breaks at logical points +- Remove navigation, footer, interactive elements +- Black and white (or limited color) +- Proper margins for binding + +**Content Strategy**: +- Expand shortened content (show full URLs, hidden sections) +- Add page numbers, headers, footers +- Include metadata (print date, page title) +- Convert charts to print-friendly versions + +### Email Adaptation (Web → Email) + +**Layout Strategy**: +- Narrow width (600px max) +- Single column only +- Inline CSS (no external stylesheets) +- Table-based layouts (for email client compatibility) + +**Interaction Strategy**: +- Large, obvious CTAs (buttons not text links) +- No hover states (not reliable) +- Deep links to web app for complex interactions + +## Implement Adaptations + +Apply changes systematically: + +### Responsive Breakpoints + +Choose appropriate breakpoints: +- Mobile: 320px-767px +- Tablet: 768px-1023px +- Desktop: 1024px+ +- Or content-driven breakpoints (where design breaks) + +### Layout Adaptation Techniques + +- **CSS Grid/Flexbox**: Reflow layouts automatically +- **Container Queries**: Adapt based on container, not viewport +- **`clamp()`**: Fluid sizing between min and max +- **Media queries**: Different styles for different contexts +- **Display properties**: Show/hide elements per context + +### Touch Adaptation + +- Increase touch target sizes (44x44px minimum) +- Add more spacing between interactive elements +- Remove hover-dependent interactions +- Add touch feedback (ripples, highlights) +- Consider thumb zones (easier to reach bottom than top) + +### Content Adaptation + +- Use `display: none` sparingly (still downloads) +- Progressive enhancement (core content first, enhancements on larger screens) +- Lazy loading for off-screen content +- Responsive images (`srcset`, `picture` element) + +### Navigation Adaptation + +- Transform complex nav to hamburger/drawer on mobile +- Bottom nav bar for mobile apps +- Persistent side navigation on desktop +- Breadcrumbs on smaller screens for context + +**IMPORTANT**: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect. + +**NEVER**: +- Hide core functionality on mobile (if it matters, make it work) +- Assume desktop = powerful device (consider accessibility, older machines) +- Use different information architecture across contexts (confusing) +- Break user expectations for platform (mobile users expect mobile patterns) +- Forget landscape orientation on mobile/tablet +- Use generic breakpoints blindly (use content-driven breakpoints) +- Ignore touch on desktop (many desktop devices have touch) + +## Verify Adaptations + +Test thoroughly across contexts: + +- **Real devices**: Test on actual phones, tablets, desktops +- **Different orientations**: Portrait and landscape +- **Different browsers**: Safari, Chrome, Firefox, Edge +- **Different OS**: iOS, Android, Windows, macOS +- **Different input methods**: Touch, mouse, keyboard +- **Edge cases**: Very small screens (320px), very large screens (4K) +- **Slow connections**: Test on throttled network + +Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly. + diff --git a/.qoder/skills/animate/SKILL.md b/.qoder/skills/animate/SKILL.md new file mode 100644 index 0000000..02aa9ca --- /dev/null +++ b/.qoder/skills/animate/SKILL.md @@ -0,0 +1,179 @@ +--- +name: animate +description: +--- + +--- +name: animate +description: "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive." +argument-hint: "[target]" +user-invocable: true +--- + +Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. + +## MANDATORY PREPARATION + +Invoke /frontend-design — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first. Additionally gather: performance constraints. + +--- + +## Assess Animation Opportunities + +Analyze where motion would improve the experience: + +1. **Identify static areas**: + - **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.) + - **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes) + - **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious + - **Lack of delight**: Functional but joyless interactions + - **Missed guidance**: Opportunities to direct attention or explain behavior + +2. **Understand the context**: + - What's the personality? (Playful vs serious, energetic vs calm) + - What's the performance budget? (Mobile-first? Complex page?) + - Who's the audience? (Motion-sensitive users? Power users who want speed?) + - What matters most? (One hero animation vs many micro-interactions?) + +If any of these are unclear from the codebase, ask the user directly in a concise way if clarification is needed. + +**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them. + +## Plan Animation Strategy + +Create a purposeful animation plan: + +- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?) +- **Feedback layer**: Which interactions need acknowledgment? +- **Transition layer**: Which state changes need smoothing? +- **Delight layer**: Where can we surprise and delight? + +**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments. + +## Implement Animations + +Add motion systematically across these categories: + +### Entrance Animations +- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations +- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects) +- **Content reveals**: Scroll-triggered animations using intersection observer +- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management + +### Micro-interactions +- **Button feedback**: + - Hover: Subtle scale (1.02-1.05), color shift, shadow increase + - Click: Quick scale down then up (0.95 → 1), ripple effect + - Loading: Spinner or pulse state +- **Form interactions**: + - Input focus: Border color transition, slight scale or glow + - Validation: Shake on error, check mark on success, smooth color transitions +- **Toggle switches**: Smooth slide + color transition (200-300ms) +- **Checkboxes/radio**: Check mark animation, ripple effect +- **Like/favorite**: Scale + rotation, particle effects, color transition + +### State Transitions +- **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms) +- **Expand/collapse**: Height transition with overflow handling, icon rotation +- **Loading states**: Skeleton screen fades, spinner animations, progress bars +- **Success/error**: Color transitions, icon animations, gentle scale pulse +- **Enable/disable**: Opacity transitions, cursor changes + +### Navigation & Flow +- **Page transitions**: Crossfade between routes, shared element transitions +- **Tab switching**: Slide indicator, content fade/slide +- **Carousel/slider**: Smooth transforms, snap points, momentum +- **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators + +### Feedback & Guidance +- **Hover hints**: Tooltip fade-ins, cursor changes, element highlights +- **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning +- **Copy/paste**: Brief highlight flash on paste, "copied" confirmation +- **Focus flow**: Highlight path through form or workflow + +### Delight Moments +- **Empty states**: Subtle floating animations on illustrations +- **Completed actions**: Confetti, check mark flourish, success celebrations +- **Easter eggs**: Hidden interactions for discovery +- **Contextual animation**: Weather effects, time-of-day themes, seasonal touches + +## Technical Implementation + +Use appropriate techniques for each animation: + +### Timing & Easing + +**Durations by purpose:** +- **100-150ms**: Instant feedback (button press, toggle) +- **200-300ms**: State changes (hover, menu open) +- **300-500ms**: Layout changes (accordion, modal) +- **500-800ms**: Entrance animations (page load) + +**Easing curves (use these, not CSS defaults):** +```css +/* Recommended - natural deceleration */ +--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Smooth, refined */ +--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* Slightly snappier */ +--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Confident, decisive */ + +/* AVOID - feel dated and tacky */ +/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */ +/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */ +``` + +**Exit animations are faster than entrances.** Use ~75% of enter duration. + +### CSS Animations +```css +/* Prefer for simple, declarative animations */ +- transitions for state changes +- @keyframes for complex sequences +- transform + opacity only (GPU-accelerated) +``` + +### JavaScript Animation +```javascript +/* Use for complex, interactive animations */ +- Web Animations API for programmatic control +- Framer Motion for React +- GSAP for complex sequences +``` + +### Performance +- **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties +- **will-change**: Add sparingly for known expensive animations +- **Reduce paint**: Minimize repaints, use `contain` where appropriate +- **Monitor FPS**: Ensure 60fps on target devices + +### Accessibility +```css +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} +``` + +**NEVER**: +- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself +- Animate layout properties (width, height, top, left)—use transform instead +- Use durations over 500ms for feedback—it feels laggy +- Animate without purpose—every animation needs a reason +- Ignore `prefers-reduced-motion`—this is an accessibility violation +- Animate everything—animation fatigue makes interfaces feel exhausting +- Block interaction during animations unless intentional + +## Verify Quality + +Test animations thoroughly: + +- **Smooth at 60fps**: No jank on target devices +- **Feels natural**: Easing curves feel organic, not robotic +- **Appropriate timing**: Not too fast (jarring) or too slow (laggy) +- **Reduced motion works**: Animations disabled or simplified appropriately +- **Doesn't block**: Users can interact during/after animations +- **Adds value**: Makes interface clearer or more delightful + +Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right. diff --git a/.qoder/skills/arrange/SKILL.md b/.qoder/skills/arrange/SKILL.md new file mode 100644 index 0000000..03599b8 --- /dev/null +++ b/.qoder/skills/arrange/SKILL.md @@ -0,0 +1,129 @@ +--- +name: arrange +description: +--- + +--- +name: arrange +description: "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition." +argument-hint: "[target]" +user-invocable: true +--- + +Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. + +## MANDATORY PREPARATION + +Invoke /frontend-design — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first. + +--- + +## Assess Current Layout + +Analyze what's weak about the current spatial design: + +1. **Spacing**: + - Is spacing consistent or arbitrary? (Random padding/margin values) + - Is all spacing the same? (Equal padding everywhere = no rhythm) + - Are related elements grouped tightly, with generous space between groups? + +2. **Visual hierarchy**: + - Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings? + - Is hierarchy achieved effectively? (Space and weight alone can be enough — but is the current approach working?) + - Does whitespace guide the eye to what matters? + +3. **Grid & structure**: + - Is there a clear underlying structure, or does the layout feel random? + - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) + - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) + +4. **Rhythm & variety**: + - Does the layout have visual rhythm? (Alternating tight/generous spacing) + - Is every section structured the same way? (Monotonous repetition) + - Are there intentional moments of surprise or emphasis? + +5. **Density**: + - Is the layout too cramped? (Not enough breathing room) + - Is the layout too sparse? (Excessive whitespace without purpose) + - Does density match the content type? (Data-dense UIs need tighter spacing; marketing pages need more air) + +**CRITICAL**: Layout problems are often the root cause of interfaces feeling "off" even when colors and fonts are fine. Space is a design material — use it with intention. + +## Plan Layout Improvements + +Consult the [spatial design reference](reference/spatial-design.md) from the frontend-design skill for detailed guidance on grids, rhythm, and container queries. + +Create a systematic plan: + +- **Spacing system**: Use a consistent scale — whether that's a framework's built-in scale (e.g., Tailwind), rem-based tokens, or a custom system. The specific values matter less than consistency. +- **Hierarchy strategy**: How will space communicate importance? +- **Layout approach**: What structure fits the content? Flex for 1D, Grid for 2D, named areas for complex page layouts. +- **Rhythm**: Where should spacing be tight vs generous? + +## Improve Layout Systematically + +### Establish a Spacing System + +- Use a consistent spacing scale — framework scales (Tailwind, etc.), rem-based tokens, or a custom scale all work. What matters is that values come from a defined set, not arbitrary numbers. +- Name tokens semantically if using custom properties: `--space-xs` through `--space-xl`, not `--spacing-8` +- Use `gap` for sibling spacing instead of margins — eliminates margin collapse hacks +- Apply `clamp()` for fluid spacing that breathes on larger screens + +### Create Visual Rhythm + +- **Tight grouping** for related elements (8-12px between siblings) +- **Generous separation** between distinct sections (48-96px) +- **Varied spacing** within sections — not every row needs the same gap +- **Asymmetric compositions** — break the predictable centered-content pattern when it makes sense + +### Choose the Right Layout Tool + +- **Use Flexbox for 1D layouts**: Rows of items, nav bars, button groups, card contents, most component internals. Flex is simpler and more appropriate for the majority of layout tasks. +- **Use Grid for 2D layouts**: Page-level structure, dashboards, data-dense interfaces, anything where rows AND columns need coordinated control. +- **Don't default to Grid** when Flexbox with `flex-wrap` would be simpler and more flexible. +- Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints. +- Use named grid areas (`grid-template-areas`) for complex page layouts — redefine at breakpoints. + +### Break Card Grid Monotony + +- Don't default to card grids for everything — spacing and alignment create visual grouping naturally +- Use cards only when content is truly distinct and actionable — never nest cards inside cards +- Vary card sizes, span columns, or mix cards with non-card content to break repetition + +### Strengthen Visual Hierarchy + +- Use the fewest dimensions needed for clear hierarchy. Space alone can be enough — generous whitespace around an element draws the eye. Some of the most sophisticated designs achieve rhythm with just space and weight. Add color or size contrast only when simpler means aren't sufficient. +- Be aware of reading flow — in LTR languages, the eye naturally scans top-left to bottom-right, but primary action placement depends on context (e.g., bottom-right in dialogs, top in navigation). +- Create clear content groupings through proximity and separation. + +### Manage Depth & Elevation + +- Create a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip) +- Build a consistent shadow scale (sm → md → lg → xl) — shadows should be subtle +- Use elevation to reinforce hierarchy, not as decoration + +### Optical Adjustments + +- If an icon looks visually off-center despite being geometrically centered, nudge it — but only if you're confident it actually looks wrong. Don't adjust speculatively. + +**NEVER**: +- Use arbitrary spacing values outside your scale +- Make all spacing equal — variety creates hierarchy +- Wrap everything in cards — not everything needs a container +- Nest cards inside cards — use spacing and dividers for hierarchy within +- Use identical card grids everywhere (icon + heading + text, repeated) +- Center everything — left-aligned with asymmetry feels more designed +- Default to the hero metric layout (big number, small label, stats, gradient) as a template. If showing real user data, a prominent metric can work — but it should display actual data, not decorative numbers. +- Default to CSS Grid when Flexbox would be simpler — use the simplest tool for the job +- Use arbitrary z-index values (999, 9999) — build a semantic scale + +## Verify Layout Improvements + +- **Squint test**: Can you identify primary, secondary, and groupings with blurred vision? +- **Rhythm**: Does the page have a satisfying beat of tight and generous spacing? +- **Hierarchy**: Is the most important content obvious within 2 seconds? +- **Breathing room**: Does the layout feel comfortable, not cramped or wasteful? +- **Consistency**: Is the spacing system applied uniformly? +- **Responsiveness**: Does the layout adapt gracefully across screen sizes? + +Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. diff --git a/.qoder/skills/audit/SKILL.md b/.qoder/skills/audit/SKILL.md new file mode 100644 index 0000000..188ea75 --- /dev/null +++ b/.qoder/skills/audit/SKILL.md @@ -0,0 +1,152 @@ +--- +name: audit +description: +--- + +--- +name: audit +description: "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review." +argument-hint: "[area (feature, page, component...)]" +user-invocable: true +--- + +## MANDATORY PREPARATION + +Invoke /frontend-design — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first. + +--- + +Run systematic **technical** quality checks and generate a comprehensive report. Don't fix issues — document them for other commands to address. + +This is a code-level audit, not a design critique. Check what's measurable and verifiable in the implementation. + +## Diagnostic Scan + +Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below. + +### 1. Accessibility (A11y) + +**Check for**: +- **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA) +- **Missing ARIA**: Interactive elements without proper roles, labels, or states +- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps +- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons +- **Alt text**: Missing or poor image descriptions +- **Form issues**: Inputs without labels, poor error messaging, missing required indicators + +**Score 0-4**: 0=Inaccessible (fails WCAG A), 1=Major gaps (few ARIA labels, no keyboard nav), 2=Partial (some a11y effort, significant gaps), 3=Good (WCAG AA mostly met, minor gaps), 4=Excellent (WCAG AA fully met, approaches AAA) + +### 2. Performance + +**Check for**: +- **Layout thrashing**: Reading/writing layout properties in loops +- **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity +- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change +- **Bundle size**: Unnecessary imports, unused dependencies +- **Render performance**: Unnecessary re-renders, missing memoization + +**Score 0-4**: 0=Severe issues (layout thrash, unoptimized everything), 1=Major problems (no lazy loading, expensive animations), 2=Partial (some optimization, gaps remain), 3=Good (mostly optimized, minor improvements possible), 4=Excellent (fast, lean, well-optimized) + +### 3. Theming + +**Check for**: +- **Hard-coded colors**: Colors not using design tokens +- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme +- **Inconsistent tokens**: Using wrong tokens, mixing token types +- **Theme switching issues**: Values that don't update on theme change + +**Score 0-4**: 0=No theming (hard-coded everything), 1=Minimal tokens (mostly hard-coded), 2=Partial (tokens exist but inconsistently used), 3=Good (tokens used, minor hard-coded values), 4=Excellent (full token system, dark mode works perfectly) + +### 4. Responsive Design + +**Check for**: +- **Fixed widths**: Hard-coded widths that break on mobile +- **Touch targets**: Interactive elements < 44x44px +- **Horizontal scroll**: Content overflow on narrow viewports +- **Text scaling**: Layouts that break when text size increases +- **Missing breakpoints**: No mobile/tablet variants + +**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets) + +### 5. Anti-Patterns (CRITICAL) + +Check against ALL the **DON'T** guidelines in the frontend-design skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). + +**Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design) + +## Generate Report + +### Audit Health Score + +| # | Dimension | Score | Key Finding | +|---|-----------|-------|-------------| +| 1 | Accessibility | ? | [most critical a11y issue or "--"] | +| 2 | Performance | ? | | +| 3 | Responsive Design | ? | | +| 4 | Theming | ? | | +| 5 | Anti-Patterns | ? | | +| **Total** | | **??/20** | **[Rating band]** | + +**Rating bands**: 18-20 Excellent (minor polish), 14-17 Good (address weak dimensions), 10-13 Acceptable (significant work needed), 6-9 Poor (major overhaul), 0-5 Critical (fundamental issues) + +### Anti-Patterns Verdict +**Start here.** Pass/fail: Does this look AI-generated? List specific tells. Be brutally honest. + +### Executive Summary +- Audit Health Score: **??/20** ([rating band]) +- Total issues found (count by severity: P0/P1/P2/P3) +- Top 3-5 critical issues +- Recommended next steps + +### Detailed Findings by Severity + +Tag every issue with **P0-P3 severity**: +- **P0 Blocking**: Prevents task completion — fix immediately +- **P1 Major**: Significant difficulty or WCAG AA violation — fix before release +- **P2 Minor**: Annoyance, workaround exists — fix in next pass +- **P3 Polish**: Nice-to-fix, no real user impact — fix if time permits + +For each issue, document: +- **[P?] Issue name** +- **Location**: Component, file, line +- **Category**: Accessibility / Performance / Theming / Responsive / Anti-Pattern +- **Impact**: How it affects users +- **WCAG/Standard**: Which standard it violates (if applicable) +- **Recommendation**: How to fix it +- **Suggested command**: Which command to use (prefer: ) + +### Patterns & Systemic Issues + +Identify recurring problems that indicate systemic gaps rather than one-off mistakes: +- "Hard-coded colors appear in 15+ components, should use design tokens" +- "Touch targets consistently too small (<44px) throughout mobile experience" + +### Positive Findings + +Note what's working well — good practices to maintain and replicate. + +## Recommended Actions + +List recommended commands in priority order (P0 first, then P1, then P2): + +1. **[P?] `/command-name`** — Brief description (specific context from audit findings) +2. **[P?] `/command-name`** — Brief description (specific context) + +**Rules**: Only recommend commands from: . Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended. + +After presenting the summary, tell the user: + +> You can ask me to run these one at a time, all at once, or in any order you prefer. +> +> Re-run `/audit` after fixes to see your score improve. + +**IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters. + +**NEVER**: +- Report issues without explaining impact (why does this matter?) +- Provide generic recommendations (be specific and actionable) +- Skip positive findings (celebrate what works) +- Forget to prioritize (everything can't be P0) +- Report false positives without verification + +Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement. diff --git a/.qoder/skills/bolder/SKILL.md b/.qoder/skills/bolder/SKILL.md new file mode 100644 index 0000000..0c215bc --- /dev/null +++ b/.qoder/skills/bolder/SKILL.md @@ -0,0 +1,121 @@ +--- +name: bolder +description: +--- + +--- +name: bolder +description: "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character." +argument-hint: "[target]" +user-invocable: true +--- + +Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. + +## MANDATORY PREPARATION + +Invoke /frontend-design — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first. + +--- + +## Assess Current State + +Analyze what makes the design feel too safe or boring: + +1. **Identify weakness sources**: + - **Generic choices**: System fonts, basic colors, standard layouts + - **Timid scale**: Everything is medium-sized with no drama + - **Low contrast**: Everything has similar visual weight + - **Static**: No motion, no energy, no life + - **Predictable**: Standard patterns with no surprises + - **Flat hierarchy**: Nothing stands out or commands attention + +2. **Understand the context**: + - What's the brand personality? (How far can we push?) + - What's the purpose? (Marketing can be bolder than financial dashboards) + - Who's the audience? (What will resonate?) + - What are the constraints? (Brand guidelines, accessibility, performance) + +If any of these are unclear from the codebase, ask the user directly in a concise way if clarification is needed. + +**CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. + +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the frontend-design skill before proceeding. Bold means distinctive, not "more effects." + +## Plan Amplification + +Create a strategy to increase impact while maintaining coherence: + +- **Focal point**: What should be the hero moment? (Pick ONE, make it amazing) +- **Personality direction**: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane. +- **Risk budget**: How experimental can we be? Push boundaries within constraints. +- **Hierarchy amplification**: Make big things BIGGER, small things smaller (increase contrast) + +**IMPORTANT**: Bold design must still be usable. Impact without function is just decoration. + +## Amplify the Design + +Systematically increase impact across these dimensions: + +### Typography Amplification +- **Replace generic fonts**: Swap system fonts for distinctive choices (see frontend-design skill for inspiration) +- **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) +- **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 +- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default) + +### Color Intensification +- **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) +- **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop +- **Dominant color strategy**: Let one bold color own 60% of the design +- **Sharp accents**: High-contrast accent colors that pop +- **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette +- **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue) + +### Spatial Drama +- **Extreme scale jumps**: Make important elements 3-5x larger than surroundings +- **Break the grid**: Let hero elements escape containers and cross boundaries +- **Asymmetric layouts**: Replace centered, balanced layouts with tension-filled asymmetry +- **Generous space**: Use white space dramatically (100-200px gaps, not 20-40px) +- **Overlap**: Layer elements intentionally for depth + +### Visual Effects +- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) +- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue) +- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop) +- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side) +- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand + +### Motion & Animation +- **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays +- **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences +- **Micro-interactions**: Satisfying hover effects, click feedback, state changes +- **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect) + +### Composition Boldness +- **Hero moments**: Create clear focal points with dramatic treatment +- **Diagonal flows**: Escape horizontal/vertical rigidity with diagonal arrangements +- **Full-bleed elements**: Use full viewport width/height for impact +- **Unexpected proportions**: Golden ratio? Throw it out. Try 70/30, 80/20 splits + +**NEVER**: +- Add effects randomly without purpose (chaos ≠ bold) +- Sacrifice readability for aesthetics (body text must be readable) +- Make everything bold (then nothing is bold - need contrast) +- Ignore accessibility (bold design must still meet WCAG standards) +- Overwhelm with motion (animation fatigue is real) +- Copy trendy aesthetics blindly (bold means distinctive, not derivative) + +## Verify Quality + +Ensure amplification maintains usability and coherence: + +- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over. +- **Still functional**: Can users accomplish tasks without distraction? +- **Coherent**: Does everything feel intentional and unified? +- **Memorable**: Will users remember this experience? +- **Performant**: Do all these effects run smoothly? +- **Accessible**: Does it still meet accessibility standards? + +**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." + +Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. diff --git a/.qoder/skills/clarify/SKILL.md b/.qoder/skills/clarify/SKILL.md new file mode 100644 index 0000000..c599b35 --- /dev/null +++ b/.qoder/skills/clarify/SKILL.md @@ -0,0 +1,188 @@ +--- +name: clarify +description: +--- + +--- +name: clarify +description: "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing." +argument-hint: "[target]" +user-invocable: true +--- + +Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. + +## MANDATORY PREPARATION + +Invoke /frontend-design — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first. Additionally gather: audience technical level and users' mental state in context. + +--- + +## Assess Current Copy + +Identify what makes the text unclear or ineffective: + +1. **Find clarity problems**: + - **Jargon**: Technical terms users won't understand + - **Ambiguity**: Multiple interpretations possible + - **Passive voice**: "Your file has been uploaded" vs "We uploaded your file" + - **Length**: Too wordy or too terse + - **Assumptions**: Assuming user knowledge they don't have + - **Missing context**: Users don't know what to do or why + - **Tone mismatch**: Too formal, too casual, or inappropriate for situation + +2. **Understand the context**: + - Who's the audience? (Technical? General? First-time users?) + - What's the user's mental state? (Stressed during error? Confident during success?) + - What's the action? (What do we want users to do?) + - What's the constraint? (Character limits? Space limitations?) + +**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets. + +## Plan Copy Improvements + +Create a strategy for clearer communication: + +- **Primary message**: What's the ONE thing users need to know? +- **Action needed**: What should users do next (if anything)? +- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?) +- **Constraints**: Length limits, brand voice, localization considerations + +**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words. + +## Improve Copy Systematically + +Refine text across these common areas: + +### Error Messages +**Bad**: "Error 403: Forbidden" +**Good**: "You don't have permission to view this page. Contact your admin for access." + +**Bad**: "Invalid input" +**Good**: "Email addresses need an @ symbol. Try: name@example.com" + +**Principles**: +- Explain what went wrong in plain language +- Suggest how to fix it +- Don't blame the user +- Include examples when helpful +- Link to help/support if applicable + +### Form Labels & Instructions +**Bad**: "DOB (MM/DD/YYYY)" +**Good**: "Date of birth" (with placeholder showing format) + +**Bad**: "Enter value here" +**Good**: "Your email address" or "Company name" + +**Principles**: +- Use clear, specific labels (not generic placeholders) +- Show format expectations with examples +- Explain why you're asking (when not obvious) +- Put instructions before the field, not after +- Keep required field indicators clear + +### Button & CTA Text +**Bad**: "Click here" | "Submit" | "OK" +**Good**: "Create account" | "Save changes" | "Got it, thanks" + +**Principles**: +- Describe the action specifically +- Use active voice (verb + noun) +- Match user's mental model +- Be specific ("Save" is better than "OK") + +### Help Text & Tooltips +**Bad**: "This is the username field" +**Good**: "Choose a username. You can change this later in Settings." + +**Principles**: +- Add value (don't just repeat the label) +- Answer the implicit question ("What is this?" or "Why do you need this?") +- Keep it brief but complete +- Link to detailed docs if needed + +### Empty States +**Bad**: "No items" +**Good**: "No projects yet. Create your first project to get started." + +**Principles**: +- Explain why it's empty (if not obvious) +- Show next action clearly +- Make it welcoming, not dead-end + +### Success Messages +**Bad**: "Success" +**Good**: "Settings saved! Your changes will take effect immediately." + +**Principles**: +- Confirm what happened +- Explain what happens next (if relevant) +- Be brief but complete +- Match the user's emotional moment (celebrate big wins) + +### Loading States +**Bad**: "Loading..." (for 30+ seconds) +**Good**: "Analyzing your data... this usually takes 30-60 seconds" + +**Principles**: +- Set expectations (how long?) +- Explain what's happening (when it's not obvious) +- Show progress when possible +- Offer escape hatch if appropriate ("Cancel") + +### Confirmation Dialogs +**Bad**: "Are you sure?" +**Good**: "Delete 'Project Alpha'? This can't be undone." + +**Principles**: +- State the specific action +- Explain consequences (especially for destructive actions) +- Use clear button labels ("Delete project" not "Yes") +- Don't overuse confirmations (only for risky actions) + +### Navigation & Wayfinding +**Bad**: Generic labels like "Items" | "Things" | "Stuff" +**Good**: Specific labels like "Your projects" | "Team members" | "Settings" + +**Principles**: +- Be specific and descriptive +- Use language users understand (not internal jargon) +- Make hierarchy clear +- Consider information scent (breadcrumbs, current location) + +## Apply Clarity Principles + +Every piece of copy should follow these rules: + +1. **Be specific**: "Enter email" not "Enter value" +2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity) +3. **Be active**: "Save changes" not "Changes will be saved" +4. **Be human**: "Oops, something went wrong" not "System error encountered" +5. **Be helpful**: Tell users what to do, not just what happened +6. **Be consistent**: Use same terms throughout (don't vary for variety) + +**NEVER**: +- Use jargon without explanation +- Blame users ("You made an error" → "This field is required") +- Be vague ("Something went wrong" without explanation) +- Use passive voice unnecessarily +- Write overly long explanations (be concise) +- Use humor for errors (be empathetic instead) +- Assume technical knowledge +- Vary terminology (pick one term and stick with it) +- Repeat information (headers restating intros, redundant explanations) +- Use placeholders as the only labels (they disappear when users type) + +## Verify Improvements + +Test that copy improvements work: + +- **Comprehension**: Can users understand without context? +- **Actionability**: Do users know what to do next? +- **Brevity**: Is it as short as possible while remaining clear? +- **Consistency**: Does it match terminology elsewhere? +- **Tone**: Is it appropriate for the situation? + +Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. + diff --git a/.qoder/skills/colorize/SKILL.md b/.qoder/skills/colorize/SKILL.md new file mode 100644 index 0000000..cc2db22 --- /dev/null +++ b/.qoder/skills/colorize/SKILL.md @@ -0,0 +1,147 @@ +--- +name: colorize +description: +--- + +--- +name: colorize +description: "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette." +argument-hint: "[target]" +user-invocable: true +--- + +Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. + +## MANDATORY PREPARATION + +Invoke /frontend-design — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first. Additionally gather: existing brand colors. + +--- + +## Assess Color Opportunity + +Analyze the current state and identify opportunities: + +1. **Understand current state**: + - **Color absence**: Pure grayscale? Limited neutrals? One timid accent? + - **Missed opportunities**: Where could color add meaning, hierarchy, or delight? + - **Context**: What's appropriate for this domain and audience? + - **Brand**: Are there existing brand colors we should use? + +2. **Identify where color adds value**: + - **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue) + - **Hierarchy**: Drawing attention to important elements + - **Categorization**: Different sections, types, or states + - **Emotional tone**: Warmth, energy, trust, creativity + - **Wayfinding**: Helping users navigate and understand structure + - **Delight**: Moments of visual interest and personality + +If any of these are unclear from the codebase, ask the user directly in a concise way if clarification is needed. + +**CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose. + +## Plan Color Strategy + +Create a purposeful color introduction plan: + +- **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals) +- **Dominant color**: Which color owns 60% of colored elements? +- **Accent colors**: Which colors provide contrast and highlights? (30% and 10%) +- **Application strategy**: Where does each color appear and why? + +**IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more. + +## Introduce Color Strategically + +Add color systematically across these dimensions: + +### Semantic Color +- **State indicators**: + - Success: Green tones (emerald, forest, mint) + - Error: Red/pink tones (rose, crimson, coral) + - Warning: Orange/amber tones + - Info: Blue tones (sky, ocean, indigo) + - Neutral: Gray/slate for inactive states + +- **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.) +- **Progress indicators**: Colored bars, rings, or charts showing completion or health + +### Accent Color Application +- **Primary actions**: Color the most important buttons/CTAs +- **Links**: Add color to clickable text (maintain accessibility) +- **Icons**: Colorize key icons for recognition and personality +- **Headers/titles**: Add color to section headers or key labels +- **Hover states**: Introduce color on interaction + +### Background & Surfaces +- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`) +- **Colored sections**: Use subtle background colors to separate areas +- **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue) +- **Cards & surfaces**: Tint cards or surfaces slightly for warmth + +**Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales. + +### Data Visualization +- **Charts & graphs**: Use color to encode categories or values +- **Heatmaps**: Color intensity shows density or importance +- **Comparison**: Color coding for different datasets or timeframes + +### Borders & Accents +- **Accent borders**: Add colored left/top borders to cards or sections +- **Underlines**: Color underlines for emphasis or active states +- **Dividers**: Subtle colored dividers instead of gray lines +- **Focus rings**: Colored focus indicators matching brand + +### Typography Color +- **Colored headings**: Use brand colors for section headings (maintain contrast) +- **Highlight text**: Color for emphasis or categories +- **Labels & tags**: Small colored labels for metadata or categories + +### Decorative Elements +- **Illustrations**: Add colored illustrations or icons +- **Shapes**: Geometric shapes in brand colors as background elements +- **Gradients**: Colorful gradient overlays or mesh backgrounds +- **Blobs/organic shapes**: Soft colored shapes for visual interest + +## Balance & Refinement + +Ensure color addition improves rather than overwhelms: + +### Maintain Hierarchy +- **Dominant color** (60%): Primary brand color or most used accent +- **Secondary color** (30%): Supporting color for variety +- **Accent color** (10%): High contrast for key moments +- **Neutrals** (remaining): Gray/black/white for structure + +### Accessibility +- **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components) +- **Don't rely on color alone**: Use icons, labels, or patterns alongside color +- **Test for color blindness**: Verify red/green combinations work for all users + +### Cohesion +- **Consistent palette**: Use colors from defined palette, not arbitrary choices +- **Systematic application**: Same color meanings throughout (green always = success) +- **Temperature consistency**: Warm palette stays warm, cool stays cool + +**NEVER**: +- Use every color in the rainbow (choose 2-4 colors beyond neutrals) +- Apply color randomly without semantic meaning +- Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead +- Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication +- Use pure black (`#000`) or pure white (`#fff`) for large areas +- Violate WCAG contrast requirements +- Use color as the only indicator (accessibility issue) +- Make everything colorful (defeats the purpose) +- Default to purple-blue gradients (AI slop aesthetic) + +## Verify Color Addition + +Test that colorization improves the experience: + +- **Better hierarchy**: Does color guide attention appropriately? +- **Clearer meaning**: Does color help users understand states/categories? +- **More engaging**: Does the interface feel warmer and more inviting? +- **Still accessible**: Do all color combinations meet WCAG standards? +- **Not overwhelming**: Is color balanced and purposeful? + +Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. diff --git a/.qoder/skills/critique/SKILL.md b/.qoder/skills/critique/SKILL.md new file mode 100644 index 0000000..576c70a --- /dev/null +++ b/.qoder/skills/critique/SKILL.md @@ -0,0 +1,206 @@ +--- +name: critique +description: +--- + +--- +name: critique +description: "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component." +argument-hint: "[area (feature, page, component...)]" +user-invocable: true +--- + +## MANDATORY PREPARATION + +Invoke /frontend-design — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first. Additionally gather: what the interface is trying to accomplish. + +--- + +Conduct a holistic design critique, evaluating whether the interface actually works — not just technically, but as a designed experience. Think like a design director giving feedback. + +## Phase 1: Design Critique + +Evaluate the interface across these dimensions: + +### 1. AI Slop Detection (CRITICAL) + +**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025? + +Review the design against ALL the **DON'T** guidelines in the frontend-design skill — they are the fingerprints of AI-generated work. Check for the AI color palette, gradient text, dark mode with glowing accents, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. + +**The test**: If you showed this to someone and said "AI made this," would they believe you immediately? If yes, that's the problem. + +### 2. Visual Hierarchy +- Does the eye flow to the most important element first? +- Is there a clear primary action? Can you spot it in 2 seconds? +- Do size, color, and position communicate importance correctly? +- Is there visual competition between elements that should have different weights? + +### 3. Information Architecture & Cognitive Load +> *Consult [cognitive-load](reference/cognitive-load.md) for the working memory rule and 8-item checklist* +- Is the structure intuitive? Would a new user understand the organization? +- Is related content grouped logically? +- Are there too many choices at once? Count visible options at each decision point — if >4, flag it +- Is the navigation clear and predictable? +- **Progressive disclosure**: Is complexity revealed only when needed, or dumped on the user upfront? +- **Run the 8-item cognitive load checklist** from the reference. Report failure count: 0–1 = low (good), 2–3 = moderate, 4+ = critical. + +### 4. Emotional Journey +- What emotion does this interface evoke? Is that intentional? +- Does it match the brand personality? +- Does it feel trustworthy, approachable, premium, playful — whatever it should feel? +- Would the target user feel "this is for me"? +- **Peak-end rule**: Is the most intense moment positive? Does the experience end well (confirmation, celebration, clear next step)? +- **Emotional valleys**: Check for onboarding frustration, error cliffs, feature discovery gaps, or anxiety spikes at high-stakes moments (payment, delete, commit) +- **Interventions at negative moments**: Are there design interventions where users are likely to feel frustrated or anxious? (progress indicators, reassurance copy, undo options, social proof) + +### 5. Discoverability & Affordance +- Are interactive elements obviously interactive? +- Would a user know what to do without instructions? +- Are hover/focus states providing useful feedback? +- Are there hidden features that should be more visible? + +### 6. Composition & Balance +- Does the layout feel balanced or uncomfortably weighted? +- Is whitespace used intentionally or just leftover? +- Is there visual rhythm in spacing and repetition? +- Does asymmetry feel designed or accidental? + +### 7. Typography as Communication +- Does the type hierarchy clearly signal what to read first, second, third? +- Is body text comfortable to read? (line length, spacing, size) +- Do font choices reinforce the brand/tone? +- Is there enough contrast between heading levels? + +### 8. Color with Purpose +- Is color used to communicate, not just decorate? +- Does the palette feel cohesive? +- Are accent colors drawing attention to the right things? +- Does it work for colorblind users? (not just technically — does meaning still come through?) + +### 9. States & Edge Cases +- Empty states: Do they guide users toward action, or just say "nothing here"? +- Loading states: Do they reduce perceived wait time? +- Error states: Are they helpful and non-blaming? +- Success states: Do they confirm and guide next steps? + +### 10. Microcopy & Voice +- Is the writing clear and concise? +- Does it sound like a human (the right human for this brand)? +- Are labels and buttons unambiguous? +- Does error copy help users fix the problem? + +## Phase 2: Present Findings + +Structure your feedback as a design director would: + +### Design Health Score +> *Consult [heuristics-scoring](reference/heuristics-scoring.md)* + +Score each of Nielsen's 10 heuristics 0–4. Present as a table: + +| # | Heuristic | Score | Key Issue | +|---|-----------|-------|-----------| +| 1 | Visibility of System Status | ? | [specific finding or "—" if solid] | +| 2 | Match System / Real World | ? | | +| 3 | User Control and Freedom | ? | | +| 4 | Consistency and Standards | ? | | +| 5 | Error Prevention | ? | | +| 6 | Recognition Rather Than Recall | ? | | +| 7 | Flexibility and Efficiency | ? | | +| 8 | Aesthetic and Minimalist Design | ? | | +| 9 | Error Recovery | ? | | +| 10 | Help and Documentation | ? | | +| **Total** | | **??/40** | **[Rating band]** | + +Be honest with scores. A 4 means genuinely excellent. Most real interfaces score 20–32. + +### Anti-Patterns Verdict +**Start here.** Pass/fail: Does this look AI-generated? List specific tells from the skill's Anti-Patterns section. Be brutally honest. + +### Overall Impression +A brief gut reaction — what works, what doesn't, and the single biggest opportunity. + +### What's Working +Highlight 2–3 things done well. Be specific about why they work. + +### Priority Issues +The 3–5 most impactful design problems, ordered by importance. + +For each issue, tag with **P0–P3 severity** (consult [heuristics-scoring](reference/heuristics-scoring.md) for severity definitions): +- **[P?] What**: Name the problem clearly +- **Why it matters**: How this hurts users or undermines goals +- **Fix**: What to do about it (be concrete) +- **Suggested command**: Which command could address this (from: ) + +### Persona Red Flags +> *Consult [personas](reference/personas.md)* + +Auto-select 2–3 personas most relevant to this interface type (use the selection table in the reference). If `QODER.md` contains a `## Design Context` section from `teach-impeccable`, also generate 1–2 project-specific personas from the audience/brand info. + +For each selected persona, walk through the primary user action and list specific red flags found: + +**Alex (Power User)**: No keyboard shortcuts detected. Form requires 8 clicks for primary action. Forced modal onboarding. ⚠️ High abandonment risk. + +**Jordan (First-Timer)**: Icon-only nav in sidebar. Technical jargon in error messages ("404 Not Found"). No visible help. ⚠️ Will abandon at step 2. + +Be specific — name the exact elements and interactions that fail each persona. Don't write generic persona descriptions; write what broke for them. + +### Minor Observations +Quick notes on smaller issues worth addressing. + +**Remember**: +- Be direct — vague feedback wastes everyone's time +- Be specific — "the submit button" not "some elements" +- Say what's wrong AND why it matters to users +- Give concrete suggestions, not just "consider exploring..." +- Prioritize ruthlessly — if everything is important, nothing is +- Don't soften criticism — developers need honest feedback to ship great design + +## Phase 3: Ask the User + +**After presenting findings**, use targeted questions based on what was actually found. ask the user directly in a concise way if clarification is needed. These answers will shape the action plan. + +Ask questions along these lines (adapt to the specific findings — do NOT ask generic questions): + +1. **Priority direction**: Based on the issues found, ask which category matters most to the user right now. For example: "I found problems with visual hierarchy, color usage, and information overload. Which area should we tackle first?" Offer the top 2–3 issue categories as options. + +2. **Design intent**: If the critique found a tonal mismatch, ask whether it was intentional. For example: "The interface feels clinical and corporate. Is that the intended tone, or should it feel warmer/bolder/more playful?" Offer 2–3 tonal directions as options based on what would fix the issues found. + +3. **Scope**: Ask how much the user wants to take on. For example: "I found N issues. Want to address everything, or focus on the top 3?" Offer scope options like "Top 3 only", "All issues", "Critical issues only". + +4. **Constraints** (optional — only ask if relevant): If the findings touch many areas, ask if anything is off-limits. For example: "Should any sections stay as-is?" This prevents the plan from touching things the user considers done. + +**Rules for questions**: +- Every question must reference specific findings from Phase 2 — never ask generic "who is your audience?" questions +- Keep it to 2–4 questions maximum — respect the user's time +- Offer concrete options, not open-ended prompts +- If findings are straightforward (e.g., only 1–2 clear issues), skip questions and go directly to Phase 4 + +## Phase 4: Recommended Actions + +**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Phase 3. + +### Action Summary + +List recommended commands in priority order, based on the user's answers: + +1. **`/command-name`** — Brief description of what to fix (specific context from critique findings) +2. **`/command-name`** — Brief description (specific context) +... + +**Rules for recommendations**: +- Only recommend commands from: +- Order by the user's stated priorities first, then by impact +- Each item's description should carry enough context that the command knows what to focus on +- Map each Priority Issue to the appropriate command +- Skip commands that would address zero issues +- If the user chose a limited scope, only include items within that scope +- If the user marked areas as off-limits, exclude commands that would touch those areas +- End with `/polish` as the final step if any fixes were recommended + +After presenting the summary, tell the user: + +> You can ask me to run these one at a time, all at once, or in any order you prefer. +> +> Re-run `/critique` after fixes to see your score improve. diff --git a/.qoder/skills/critique/reference/cognitive-load.md b/.qoder/skills/critique/reference/cognitive-load.md new file mode 100644 index 0000000..313df16 --- /dev/null +++ b/.qoder/skills/critique/reference/cognitive-load.md @@ -0,0 +1,106 @@ +# Cognitive Load Assessment + +Cognitive load is the total mental effort required to use an interface. Overloaded users make mistakes, get frustrated, and leave. This reference helps identify and fix cognitive overload. + +--- + +## Three Types of Cognitive Load + +### Intrinsic Load — The Task Itself +Complexity inherent to what the user is trying to do. You can't eliminate this, but you can structure it. + +**Manage it by**: +- Breaking complex tasks into discrete steps +- Providing scaffolding (templates, defaults, examples) +- Progressive disclosure — show what's needed now, hide the rest +- Grouping related decisions together + +### Extraneous Load — Bad Design +Mental effort caused by poor design choices. **Eliminate this ruthlessly** — it's pure waste. + +**Common sources**: +- Confusing navigation that requires mental mapping +- Unclear labels that force users to guess meaning +- Visual clutter competing for attention +- Inconsistent patterns that prevent learning +- Unnecessary steps between user intent and result + +### Germane Load — Learning Effort +Mental effort spent building understanding. This is *good* cognitive load — it leads to mastery. + +**Support it by**: +- Progressive disclosure that reveals complexity gradually +- Consistent patterns that reward learning +- Feedback that confirms correct understanding +- Onboarding that teaches through action, not walls of text + +--- + +## Cognitive Load Checklist + +Evaluate the interface against these 8 items: + +- [ ] **Single focus**: Can the user complete their primary task without distraction from competing elements? +- [ ] **Chunking**: Is information presented in digestible groups (≤4 items per group)? +- [ ] **Grouping**: Are related items visually grouped together (proximity, borders, shared background)? +- [ ] **Visual hierarchy**: Is it immediately clear what's most important on the screen? +- [ ] **One thing at a time**: Can the user focus on a single decision before moving to the next? +- [ ] **Minimal choices**: Are decisions simplified (≤4 visible options at any decision point)? +- [ ] **Working memory**: Does the user need to remember information from a previous screen to act on the current one? +- [ ] **Progressive disclosure**: Is complexity revealed only when the user needs it? + +**Scoring**: Count the failed items. 0–1 failures = low cognitive load (good). 2–3 = moderate (address soon). 4+ = high cognitive load (critical fix needed). + +--- + +## The Working Memory Rule + +**Humans can hold ≤4 items in working memory at once** (Miller's Law revised by Cowan, 2001). + +At any decision point, count the number of distinct options, actions, or pieces of information a user must simultaneously consider: +- **≤4 items**: Within working memory limits — manageable +- **5–7 items**: Pushing the boundary — consider grouping or progressive disclosure +- **8+ items**: Overloaded — users will skip, misclick, or abandon + +**Practical applications**: +- Navigation menus: ≤5 top-level items (group the rest under clear categories) +- Form sections: ≤4 fields visible per group before a visual break +- Action buttons: 1 primary, 1–2 secondary, group the rest in a menu +- Dashboard widgets: ≤4 key metrics visible without scrolling +- Pricing tiers: ≤3 options (more causes analysis paralysis) + +--- + +## Common Cognitive Load Violations + +### 1. The Wall of Options +**Problem**: Presenting 10+ choices at once with no hierarchy. +**Fix**: Group into categories, highlight recommended, use progressive disclosure. + +### 2. The Memory Bridge +**Problem**: User must remember info from step 1 to complete step 3. +**Fix**: Keep relevant context visible, or repeat it where it's needed. + +### 3. The Hidden Navigation +**Problem**: User must build a mental map of where things are. +**Fix**: Always show current location (breadcrumbs, active states, progress indicators). + +### 4. The Jargon Barrier +**Problem**: Technical or domain language forces translation effort. +**Fix**: Use plain language. If domain terms are unavoidable, define them inline. + +### 5. The Visual Noise Floor +**Problem**: Every element has the same visual weight — nothing stands out. +**Fix**: Establish clear hierarchy: one primary element, 2–3 secondary, everything else muted. + +### 6. The Inconsistent Pattern +**Problem**: Similar actions work differently in different places. +**Fix**: Standardize interaction patterns. Same type of action = same type of UI. + +### 7. The Multi-Task Demand +**Problem**: Interface requires processing multiple simultaneous inputs (reading + deciding + navigating). +**Fix**: Sequence the steps. Let the user do one thing at a time. + +### 8. The Context Switch +**Problem**: User must jump between screens/tabs/modals to gather info for a single decision. +**Fix**: Co-locate the information needed for each decision. Reduce back-and-forth. diff --git a/.qoder/skills/critique/reference/heuristics-scoring.md b/.qoder/skills/critique/reference/heuristics-scoring.md new file mode 100644 index 0000000..fd5b1b0 --- /dev/null +++ b/.qoder/skills/critique/reference/heuristics-scoring.md @@ -0,0 +1,234 @@ +# Heuristics Scoring Guide + +Score each of Nielsen's 10 Usability Heuristics on a 0–4 scale. Be honest — a 4 means genuinely excellent, not "good enough." + +## Nielsen's 10 Heuristics + +### 1. Visibility of System Status + +Keep users informed about what's happening through timely, appropriate feedback. + +**Check for**: +- Loading indicators during async operations +- Confirmation of user actions (save, submit, delete) +- Progress indicators for multi-step processes +- Current location in navigation (breadcrumbs, active states) +- Form validation feedback (inline, not just on submit) + +**Scoring**: +| Score | Criteria | +|-------|----------| +| 0 | No feedback — user is guessing what happened | +| 1 | Rare feedback — most actions produce no visible response | +| 2 | Partial — some states communicated, major gaps remain | +| 3 | Good — most operations give clear feedback, minor gaps | +| 4 | Excellent — every action confirms, progress is always visible | + +### 2. Match Between System and Real World + +Speak the user's language. Follow real-world conventions. Information appears in natural, logical order. + +**Check for**: +- Familiar terminology (no unexplained jargon) +- Logical information order matching user expectations +- Recognizable icons and metaphors +- Domain-appropriate language for the target audience +- Natural reading flow (left-to-right, top-to-bottom priority) + +**Scoring**: +| Score | Criteria | +|-------|----------| +| 0 | Pure tech jargon, alien to users | +| 1 | Mostly confusing — requires domain expertise to navigate | +| 2 | Mixed — some plain language, some jargon leaks through | +| 3 | Mostly natural — occasional term needs context | +| 4 | Speaks the user's language fluently throughout | + +### 3. User Control and Freedom + +Users need a clear "emergency exit" from unwanted states without extended dialogue. + +**Check for**: +- Undo/redo functionality +- Cancel buttons on forms and modals +- Clear navigation back to safety (home, previous) +- Easy way to clear filters, search, selections +- Escape from long or multi-step processes + +**Scoring**: +| Score | Criteria | +|-------|----------| +| 0 | Users get trapped — no way out without refreshing | +| 1 | Difficult exits — must find obscure paths to escape | +| 2 | Some exits — main flows have escape, edge cases don't | +| 3 | Good control — users can exit and undo most actions | +| 4 | Full control — undo, cancel, back, and escape everywhere | + +### 4. Consistency and Standards + +Users shouldn't wonder whether different words, situations, or actions mean the same thing. + +**Check for**: +- Consistent terminology throughout the interface +- Same actions produce same results everywhere +- Platform conventions followed (standard UI patterns) +- Visual consistency (colors, typography, spacing, components) +- Consistent interaction patterns (same gesture = same behavior) + +**Scoring**: +| Score | Criteria | +|-------|----------| +| 0 | Inconsistent everywhere — feels like different products stitched together | +| 1 | Many inconsistencies — similar things look/behave differently | +| 2 | Partially consistent — main flows match, details diverge | +| 3 | Mostly consistent — occasional deviation, nothing confusing | +| 4 | Fully consistent — cohesive system, predictable behavior | + +### 5. Error Prevention + +Better than good error messages is a design that prevents problems in the first place. + +**Check for**: +- Confirmation before destructive actions (delete, overwrite) +- Constraints preventing invalid input (date pickers, dropdowns) +- Smart defaults that reduce errors +- Clear labels that prevent misunderstanding +- Autosave and draft recovery + +**Scoring**: +| Score | Criteria | +|-------|----------| +| 0 | Errors easy to make — no guardrails anywhere | +| 1 | Few safeguards — some inputs validated, most aren't | +| 2 | Partial prevention — common errors caught, edge cases slip | +| 3 | Good prevention — most error paths blocked proactively | +| 4 | Excellent — errors nearly impossible through smart constraints | + +### 6. Recognition Rather Than Recall + +Minimize memory load. Make objects, actions, and options visible or easily retrievable. + +**Check for**: +- Visible options (not buried in hidden menus) +- Contextual help when needed (tooltips, inline hints) +- Recent items and history +- Autocomplete and suggestions +- Labels on icons (not icon-only navigation) + +**Scoring**: +| Score | Criteria | +|-------|----------| +| 0 | Heavy memorization — users must remember paths and commands | +| 1 | Mostly recall — many hidden features, few visible cues | +| 2 | Some aids — main actions visible, secondary features hidden | +| 3 | Good recognition — most things discoverable, few memory demands | +| 4 | Everything discoverable — users never need to memorize | + +### 7. Flexibility and Efficiency of Use + +Accelerators — invisible to novices — speed up expert interaction. + +**Check for**: +- Keyboard shortcuts for common actions +- Customizable interface elements +- Recent items and favorites +- Bulk/batch actions +- Power user features that don't complicate the basics + +**Scoring**: +| Score | Criteria | +|-------|----------| +| 0 | One rigid path — no shortcuts or alternatives | +| 1 | Limited flexibility — few alternatives to the main path | +| 2 | Some shortcuts — basic keyboard support, limited bulk actions | +| 3 | Good accelerators — keyboard nav, some customization | +| 4 | Highly flexible — multiple paths, power features, customizable | + +### 8. Aesthetic and Minimalist Design + +Interfaces should not contain irrelevant or rarely needed information. Every element should serve a purpose. + +**Check for**: +- Only necessary information visible at each step +- Clear visual hierarchy directing attention +- Purposeful use of color and emphasis +- No decorative clutter competing for attention +- Focused, uncluttered layouts + +**Scoring**: +| Score | Criteria | +|-------|----------| +| 0 | Overwhelming — everything competes for attention equally | +| 1 | Cluttered — too much noise, hard to find what matters | +| 2 | Some clutter — main content clear, periphery noisy | +| 3 | Mostly clean — focused design, minor visual noise | +| 4 | Perfectly minimal — every element earns its pixel | + +### 9. Help Users Recognize, Diagnose, and Recover from Errors + +Error messages should use plain language, precisely indicate the problem, and constructively suggest a solution. + +**Check for**: +- Plain language error messages (no error codes for users) +- Specific problem identification ("Email is missing @" not "Invalid input") +- Actionable recovery suggestions +- Errors displayed near the source of the problem +- Non-blocking error handling (don't wipe the form) + +**Scoring**: +| Score | Criteria | +|-------|----------| +| 0 | Cryptic errors — codes, jargon, or no message at all | +| 1 | Vague errors — "Something went wrong" with no guidance | +| 2 | Clear but unhelpful — names the problem but not the fix | +| 3 | Clear with suggestions — identifies problem and offers next steps | +| 4 | Perfect recovery — pinpoints issue, suggests fix, preserves user work | + +### 10. Help and Documentation + +Even if the system is usable without docs, help should be easy to find, task-focused, and concise. + +**Check for**: +- Searchable help or documentation +- Contextual help (tooltips, inline hints, guided tours) +- Task-focused organization (not feature-organized) +- Concise, scannable content +- Easy access without leaving current context + +**Scoring**: +| Score | Criteria | +|-------|----------| +| 0 | No help available anywhere | +| 1 | Help exists but hard to find or irrelevant | +| 2 | Basic help — FAQ or docs exist, not contextual | +| 3 | Good documentation — searchable, mostly task-focused | +| 4 | Excellent contextual help — right info at the right moment | + +--- + +## Score Summary + +**Total possible**: 40 points (10 heuristics × 4 max) + +| Score Range | Rating | What It Means | +|-------------|--------|---------------| +| 36–40 | Excellent | Minor polish only — ship it | +| 28–35 | Good | Address weak areas, solid foundation | +| 20–27 | Acceptable | Significant improvements needed before users are happy | +| 12–19 | Poor | Major UX overhaul required — core experience broken | +| 0–11 | Critical | Redesign needed — unusable in current state | + +--- + +## Issue Severity (P0–P3) + +Tag each individual issue found during scoring with a priority level: + +| Priority | Name | Description | Action | +|----------|------|-------------|--------| +| **P0** | Blocking | Prevents task completion entirely | Fix immediately — this is a showstopper | +| **P1** | Major | Causes significant difficulty or confusion | Fix before release | +| **P2** | Minor | Annoyance, but workaround exists | Fix in next pass | +| **P3** | Polish | Nice-to-fix, no real user impact | Fix if time permits | + +**Tip**: If you're unsure between two levels, ask: "Would a user contact support about this?" If yes, it's at least P1. diff --git a/.qoder/skills/critique/reference/personas.md b/.qoder/skills/critique/reference/personas.md new file mode 100644 index 0000000..4f48f35 --- /dev/null +++ b/.qoder/skills/critique/reference/personas.md @@ -0,0 +1,178 @@ +# Persona-Based Design Testing + +Test the interface through the eyes of 5 distinct user archetypes. Each persona exposes different failure modes that a single "design director" perspective would miss. + +**How to use**: Select 2–3 personas most relevant to the interface being critiqued. Walk through the primary user action as each persona. Report specific red flags — not generic concerns. + +--- + +## 1. Impatient Power User — "Alex" + +**Profile**: Expert with similar products. Expects efficiency, hates hand-holding. Will find shortcuts or leave. + +**Behaviors**: +- Skips all onboarding and instructions +- Looks for keyboard shortcuts immediately +- Tries to bulk-select, batch-edit, and automate +- Gets frustrated by required steps that feel unnecessary +- Abandons if anything feels slow or patronizing + +**Test Questions**: +- Can Alex complete the core task in under 60 seconds? +- Are there keyboard shortcuts for common actions? +- Can onboarding be skipped entirely? +- Do modals have keyboard dismiss (Esc)? +- Is there a "power user" path (shortcuts, bulk actions)? + +**Red Flags** (report these specifically): +- Forced tutorials or unskippable onboarding +- No keyboard navigation for primary actions +- Slow animations that can't be skipped +- One-item-at-a-time workflows where batch would be natural +- Redundant confirmation steps for low-risk actions + +--- + +## 2. Confused First-Timer — "Jordan" + +**Profile**: Never used this type of product. Needs guidance at every step. Will abandon rather than figure it out. + +**Behaviors**: +- Reads all instructions carefully +- Hesitates before clicking anything unfamiliar +- Looks for help or support constantly +- Misunderstands jargon and abbreviations +- Takes the most literal interpretation of any label + +**Test Questions**: +- Is the first action obviously clear within 5 seconds? +- Are all icons labeled with text? +- Is there contextual help at decision points? +- Does terminology assume prior knowledge? +- Is there a clear "back" or "undo" at every step? + +**Red Flags** (report these specifically): +- Icon-only navigation with no labels +- Technical jargon without explanation +- No visible help option or guidance +- Ambiguous next steps after completing an action +- No confirmation that an action succeeded + +--- + +## 3. Accessibility-Dependent User — "Sam" + +**Profile**: Uses screen reader (VoiceOver/NVDA), keyboard-only navigation. May have low vision, motor impairment, or cognitive differences. + +**Behaviors**: +- Tabs through the interface linearly +- Relies on ARIA labels and heading structure +- Cannot see hover states or visual-only indicators +- Needs adequate color contrast (4.5:1 minimum) +- May use browser zoom up to 200% + +**Test Questions**: +- Can the entire primary flow be completed keyboard-only? +- Are all interactive elements focusable with visible focus indicators? +- Do images have meaningful alt text? +- Is color contrast WCAG AA compliant (4.5:1 for text)? +- Does the screen reader announce state changes (loading, success, errors)? + +**Red Flags** (report these specifically): +- Click-only interactions with no keyboard alternative +- Missing or invisible focus indicators +- Meaning conveyed by color alone (red = error, green = success) +- Unlabeled form fields or buttons +- Time-limited actions without extension option +- Custom components that break screen reader flow + +--- + +## 4. Deliberate Stress Tester — "Riley" + +**Profile**: Methodical user who pushes interfaces beyond the happy path. Tests edge cases, tries unexpected inputs, and probes for gaps in the experience. + +**Behaviors**: +- Tests edge cases intentionally (empty states, long strings, special characters) +- Submits forms with unexpected data (emoji, RTL text, very long values) +- Tries to break workflows by navigating backwards, refreshing mid-flow, or opening in multiple tabs +- Looks for inconsistencies between what the UI promises and what actually happens +- Documents problems methodically + +**Test Questions**: +- What happens at the edges (0 items, 1000 items, very long text)? +- Do error states recover gracefully or leave the UI in a broken state? +- What happens on refresh mid-workflow? Is state preserved? +- Are there features that appear to work but produce broken results? +- How does the UI handle unexpected input (emoji, special chars, paste from Excel)? + +**Red Flags** (report these specifically): +- Features that appear to work but silently fail or produce wrong results +- Error handling that exposes technical details or leaves UI in a broken state +- Empty states that show nothing useful ("No results" with no guidance) +- Workflows that lose user data on refresh or navigation +- Inconsistent behavior between similar interactions in different parts of the UI + +--- + +## 5. Distracted Mobile User — "Casey" + +**Profile**: Using phone one-handed on the go. Frequently interrupted. Possibly on a slow connection. + +**Behaviors**: +- Uses thumb only — prefers bottom-of-screen actions +- Gets interrupted mid-flow and returns later +- Switches between apps frequently +- Has limited attention span and low patience +- Types as little as possible, prefers taps and selections + +**Test Questions**: +- Are primary actions in the thumb zone (bottom half of screen)? +- Is state preserved if the user leaves and returns? +- Does it work on slow connections (3G)? +- Can forms leverage autocomplete and smart defaults? +- Are touch targets at least 44×44pt? + +**Red Flags** (report these specifically): +- Important actions positioned at the top of the screen (unreachable by thumb) +- No state persistence — progress lost on tab switch or interruption +- Large text inputs required where selection would work +- Heavy assets loading on every page (no lazy loading) +- Tiny tap targets or targets too close together + +--- + +## Selecting Personas + +Choose personas based on the interface type: + +| Interface Type | Primary Personas | Why | +|---------------|-----------------|-----| +| Landing page / marketing | Jordan, Riley, Casey | First impressions, trust, mobile | +| Dashboard / admin | Alex, Sam | Power users, accessibility | +| E-commerce / checkout | Casey, Riley, Jordan | Mobile, edge cases, clarity | +| Onboarding flow | Jordan, Casey | Confusion, interruption | +| Data-heavy / analytics | Alex, Sam | Efficiency, keyboard nav | +| Form-heavy / wizard | Jordan, Sam, Casey | Clarity, accessibility, mobile | + +--- + +## Project-Specific Personas + +If `QODER.md` contains a `## Design Context` section (generated by `teach-impeccable`), derive 1–2 additional personas from the audience and brand information: + +1. Read the target audience description +2. Identify the primary user archetype not covered by the 5 predefined personas +3. Create a persona following this template: + +``` +### [Role] — "[Name]" + +**Profile**: [2-3 key characteristics derived from Design Context] + +**Behaviors**: [3-4 specific behaviors based on the described audience] + +**Red Flags**: [3-4 things that would alienate this specific user type] +``` + +Only generate project-specific personas when real Design Context data is available. Don't invent audience details — use the 5 predefined personas when no context exists. diff --git a/.qoder/skills/delight/SKILL.md b/.qoder/skills/delight/SKILL.md new file mode 100644 index 0000000..ded7254 --- /dev/null +++ b/.qoder/skills/delight/SKILL.md @@ -0,0 +1,308 @@ +--- +name: delight +description: +--- + +--- +name: delight +description: "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable." +argument-hint: "[target]" +user-invocable: true +--- + +Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. + +## MANDATORY PREPARATION + +Invoke /frontend-design — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant). + +--- + +## Assess Delight Opportunities + +Identify where delight would enhance (not distract from) the experience: + +1. **Find natural delight moments**: + - **Success states**: Completed actions (save, send, publish) + - **Empty states**: First-time experiences, onboarding + - **Loading states**: Waiting periods that could be entertaining + - **Achievements**: Milestones, streaks, completions + - **Interactions**: Hover states, clicks, drags + - **Errors**: Softening frustrating moments + - **Easter eggs**: Hidden discoveries for curious users + +2. **Understand the context**: + - What's the brand personality? (Playful? Professional? Quirky? Elegant?) + - Who's the audience? (Tech-savvy? Creative? Corporate?) + - What's the emotional context? (Accomplishment? Exploration? Frustration?) + - What's appropriate? (Banking app ≠ gaming app) + +3. **Define delight strategy**: + - **Subtle sophistication**: Refined micro-interactions (luxury brands) + - **Playful personality**: Whimsical illustrations and copy (consumer apps) + - **Helpful surprises**: Anticipating needs before users ask (productivity tools) + - **Sensory richness**: Satisfying sounds, smooth animations (creative tools) + +If any of these are unclear from the codebase, ask the user directly in a concise way if clarification is needed. + +**CRITICAL**: Delight should enhance usability, never obscure it. If users notice the delight more than accomplishing their goal, you've gone too far. + +## Delight Principles + +Follow these guidelines: + +### Delight Amplifies, Never Blocks +- Delight moments should be quick (< 1 second) +- Never delay core functionality for delight +- Make delight skippable or subtle +- Respect user's time and task focus + +### Surprise and Discovery +- Hide delightful details for users to discover +- Reward exploration and curiosity +- Don't announce every delight moment +- Let users share discoveries with others + +### Appropriate to Context +- Match delight to emotional moment (celebrate success, empathize with errors) +- Respect the user's state (don't be playful during critical errors) +- Match brand personality and audience expectations +- Cultural sensitivity (what's delightful varies by culture) + +### Compound Over Time +- Delight should remain fresh with repeated use +- Vary responses (not same animation every time) +- Reveal deeper layers with continued use +- Build anticipation through patterns + +## Delight Techniques + +Add personality and joy through these methods: + +### Micro-interactions & Animation + +**Button delight**: +```css +/* Satisfying button press */ +.button { + transition: transform 0.1s, box-shadow 0.1s; +} +.button:active { + transform: translateY(2px); + box-shadow: 0 2px 4px rgba(0,0,0,0.2); +} + +/* Ripple effect on click */ +/* Smooth lift on hover */ +.button:hover { + transform: translateY(-2px); + transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */ +} +``` + +**Loading delight**: +- Playful loading animations (not just spinners) +- Personality in loading messages (write product-specific ones, not generic AI filler) +- Progress indication with encouraging messages +- Skeleton screens with subtle animations + +**Success animations**: +- Checkmark draw animation +- Confetti burst for major achievements +- Gentle scale + fade for confirmation +- Satisfying sound effects (subtle) + +**Hover surprises**: +- Icons that animate on hover +- Color shifts or glow effects +- Tooltip reveals with personality +- Cursor changes (custom cursors for branded experiences) + +### Personality in Copy + +**Playful error messages**: +``` +"Error 404" +"This page is playing hide and seek. (And winning)" + +"Connection failed" +"Looks like the internet took a coffee break. Want to retry?" +``` + +**Encouraging empty states**: +``` +"No projects" +"Your canvas awaits. Create something amazing." + +"No messages" +"Inbox zero! You're crushing it today." +``` + +**Playful labels & tooltips**: +``` +"Delete" +"Send to void" (for playful brand) + +"Help" +"Rescue me" (tooltip) +``` + +**IMPORTANT**: Match copy personality to brand. Banks shouldn't be wacky, but they can be warm. + +### Illustrations & Visual Personality + +**Custom illustrations**: +- Empty state illustrations (not stock icons) +- Error state illustrations (friendly monsters, quirky characters) +- Loading state illustrations (animated characters) +- Success state illustrations (celebrations) + +**Icon personality**: +- Custom icon set matching brand personality +- Animated icons (subtle motion on hover/click) +- Illustrative icons (more detailed than generic) +- Consistent style across all icons + +**Background effects**: +- Subtle particle effects +- Gradient mesh backgrounds +- Geometric patterns +- Parallax depth +- Time-of-day themes (morning vs night) + +### Satisfying Interactions + +**Drag and drop delight**: +- Lift effect on drag (shadow, scale) +- Snap animation when dropped +- Satisfying placement sound +- Undo toast ("Dropped in wrong place? [Undo]") + +**Toggle switches**: +- Smooth slide with spring physics +- Color transition +- Haptic feedback on mobile +- Optional sound effect + +**Progress & achievements**: +- Streak counters with celebratory milestones +- Progress bars that "celebrate" at 100% +- Badge unlocks with animation +- Playful stats ("You're on fire! 5 days in a row") + +**Form interactions**: +- Input fields that animate on focus +- Checkboxes with a satisfying scale pulse when checked +- Success state that celebrates valid input +- Auto-grow textareas + +### Sound Design + +**Subtle audio cues** (when appropriate): +- Notification sounds (distinctive but not annoying) +- Success sounds (satisfying "ding") +- Error sounds (empathetic, not harsh) +- Typing sounds for chat/messaging +- Ambient background audio (very subtle) + +**IMPORTANT**: +- Respect system sound settings +- Provide mute option +- Keep volumes quiet (subtle cues, not alarms) +- Don't play on every interaction (sound fatigue is real) + +### Easter Eggs & Hidden Delights + +**Discovery rewards**: +- Konami code unlocks special theme +- Hidden keyboard shortcuts (Cmd+K for special features) +- Hover reveals on logos or illustrations +- Alt text jokes on images (for screen reader users too!) +- Console messages for developers ("Like what you see? We're hiring!") + +**Seasonal touches**: +- Holiday themes (subtle, tasteful) +- Seasonal color shifts +- Weather-based variations +- Time-based changes (dark at night, light during day) + +**Contextual personality**: +- Different messages based on time of day +- Responses to specific user actions +- Randomized variations (not same every time) +- Progressive reveals with continued use + +### Loading & Waiting States + +**Make waiting engaging**: +- Interesting loading messages that rotate +- Progress bars with personality +- Mini-games during long loads +- Fun facts or tips while waiting +- Countdown with encouraging messages + +``` +Loading messages — write ones specific to your product, not generic AI filler: +- "Crunching your latest numbers..." +- "Syncing with your team's changes..." +- "Preparing your dashboard..." +- "Checking for updates since yesterday..." +``` + +**WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy — instantly recognizable as machine-generated. Write messages that are specific to what your product actually does. + +### Celebration Moments + +**Success celebrations**: +- Confetti for major milestones +- Animated checkmarks for completions +- Progress bar celebrations at 100% +- "Achievement unlocked" style notifications +- Personalized messages ("You published your 10th article!") + +**Milestone recognition**: +- First-time actions get special treatment +- Streak tracking and celebration +- Progress toward goals +- Anniversary celebrations + +## Implementation Patterns + +**Animation libraries**: +- Framer Motion (React) +- GSAP (universal) +- Lottie (After Effects animations) +- Canvas confetti (party effects) + +**Sound libraries**: +- Howler.js (audio management) +- Use-sound (React hook) + +**Physics libraries**: +- React Spring (spring physics) +- Popmotion (animation primitives) + +**IMPORTANT**: File size matters. Compress images, optimize animations, lazy load delight features. + +**NEVER**: +- Delay core functionality for delight +- Force users through delightful moments (make skippable) +- Use delight to hide poor UX +- Overdo it (less is more) +- Ignore accessibility (animate responsibly, provide alternatives) +- Make every interaction delightful (special moments should be special) +- Sacrifice performance for delight +- Be inappropriate for context (read the room) + +## Verify Delight Quality + +Test that delight actually delights: + +- **User reactions**: Do users smile? Share screenshots? +- **Doesn't annoy**: Still pleasant after 100th time? +- **Doesn't block**: Can users opt out or skip? +- **Performant**: No jank, no slowdown +- **Appropriate**: Matches brand and context +- **Accessible**: Works with reduced motion, screen readers + +Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. diff --git a/.qoder/skills/distill/SKILL.md b/.qoder/skills/distill/SKILL.md new file mode 100644 index 0000000..57374bd --- /dev/null +++ b/.qoder/skills/distill/SKILL.md @@ -0,0 +1,126 @@ +--- +name: distill +description: +--- + +--- +name: distill +description: "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused." +argument-hint: "[target]" +user-invocable: true +--- + +Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. + +## MANDATORY PREPARATION + +Invoke /frontend-design — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first. + +--- + +## Assess Current State + +Analyze what makes the design feel complex or cluttered: + +1. **Identify complexity sources**: + - **Too many elements**: Competing buttons, redundant information, visual clutter + - **Excessive variation**: Too many colors, fonts, sizes, styles without purpose + - **Information overload**: Everything visible at once, no progressive disclosure + - **Visual noise**: Unnecessary borders, shadows, backgrounds, decorations + - **Confusing hierarchy**: Unclear what matters most + - **Feature creep**: Too many options, actions, or paths forward + +2. **Find the essence**: + - What's the primary user goal? (There should be ONE) + - What's actually necessary vs nice-to-have? + - What can be removed, hidden, or combined? + - What's the 20% that delivers 80% of value? + +If any of these are unclear from the codebase, ask the user directly in a concise way if clarification is needed. + +**CRITICAL**: Simplicity is not about removing features - it's about removing obstacles between users and their goals. Every element should justify its existence. + +## Plan Simplification + +Create a ruthless editing strategy: + +- **Core purpose**: What's the ONE thing this should accomplish? +- **Essential elements**: What's truly necessary to achieve that purpose? +- **Progressive disclosure**: What can be hidden until needed? +- **Consolidation opportunities**: What can be combined or integrated? + +**IMPORTANT**: Simplification is hard. It requires saying no to good ideas to make room for great execution. Be ruthless. + +## Simplify the Design + +Systematically remove complexity across these dimensions: + +### Information Architecture +- **Reduce scope**: Remove secondary actions, optional features, redundant information +- **Progressive disclosure**: Hide complexity behind clear entry points (accordions, modals, step-through flows) +- **Combine related actions**: Merge similar buttons, consolidate forms, group related content +- **Clear hierarchy**: ONE primary action, few secondary actions, everything else tertiary or hidden +- **Remove redundancy**: If it's said elsewhere, don't repeat it here + +### Visual Simplification +- **Reduce color palette**: Use 1-2 colors plus neutrals, not 5-7 colors +- **Limit typography**: One font family, 3-4 sizes maximum, 2-3 weights +- **Remove decorations**: Eliminate borders, shadows, backgrounds that don't serve hierarchy or function +- **Flatten structure**: Reduce nesting, remove unnecessary containers—never nest cards inside cards +- **Remove unnecessary cards**: Cards aren't needed for basic layout; use spacing and alignment instead +- **Consistent spacing**: Use one spacing scale, remove arbitrary gaps + +### Layout Simplification +- **Linear flow**: Replace complex grids with simple vertical flow where possible +- **Remove sidebars**: Move secondary content inline or hide it +- **Full-width**: Use available space generously instead of complex multi-column layouts +- **Consistent alignment**: Pick left or center, stick with it +- **Generous white space**: Let content breathe, don't pack everything tight + +### Interaction Simplification +- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real) +- **Smart defaults**: Make common choices automatic, only ask when necessary +- **Inline actions**: Replace modal flows with inline editing where possible +- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified? +- **Clear CTAs**: ONE obvious next step, not five competing actions + +### Content Simplification +- **Shorter copy**: Cut every sentence in half, then do it again +- **Active voice**: "Save changes" not "Changes will be saved" +- **Remove jargon**: Plain language always wins +- **Scannable structure**: Short paragraphs, bullet points, clear headings +- **Essential information only**: Remove marketing fluff, legalese, hedging +- **Remove redundant copy**: No headers restating intros, no repeated explanations, say it once + +### Code Simplification +- **Remove unused code**: Dead CSS, unused components, orphaned files +- **Flatten component trees**: Reduce nesting depth +- **Consolidate styles**: Merge similar styles, use utilities consistently +- **Reduce variants**: Does that component need 12 variations, or can 3 cover 90% of cases? + +**NEVER**: +- Remove necessary functionality (simplicity ≠ feature-less) +- Sacrifice accessibility for simplicity (clear labels and ARIA still required) +- Make things so simple they're unclear (mystery ≠ minimalism) +- Remove information users need to make decisions +- Eliminate hierarchy completely (some things should stand out) +- Oversimplify complex domains (match complexity to actual task complexity) + +## Verify Simplification + +Ensure simplification improves usability: + +- **Faster task completion**: Can users accomplish goals more quickly? +- **Reduced cognitive load**: Is it easier to understand what to do? +- **Still complete**: Are all necessary features still accessible? +- **Clearer hierarchy**: Is it obvious what matters most? +- **Better performance**: Does simpler design load faster? + +## Document Removed Complexity + +If you removed features or options: +- Document why they were removed +- Consider if they need alternative access points +- Note any user feedback to monitor + +Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." diff --git a/.qoder/skills/extract/SKILL.md b/.qoder/skills/extract/SKILL.md new file mode 100644 index 0000000..50d972b --- /dev/null +++ b/.qoder/skills/extract/SKILL.md @@ -0,0 +1,97 @@ +--- +name: extract +description: +--- + +--- +name: extract +description: "Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens." +argument-hint: "[target]" +user-invocable: true +--- + +Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse. + +## Discover + +Analyze the target area to identify extraction opportunities: + +1. **Find the design system**: Locate your design system, component library, or shared UI directory (grep for "design system", "ui", "components", etc.). Understand its structure: + - Component organization and naming conventions + - Design token structure (if any) + - Documentation patterns + - Import/export conventions + + **CRITICAL**: If no design system exists, ask before creating one. Understand the preferred location and structure first. + +2. **Identify patterns**: Look for: + - **Repeated components**: Similar UI patterns used multiple times (buttons, cards, inputs, etc.) + - **Hard-coded values**: Colors, spacing, typography, shadows that should be tokens + - **Inconsistent variations**: Multiple implementations of the same concept (3 different button styles) + - **Reusable patterns**: Layout patterns, composition patterns, interaction patterns worth systematizing + +3. **Assess value**: Not everything should be extracted. Consider: + - Is this used 3+ times, or likely to be reused? + - Would systematizing this improve consistency? + - Is this a general pattern or context-specific? + - What's the maintenance cost vs benefit? + +## Plan Extraction + +Create a systematic extraction plan: + +- **Components to extract**: Which UI elements become reusable components? +- **Tokens to create**: Which hard-coded values become design tokens? +- **Variants to support**: What variations does each component need? +- **Naming conventions**: Component names, token names, prop names that match existing patterns +- **Migration path**: How to refactor existing uses to consume the new shared versions + +**IMPORTANT**: Design systems grow incrementally. Extract what's clearly reusable now, not everything that might someday be reusable. + +## Extract & Enrich + +Build improved, reusable versions: + +- **Components**: Create well-designed components with: + - Clear props API with sensible defaults + - Proper variants for different use cases + - Accessibility built in (ARIA, keyboard navigation, focus management) + - Documentation and usage examples + +- **Design tokens**: Create tokens with: + - Clear naming (primitive vs semantic) + - Proper hierarchy and organization + - Documentation of when to use each token + +- **Patterns**: Document patterns with: + - When to use this pattern + - Code examples + - Variations and combinations + +**NEVER**: +- Extract one-off, context-specific implementations without generalization +- Create components so generic they're useless +- Extract without considering existing design system conventions +- Skip proper TypeScript types or prop documentation +- Create tokens for every single value (tokens should have semantic meaning) + +## Migrate + +Replace existing uses with the new shared versions: + +- **Find all instances**: Search for the patterns you've extracted +- **Replace systematically**: Update each use to consume the shared version +- **Test thoroughly**: Ensure visual and functional parity +- **Delete dead code**: Remove the old implementations + +## Document + +Update design system documentation: + +- Add new components to the component library +- Document token usage and values +- Add examples and guidelines +- Update any Storybook or component catalog + +Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently. + diff --git a/.qoder/skills/frontend-design/SKILL.md b/.qoder/skills/frontend-design/SKILL.md new file mode 100644 index 0000000..516c700 --- /dev/null +++ b/.qoder/skills/frontend-design/SKILL.md @@ -0,0 +1,152 @@ +--- +name: frontend-design +description: +--- + +--- +name: frontend-design +description: "Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context." +license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. +--- + +This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. + +## Context Gathering Protocol + +Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work. + +**Required context** — every design skill needs at minimum: +- **Target audience**: Who uses this product and in what context? +- **Use cases**: What jobs are they trying to get done? +- **Brand personality/tone**: How should the interface feel? + +Individual skills may require additional context — check the skill's preparation section for specifics. + +**CRITICAL**: You cannot infer this context by reading the codebase. Code tells you what was built, not who it's for or what it should feel like. Only the creator can provide this context. + +**Gathering order:** +1. **Check current instructions (instant)**: If your loaded instructions already contain a **Design Context** section, proceed immediately. +2. **Check .impeccable.md (fast)**: If not in instructions, read `.impeccable.md` from the project root. If it exists and contains the required context, proceed. +3. **Run teach-impeccable (REQUIRED)**: If neither source has context, you MUST run /teach-impeccable NOW before doing anything else. Do NOT skip this step. Do NOT attempt to infer context from the codebase instead. + +--- + +## Design Direction + +Commit to a BOLD aesthetic direction: +- **Purpose**: What problem does this interface solve? Who uses it? +- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction. +- **Constraints**: Technical requirements (framework, performance, accessibility). +- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember? + +**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work—the key is intentionality, not intensity. + +Then implement working code that is: +- Production-grade and functional +- Visually striking and memorable +- Cohesive with a clear aesthetic point-of-view +- Meticulously refined in every detail + +## Frontend Aesthetics Guidelines + +### Typography +→ *Consult [typography reference](reference/typography.md) for scales, pairing, and loading strategies.* + +Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font. + +**DO**: Use a modular type scale with fluid sizing (clamp) +**DO**: Vary font weights and sizes to create clear visual hierarchy +**DON'T**: Use overused fonts—Inter, Roboto, Arial, Open Sans, system defaults +**DON'T**: Use monospace typography as lazy shorthand for "technical/developer" vibes +**DON'T**: Put large icons with rounded corners above every heading—they rarely add value and make sites look templated + +### Color & Theme +→ *Consult [color reference](reference/color-and-contrast.md) for OKLCH, palettes, and dark mode.* + +Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. + +**DO**: Use modern CSS color functions (oklch, color-mix, light-dark) for perceptually uniform, maintainable palettes +**DO**: Tint your neutrals toward your brand hue—even a subtle hint creates subconscious cohesion +**DON'T**: Use gray text on colored backgrounds—it looks washed out; use a shade of the background color instead +**DON'T**: Use pure black (#000) or pure white (#fff)—always tint; pure black/white never appears in nature +**DON'T**: Use the AI color palette: cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds +**DON'T**: Use gradient text for "impact"—especially on metrics or headings; it's decorative rather than meaningful +**DON'T**: Default to dark mode with glowing accents—it looks "cool" without requiring actual design decisions + +### Layout & Space +→ *Consult [spatial reference](reference/spatial-design.md) for grids, rhythm, and container queries.* + +Create visual rhythm through varied spacing—not the same padding everywhere. Embrace asymmetry and unexpected compositions. Break the grid intentionally for emphasis. + +**DO**: Create visual rhythm through varied spacing—tight groupings, generous separations +**DO**: Use fluid spacing with clamp() that breathes on larger screens +**DO**: Use asymmetry and unexpected compositions; break the grid intentionally for emphasis +**DON'T**: Wrap everything in cards—not everything needs a container +**DON'T**: Nest cards inside cards—visual noise, flatten the hierarchy +**DON'T**: Use identical card grids—same-sized cards with icon + heading + text, repeated endlessly +**DON'T**: Use the hero metric layout template—big number, small label, supporting stats, gradient accent +**DON'T**: Center everything—left-aligned text with asymmetric layouts feels more designed +**DON'T**: Use the same spacing everywhere—without rhythm, layouts feel monotonous + +### Visual Details +**DO**: Use intentional, purposeful decorative elements that reinforce brand +**DON'T**: Use glassmorphism everywhere—blur effects, glass cards, glow borders used decoratively rather than purposefully +**DON'T**: Use rounded elements with thick colored border on one side—a lazy accent that almost never looks intentional +**DON'T**: Use sparklines as decoration—tiny charts that look sophisticated but convey nothing meaningful +**DON'T**: Use rounded rectangles with generic drop shadows—safe, forgettable, could be any AI output +**DON'T**: Use modals unless there's truly no better alternative—modals are lazy + +### Motion +→ *Consult [motion reference](reference/motion-design.md) for timing, easing, and reduced motion.* + +Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. + +**DO**: Use motion to convey state changes—entrances, exits, feedback +**DO**: Use exponential easing (ease-out-quart/quint/expo) for natural deceleration +**DO**: For height animations, use grid-template-rows transitions instead of animating height directly +**DON'T**: Animate layout properties (width, height, padding, margin)—use transform and opacity only +**DON'T**: Use bounce or elastic easing—they feel dated and tacky; real objects decelerate smoothly + +### Interaction +→ *Consult [interaction reference](reference/interaction-design.md) for forms, focus, and loading patterns.* + +Make interactions feel fast. Use optimistic UI—update immediately, sync later. + +**DO**: Use progressive disclosure—start simple, reveal sophistication through interaction (basic options first, advanced behind expandable sections; hover states that reveal secondary actions) +**DO**: Design empty states that teach the interface, not just say "nothing here" +**DO**: Make every interactive surface feel intentional and responsive +**DON'T**: Repeat the same information—redundant headers, intros that restate the heading +**DON'T**: Make every button primary—use ghost buttons, text links, secondary styles; hierarchy matters + +### Responsive +→ *Consult [responsive reference](reference/responsive-design.md) for mobile-first, fluid design, and container queries.* + +**DO**: Use container queries (@container) for component-level responsiveness +**DO**: Adapt the interface for different contexts—don't just shrink it +**DON'T**: Hide critical functionality on mobile—adapt the interface, don't amputate it + +### UX Writing +→ *Consult [ux-writing reference](reference/ux-writing.md) for labels, errors, and empty states.* + +**DO**: Make every word earn its place +**DON'T**: Repeat information users can already see + +--- + +## The AI Slop Test + +**Critical quality check**: If you showed this interface to someone and said "AI made this," would they believe you immediately? If yes, that's the problem. + +A distinctive interface should make someone ask "how was this made?" not "which AI made this?" + +Review the DON'T guidelines above—they are the fingerprints of AI-generated work from 2024-2025. + +--- + +## Implementation Principles + +Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. + +Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices across generations. + +Remember: Qoder is capable of extraordinary creative work. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision. diff --git a/.qoder/skills/frontend-design/reference/color-and-contrast.md b/.qoder/skills/frontend-design/reference/color-and-contrast.md new file mode 100644 index 0000000..77aaf03 --- /dev/null +++ b/.qoder/skills/frontend-design/reference/color-and-contrast.md @@ -0,0 +1,132 @@ +# Color & Contrast + +## Color Spaces: Use OKLCH + +**Stop using HSL.** Use OKLCH (or LCH) instead. It's perceptually uniform, meaning equal steps in lightness *look* equal—unlike HSL where 50% lightness in yellow looks bright while 50% in blue looks dark. + +```css +/* OKLCH: lightness (0-100%), chroma (0-0.4+), hue (0-360) */ +--color-primary: oklch(60% 0.15 250); /* Blue */ +--color-primary-light: oklch(85% 0.08 250); /* Same hue, lighter */ +--color-primary-dark: oklch(35% 0.12 250); /* Same hue, darker */ +``` + +**Key insight**: As you move toward white or black, reduce chroma (saturation). High chroma at extreme lightness looks garish. A light blue at 85% lightness needs ~0.08 chroma, not the 0.15 of your base color. + +## Building Functional Palettes + +### The Tinted Neutral Trap + +**Pure gray is dead.** Add a subtle hint of your brand hue to all neutrals: + +```css +/* Dead grays */ +--gray-100: oklch(95% 0 0); /* No personality */ +--gray-900: oklch(15% 0 0); + +/* Warm-tinted grays (add brand warmth) */ +--gray-100: oklch(95% 0.01 60); /* Hint of warmth */ +--gray-900: oklch(15% 0.01 60); + +/* Cool-tinted grays (tech, professional) */ +--gray-100: oklch(95% 0.01 250); /* Hint of blue */ +--gray-900: oklch(15% 0.01 250); +``` + +The chroma is tiny (0.01) but perceptible. It creates subconscious cohesion between your brand color and your UI. + +### Palette Structure + +A complete system needs: + +| Role | Purpose | Example | +|------|---------|---------| +| **Primary** | Brand, CTAs, key actions | 1 color, 3-5 shades | +| **Neutral** | Text, backgrounds, borders | 9-11 shade scale | +| **Semantic** | Success, error, warning, info | 4 colors, 2-3 shades each | +| **Surface** | Cards, modals, overlays | 2-3 elevation levels | + +**Skip secondary/tertiary unless you need them.** Most apps work fine with one accent color. Adding more creates decision fatigue and visual noise. + +### The 60-30-10 Rule (Applied Correctly) + +This rule is about **visual weight**, not pixel count: + +- **60%**: Neutral backgrounds, white space, base surfaces +- **30%**: Secondary colors—text, borders, inactive states +- **10%**: Accent—CTAs, highlights, focus states + +The common mistake: using the accent color everywhere because it's "the brand color." Accent colors work *because* they're rare. Overuse kills their power. + +## Contrast & Accessibility + +### WCAG Requirements + +| Content Type | AA Minimum | AAA Target | +|--------------|------------|------------| +| Body text | 4.5:1 | 7:1 | +| Large text (18px+ or 14px bold) | 3:1 | 4.5:1 | +| UI components, icons | 3:1 | 4.5:1 | +| Non-essential decorations | None | None | + +**The gotcha**: Placeholder text still needs 4.5:1. That light gray placeholder you see everywhere? Usually fails WCAG. + +### Dangerous Color Combinations + +These commonly fail contrast or cause readability issues: + +- Light gray text on white (the #1 accessibility fail) +- **Gray text on any colored background**—gray looks washed out and dead on color. Use a darker shade of the background color, or transparency +- Red text on green background (or vice versa)—8% of men can't distinguish these +- Blue text on red background (vibrates visually) +- Yellow text on white (almost always fails) +- Thin light text on images (unpredictable contrast) + +### Never Use Pure Gray or Pure Black + +Pure gray (`oklch(50% 0 0)`) and pure black (`#000`) don't exist in nature—real shadows and surfaces always have a color cast. Even a chroma of 0.005-0.01 is enough to feel natural without being obviously tinted. (See tinted neutrals example above.) + +### Testing + +Don't trust your eyes. Use tools: + +- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) +- Browser DevTools → Rendering → Emulate vision deficiencies +- [Polypane](https://polypane.app/) for real-time testing + +## Theming: Light & Dark Mode + +### Dark Mode Is Not Inverted Light Mode + +You can't just swap colors. Dark mode requires different design decisions: + +| Light Mode | Dark Mode | +|------------|-----------| +| Shadows for depth | Lighter surfaces for depth (no shadows) | +| Dark text on light | Light text on dark (reduce font weight) | +| Vibrant accents | Desaturate accents slightly | +| White backgrounds | Never pure black—use dark gray (oklch 12-18%) | + +```css +/* Dark mode depth via surface color, not shadow */ +:root[data-theme="dark"] { + --surface-1: oklch(15% 0.01 250); + --surface-2: oklch(20% 0.01 250); /* "Higher" = lighter */ + --surface-3: oklch(25% 0.01 250); + + /* Reduce text weight slightly */ + --body-weight: 350; /* Instead of 400 */ +} +``` + +### Token Hierarchy + +Use two layers: primitive tokens (`--blue-500`) and semantic tokens (`--color-primary: var(--blue-500)`). For dark mode, only redefine the semantic layer—primitives stay the same. + +## Alpha Is A Design Smell + +Heavy use of transparency (rgba, hsla) usually means an incomplete palette. Alpha creates unpredictable contrast, performance overhead, and inconsistency. Define explicit overlay colors for each context instead. Exception: focus rings and interactive states where see-through is needed. + +--- + +**Avoid**: Relying on color alone to convey information. Creating palettes without clear roles for each color. Using pure black (#000) for large areas. Skipping color blindness testing (8% of men affected). diff --git a/.qoder/skills/frontend-design/reference/interaction-design.md b/.qoder/skills/frontend-design/reference/interaction-design.md new file mode 100644 index 0000000..19d6809 --- /dev/null +++ b/.qoder/skills/frontend-design/reference/interaction-design.md @@ -0,0 +1,195 @@ +# Interaction Design + +## The Eight Interactive States + +Every interactive element needs these states designed: + +| State | When | Visual Treatment | +|-------|------|------------------| +| **Default** | At rest | Base styling | +| **Hover** | Pointer over (not touch) | Subtle lift, color shift | +| **Focus** | Keyboard/programmatic focus | Visible ring (see below) | +| **Active** | Being pressed | Pressed in, darker | +| **Disabled** | Not interactive | Reduced opacity, no pointer | +| **Loading** | Processing | Spinner, skeleton | +| **Error** | Invalid state | Red border, icon, message | +| **Success** | Completed | Green check, confirmation | + +**The common miss**: Designing hover without focus, or vice versa. They're different. Keyboard users never see hover states. + +## Focus Rings: Do Them Right + +**Never `outline: none` without replacement.** It's an accessibility violation. Instead, use `:focus-visible` to show focus only for keyboard users: + +```css +/* Hide focus ring for mouse/touch */ +button:focus { + outline: none; +} + +/* Show focus ring for keyboard */ +button:focus-visible { + outline: 2px solid var(--color-accent); + outline-offset: 2px; +} +``` + +**Focus ring design**: +- High contrast (3:1 minimum against adjacent colors) +- 2-3px thick +- Offset from element (not inside it) +- Consistent across all interactive elements + +## Form Design: The Non-Obvious + +**Placeholders aren't labels**—they disappear on input. Always use visible `