diff --git a/dist/claude-code/.claude/commands/animate.md b/dist/claude-code/.claude/commands/animate.md index 1bd33fecc..6382841f6 100644 --- a/dist/claude-code/.claude/commands/animate.md +++ b/dist/claude-code/.claude/commands/animate.md @@ -65,7 +65,7 @@ Add motion systematically across these categories: - **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, shake or bounce effects +- **Success/error**: Color transitions, icon animations, gentle scale pulse - **Enable/disable**: Opacity transitions, cursor changes ### Navigation & Flow @@ -90,6 +90,28 @@ Add motion systematically across these categories: 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 */ @@ -124,13 +146,13 @@ Use appropriate techniques for each animation: ``` **NEVER**: -- Animate without purpose (every animation should have a reason) -- Use long durations (>500ms feels laggy) -- Animate layout properties (width, height, top, left) - use transform instead -- Block interaction during animation (unless intentional) -- Ignore reduced motion preferences (accessibility violation) -- Animate everything (animation fatigue is real) -- Create animations that draw more attention than content +- 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 diff --git a/dist/claude-code/.claude/commands/audit.md b/dist/claude-code/.claude/commands/audit.md index 4957633fa..11db6c75a 100644 --- a/dist/claude-code/.claude/commands/audit.md +++ b/dist/claude-code/.claude/commands/audit.md @@ -41,6 +41,15 @@ Run comprehensive checks across multiple dimensions: - **Text scaling**: Layouts that break when text size increases - **Missing breakpoints**: No mobile/tablet variants +5. **Design Anti-Patterns** - Check for: + - **Pure gray/black**: Using `#000`, `#808080`, or untinted grays (should have subtle color tint) + - **Gray on color**: Gray text on colored backgrounds (looks washed out—use a shade of the background color instead) + - **Nested cards**: Cards inside cards (visual noise, flatten hierarchy) + - **Bounce/elastic easing**: Dated animation curves (use ease-out-quart/quint/expo instead) + - **Redundant copy**: Headers restating intros, repeated explanations + - **Placeholder as label**: Using placeholder text as the only field label + - **Generic fonts**: Defaulting to Inter/Roboto/Arial without intentional choice + **CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit. ## Generate Comprehensive Report diff --git a/dist/claude-code/.claude/commands/bolder.md b/dist/claude-code/.claude/commands/bolder.md index d9185a771..186386242 100644 --- a/dist/claude-code/.claude/commands/bolder.md +++ b/dist/claude-code/.claude/commands/bolder.md @@ -51,11 +51,12 @@ Systematically increase impact across these dimensions: - **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent ### Color Intensification -- **Increase saturation**: Shift to more vibrant, energetic colors -- **Bold palette**: Introduce unexpected color combinations +- **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 -- **Gradients**: Rich, multi-stop gradients or mesh gradients +- **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 @@ -72,10 +73,10 @@ Systematically increase impact across these dimensions: - **Custom elements**: Illustrative elements, custom icons, decorative details ### Motion & Animation -- **Entrance choreography**: Staggered, dramatic page load animations +- **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 between states +- **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 diff --git a/dist/claude-code/.claude/commands/clarify.md b/dist/claude-code/.claude/commands/clarify.md index 993addf38..0ed67e8c3 100644 --- a/dist/claude-code/.claude/commands/clarify.md +++ b/dist/claude-code/.claude/commands/clarify.md @@ -162,6 +162,8 @@ Every piece of copy should follow these rules: - 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 diff --git a/dist/claude-code/.claude/commands/colorize.md b/dist/claude-code/.claude/commands/colorize.md index a2e2b482e..c25a64187 100644 --- a/dist/claude-code/.claude/commands/colorize.md +++ b/dist/claude-code/.claude/commands/colorize.md @@ -63,11 +63,13 @@ Add color systematically across these dimensions: - **Hover states**: Introduce color on interaction ### Background & Surfaces -- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`#faf9f7`) or cool tints (`#f8f9fb`) +- **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 gradients +- **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 @@ -113,11 +115,13 @@ Ensure color addition improves rather than overwhelms: **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) -- Choose colors that conflict with brand identity -- Use pure black (`#000`) or pure white (`#fff`) for large areas +- Default to purple-blue gradients (AI slop aesthetic) ## Verify Color Addition diff --git a/dist/claude-code/.claude/commands/delight.md b/dist/claude-code/.claude/commands/delight.md index ac6a9adde..8224a2dda 100644 --- a/dist/claude-code/.claude/commands/delight.md +++ b/dist/claude-code/.claude/commands/delight.md @@ -82,9 +82,10 @@ Add personality and joy through these methods: } /* Ripple effect on click */ -/* Spring animation on hover */ +/* Smooth lift on hover */ .button:hover { - animation: spring 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); + transform: translateY(-2px); + transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */ } ``` diff --git a/dist/claude-code/.claude/commands/polish.md b/dist/claude-code/.claude/commands/polish.md index 5211eb80a..806888a10 100644 --- a/dist/claude-code/.claude/commands/polish.md +++ b/dist/claude-code/.claude/commands/polish.md @@ -64,6 +64,8 @@ Work through these dimensions methodically: - **Theme consistency**: Works in all theme variants - **Color meaning**: Same colors mean same things throughout - **Accessible focus**: Focus indicators visible with sufficient contrast +- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) +- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency ### Interaction States @@ -82,9 +84,9 @@ Every interactive element needs all states: ### Micro-interactions & Transitions -- **Smooth transitions**: All state changes animated appropriately (200-300ms) -- **Consistent easing**: Same easing curves for similar transitions -- **No jank**: 60fps animations, no layout thrashing +- **Smooth transitions**: All state changes animated appropriately (150-300ms) +- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. +- **No jank**: 60fps animations, only animate transform and opacity - **Appropriate motion**: Motion serves purpose, not decoration - **Reduced motion**: Respects `prefers-reduced-motion` diff --git a/dist/claude-code/.claude/commands/quieter.md b/dist/claude-code/.claude/commands/quieter.md index c0b070108..f37759a5f 100644 --- a/dist/claude-code/.claude/commands/quieter.md +++ b/dist/claude-code/.claude/commands/quieter.md @@ -50,6 +50,8 @@ Systematically reduce intensity across these dimensions: - **Reduce color variety**: Use fewer colors more thoughtfully - **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule) - **Gentler contrasts**: High contrast only where it matters most +- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness +- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead ### Visual Weight Reduction - **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate @@ -64,9 +66,11 @@ Systematically reduce intensity across these dimensions: - **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows ### Motion Reduction -- **Reduce animation intensity**: Shorter distances, gentler easing, slower speeds +- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing - **Remove decorative animations**: Keep functional motion, remove flourishes - **Subtle micro-interactions**: Replace dramatic effects with gentle feedback +- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic +- **Remove animations entirely** if they're not serving a clear purpose ### Composition Refinement - **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling diff --git a/dist/claude-code/.claude/commands/simplify.md b/dist/claude-code/.claude/commands/simplify.md index 651a2cfb0..f3c3060e6 100644 --- a/dist/claude-code/.claude/commands/simplify.md +++ b/dist/claude-code/.claude/commands/simplify.md @@ -55,7 +55,8 @@ Systematically remove complexity across these dimensions: - **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 +- **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 @@ -78,6 +79,7 @@ Systematically remove complexity across these dimensions: - **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 diff --git a/dist/claude-code/.claude/skills/frontend-design/reference/color-and-contrast.md b/dist/claude-code/.claude/skills/frontend-design/reference/color-and-contrast.md index 90e20e247..29a1f9851 100644 --- a/dist/claude-code/.claude/skills/frontend-design/reference/color-and-contrast.md +++ b/dist/claude-code/.claude/skills/frontend-design/reference/color-and-contrast.md @@ -97,7 +97,7 @@ The common mistake: using the accent color everywhere because it's "the brand co 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 tinted version of the background color instead, or transparency +- **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) diff --git a/dist/codex/.codex/prompts/animate.md b/dist/codex/.codex/prompts/animate.md index 012f69742..4b2db8e68 100644 --- a/dist/codex/.codex/prompts/animate.md +++ b/dist/codex/.codex/prompts/animate.md @@ -61,7 +61,7 @@ Add motion systematically across these categories: - **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, shake or bounce effects +- **Success/error**: Color transitions, icon animations, gentle scale pulse - **Enable/disable**: Opacity transitions, cursor changes ### Navigation & Flow @@ -86,6 +86,28 @@ Add motion systematically across these categories: 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 */ @@ -120,13 +142,13 @@ Use appropriate techniques for each animation: ``` **NEVER**: -- Animate without purpose (every animation should have a reason) -- Use long durations (>500ms feels laggy) -- Animate layout properties (width, height, top, left) - use transform instead -- Block interaction during animation (unless intentional) -- Ignore reduced motion preferences (accessibility violation) -- Animate everything (animation fatigue is real) -- Create animations that draw more attention than content +- 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 diff --git a/dist/codex/.codex/prompts/audit.md b/dist/codex/.codex/prompts/audit.md index 71145b351..c71009ec9 100644 --- a/dist/codex/.codex/prompts/audit.md +++ b/dist/codex/.codex/prompts/audit.md @@ -37,6 +37,15 @@ Run comprehensive checks across multiple dimensions: - **Text scaling**: Layouts that break when text size increases - **Missing breakpoints**: No mobile/tablet variants +5. **Design Anti-Patterns** - Check for: + - **Pure gray/black**: Using `#000`, `#808080`, or untinted grays (should have subtle color tint) + - **Gray on color**: Gray text on colored backgrounds (looks washed out—use a shade of the background color instead) + - **Nested cards**: Cards inside cards (visual noise, flatten hierarchy) + - **Bounce/elastic easing**: Dated animation curves (use ease-out-quart/quint/expo instead) + - **Redundant copy**: Headers restating intros, repeated explanations + - **Placeholder as label**: Using placeholder text as the only field label + - **Generic fonts**: Defaulting to Inter/Roboto/Arial without intentional choice + **CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit. ## Generate Comprehensive Report diff --git a/dist/codex/.codex/prompts/bolder.md b/dist/codex/.codex/prompts/bolder.md index cbad782c9..dd336ab28 100644 --- a/dist/codex/.codex/prompts/bolder.md +++ b/dist/codex/.codex/prompts/bolder.md @@ -47,11 +47,12 @@ Systematically increase impact across these dimensions: - **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent ### Color Intensification -- **Increase saturation**: Shift to more vibrant, energetic colors -- **Bold palette**: Introduce unexpected color combinations +- **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 -- **Gradients**: Rich, multi-stop gradients or mesh gradients +- **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 @@ -68,10 +69,10 @@ Systematically increase impact across these dimensions: - **Custom elements**: Illustrative elements, custom icons, decorative details ### Motion & Animation -- **Entrance choreography**: Staggered, dramatic page load animations +- **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 between states +- **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 diff --git a/dist/codex/.codex/prompts/clarify.md b/dist/codex/.codex/prompts/clarify.md index af8761944..a2bf77a97 100644 --- a/dist/codex/.codex/prompts/clarify.md +++ b/dist/codex/.codex/prompts/clarify.md @@ -158,6 +158,8 @@ Every piece of copy should follow these rules: - 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 diff --git a/dist/codex/.codex/prompts/colorize.md b/dist/codex/.codex/prompts/colorize.md index b5ebe7d41..ad5d6588f 100644 --- a/dist/codex/.codex/prompts/colorize.md +++ b/dist/codex/.codex/prompts/colorize.md @@ -59,11 +59,13 @@ Add color systematically across these dimensions: - **Hover states**: Introduce color on interaction ### Background & Surfaces -- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`#faf9f7`) or cool tints (`#f8f9fb`) +- **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 gradients +- **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 @@ -109,11 +111,13 @@ Ensure color addition improves rather than overwhelms: **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) -- Choose colors that conflict with brand identity -- Use pure black (`#000`) or pure white (`#fff`) for large areas +- Default to purple-blue gradients (AI slop aesthetic) ## Verify Color Addition diff --git a/dist/codex/.codex/prompts/delight.md b/dist/codex/.codex/prompts/delight.md index 5078f49d5..819f8942a 100644 --- a/dist/codex/.codex/prompts/delight.md +++ b/dist/codex/.codex/prompts/delight.md @@ -78,9 +78,10 @@ Add personality and joy through these methods: } /* Ripple effect on click */ -/* Spring animation on hover */ +/* Smooth lift on hover */ .button:hover { - animation: spring 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); + transform: translateY(-2px); + transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */ } ``` diff --git a/dist/codex/.codex/prompts/polish.md b/dist/codex/.codex/prompts/polish.md index 788b60788..0c23ae95c 100644 --- a/dist/codex/.codex/prompts/polish.md +++ b/dist/codex/.codex/prompts/polish.md @@ -60,6 +60,8 @@ Work through these dimensions methodically: - **Theme consistency**: Works in all theme variants - **Color meaning**: Same colors mean same things throughout - **Accessible focus**: Focus indicators visible with sufficient contrast +- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) +- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency ### Interaction States @@ -78,9 +80,9 @@ Every interactive element needs all states: ### Micro-interactions & Transitions -- **Smooth transitions**: All state changes animated appropriately (200-300ms) -- **Consistent easing**: Same easing curves for similar transitions -- **No jank**: 60fps animations, no layout thrashing +- **Smooth transitions**: All state changes animated appropriately (150-300ms) +- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. +- **No jank**: 60fps animations, only animate transform and opacity - **Appropriate motion**: Motion serves purpose, not decoration - **Reduced motion**: Respects `prefers-reduced-motion` diff --git a/dist/codex/.codex/prompts/quieter.md b/dist/codex/.codex/prompts/quieter.md index 312171979..fb5208cbb 100644 --- a/dist/codex/.codex/prompts/quieter.md +++ b/dist/codex/.codex/prompts/quieter.md @@ -46,6 +46,8 @@ Systematically reduce intensity across these dimensions: - **Reduce color variety**: Use fewer colors more thoughtfully - **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule) - **Gentler contrasts**: High contrast only where it matters most +- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness +- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead ### Visual Weight Reduction - **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate @@ -60,9 +62,11 @@ Systematically reduce intensity across these dimensions: - **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows ### Motion Reduction -- **Reduce animation intensity**: Shorter distances, gentler easing, slower speeds +- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing - **Remove decorative animations**: Keep functional motion, remove flourishes - **Subtle micro-interactions**: Replace dramatic effects with gentle feedback +- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic +- **Remove animations entirely** if they're not serving a clear purpose ### Composition Refinement - **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling diff --git a/dist/codex/.codex/prompts/simplify.md b/dist/codex/.codex/prompts/simplify.md index 7f501752b..ee6a3ee1a 100644 --- a/dist/codex/.codex/prompts/simplify.md +++ b/dist/codex/.codex/prompts/simplify.md @@ -51,7 +51,8 @@ Systematically remove complexity across these dimensions: - **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 +- **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 @@ -74,6 +75,7 @@ Systematically remove complexity across these dimensions: - **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 diff --git a/dist/codex/AGENTS.frontend-design.md b/dist/codex/AGENTS.frontend-design.md index 2c3a61e72..ebdf45088 100644 --- a/dist/codex/AGENTS.frontend-design.md +++ b/dist/codex/AGENTS.frontend-design.md @@ -1583,7 +1583,7 @@ The common mistake: using the accent color everywhere because it's "the brand co 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 tinted version of the background color instead, or transparency +- **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) diff --git a/dist/cursor/.cursor/commands/animate.md b/dist/cursor/.cursor/commands/animate.md index b4584581a..de0c6b251 100644 --- a/dist/cursor/.cursor/commands/animate.md +++ b/dist/cursor/.cursor/commands/animate.md @@ -56,7 +56,7 @@ Add motion systematically across these categories: - **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, shake or bounce effects +- **Success/error**: Color transitions, icon animations, gentle scale pulse - **Enable/disable**: Opacity transitions, cursor changes ### Navigation & Flow @@ -81,6 +81,28 @@ Add motion systematically across these categories: 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 */ @@ -115,13 +137,13 @@ Use appropriate techniques for each animation: ``` **NEVER**: -- Animate without purpose (every animation should have a reason) -- Use long durations (>500ms feels laggy) -- Animate layout properties (width, height, top, left) - use transform instead -- Block interaction during animation (unless intentional) -- Ignore reduced motion preferences (accessibility violation) -- Animate everything (animation fatigue is real) -- Create animations that draw more attention than content +- 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 diff --git a/dist/cursor/.cursor/commands/audit.md b/dist/cursor/.cursor/commands/audit.md index fa56c22cf..16c512dac 100644 --- a/dist/cursor/.cursor/commands/audit.md +++ b/dist/cursor/.cursor/commands/audit.md @@ -32,6 +32,15 @@ Run comprehensive checks across multiple dimensions: - **Text scaling**: Layouts that break when text size increases - **Missing breakpoints**: No mobile/tablet variants +5. **Design Anti-Patterns** - Check for: + - **Pure gray/black**: Using `#000`, `#808080`, or untinted grays (should have subtle color tint) + - **Gray on color**: Gray text on colored backgrounds (looks washed out—use a shade of the background color instead) + - **Nested cards**: Cards inside cards (visual noise, flatten hierarchy) + - **Bounce/elastic easing**: Dated animation curves (use ease-out-quart/quint/expo instead) + - **Redundant copy**: Headers restating intros, repeated explanations + - **Placeholder as label**: Using placeholder text as the only field label + - **Generic fonts**: Defaulting to Inter/Roboto/Arial without intentional choice + **CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit. ## Generate Comprehensive Report diff --git a/dist/cursor/.cursor/commands/bolder.md b/dist/cursor/.cursor/commands/bolder.md index 0a4f90057..57f14d619 100644 --- a/dist/cursor/.cursor/commands/bolder.md +++ b/dist/cursor/.cursor/commands/bolder.md @@ -42,11 +42,12 @@ Systematically increase impact across these dimensions: - **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent ### Color Intensification -- **Increase saturation**: Shift to more vibrant, energetic colors -- **Bold palette**: Introduce unexpected color combinations +- **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 -- **Gradients**: Rich, multi-stop gradients or mesh gradients +- **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 @@ -63,10 +64,10 @@ Systematically increase impact across these dimensions: - **Custom elements**: Illustrative elements, custom icons, decorative details ### Motion & Animation -- **Entrance choreography**: Staggered, dramatic page load animations +- **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 between states +- **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 diff --git a/dist/cursor/.cursor/commands/clarify.md b/dist/cursor/.cursor/commands/clarify.md index 8969fcb91..cc1e5ff44 100644 --- a/dist/cursor/.cursor/commands/clarify.md +++ b/dist/cursor/.cursor/commands/clarify.md @@ -153,6 +153,8 @@ Every piece of copy should follow these rules: - 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 diff --git a/dist/cursor/.cursor/commands/colorize.md b/dist/cursor/.cursor/commands/colorize.md index 9ecfb2e56..6ad432cf1 100644 --- a/dist/cursor/.cursor/commands/colorize.md +++ b/dist/cursor/.cursor/commands/colorize.md @@ -54,11 +54,13 @@ Add color systematically across these dimensions: - **Hover states**: Introduce color on interaction ### Background & Surfaces -- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`#faf9f7`) or cool tints (`#f8f9fb`) +- **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 gradients +- **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 @@ -104,11 +106,13 @@ Ensure color addition improves rather than overwhelms: **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) -- Choose colors that conflict with brand identity -- Use pure black (`#000`) or pure white (`#fff`) for large areas +- Default to purple-blue gradients (AI slop aesthetic) ## Verify Color Addition diff --git a/dist/cursor/.cursor/commands/delight.md b/dist/cursor/.cursor/commands/delight.md index 1b892765e..75cdad20e 100644 --- a/dist/cursor/.cursor/commands/delight.md +++ b/dist/cursor/.cursor/commands/delight.md @@ -73,9 +73,10 @@ Add personality and joy through these methods: } /* Ripple effect on click */ -/* Spring animation on hover */ +/* Smooth lift on hover */ .button:hover { - animation: spring 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); + transform: translateY(-2px); + transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */ } ``` diff --git a/dist/cursor/.cursor/commands/polish.md b/dist/cursor/.cursor/commands/polish.md index 75e51e60a..6ec67d9ee 100644 --- a/dist/cursor/.cursor/commands/polish.md +++ b/dist/cursor/.cursor/commands/polish.md @@ -55,6 +55,8 @@ Work through these dimensions methodically: - **Theme consistency**: Works in all theme variants - **Color meaning**: Same colors mean same things throughout - **Accessible focus**: Focus indicators visible with sufficient contrast +- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) +- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency ### Interaction States @@ -73,9 +75,9 @@ Every interactive element needs all states: ### Micro-interactions & Transitions -- **Smooth transitions**: All state changes animated appropriately (200-300ms) -- **Consistent easing**: Same easing curves for similar transitions -- **No jank**: 60fps animations, no layout thrashing +- **Smooth transitions**: All state changes animated appropriately (150-300ms) +- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. +- **No jank**: 60fps animations, only animate transform and opacity - **Appropriate motion**: Motion serves purpose, not decoration - **Reduced motion**: Respects `prefers-reduced-motion` diff --git a/dist/cursor/.cursor/commands/quieter.md b/dist/cursor/.cursor/commands/quieter.md index 96c87101f..8ce58a580 100644 --- a/dist/cursor/.cursor/commands/quieter.md +++ b/dist/cursor/.cursor/commands/quieter.md @@ -41,6 +41,8 @@ Systematically reduce intensity across these dimensions: - **Reduce color variety**: Use fewer colors more thoughtfully - **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule) - **Gentler contrasts**: High contrast only where it matters most +- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness +- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead ### Visual Weight Reduction - **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate @@ -55,9 +57,11 @@ Systematically reduce intensity across these dimensions: - **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows ### Motion Reduction -- **Reduce animation intensity**: Shorter distances, gentler easing, slower speeds +- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing - **Remove decorative animations**: Keep functional motion, remove flourishes - **Subtle micro-interactions**: Replace dramatic effects with gentle feedback +- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic +- **Remove animations entirely** if they're not serving a clear purpose ### Composition Refinement - **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling diff --git a/dist/cursor/.cursor/commands/simplify.md b/dist/cursor/.cursor/commands/simplify.md index 751087118..7a28ab1ca 100644 --- a/dist/cursor/.cursor/commands/simplify.md +++ b/dist/cursor/.cursor/commands/simplify.md @@ -46,7 +46,8 @@ Systematically remove complexity across these dimensions: - **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 +- **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 @@ -69,6 +70,7 @@ Systematically remove complexity across these dimensions: - **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 diff --git a/dist/cursor/.cursor/rules/frontend-design.md b/dist/cursor/.cursor/rules/frontend-design.md index 2c3a61e72..ebdf45088 100644 --- a/dist/cursor/.cursor/rules/frontend-design.md +++ b/dist/cursor/.cursor/rules/frontend-design.md @@ -1583,7 +1583,7 @@ The common mistake: using the accent color everywhere because it's "the brand co 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 tinted version of the background color instead, or transparency +- **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) diff --git a/dist/gemini/.gemini/commands/animate.toml b/dist/gemini/.gemini/commands/animate.toml index c49ab8b37..dc44749cb 100644 --- a/dist/gemini/.gemini/commands/animate.toml +++ b/dist/gemini/.gemini/commands/animate.toml @@ -58,7 +58,7 @@ Add motion systematically across these categories: - **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, shake or bounce effects +- **Success/error**: Color transitions, icon animations, gentle scale pulse - **Enable/disable**: Opacity transitions, cursor changes ### Navigation & Flow @@ -83,6 +83,28 @@ Add motion systematically across these categories: 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 */ @@ -117,13 +139,13 @@ Use appropriate techniques for each animation: ``` **NEVER**: -- Animate without purpose (every animation should have a reason) -- Use long durations (>500ms feels laggy) -- Animate layout properties (width, height, top, left) - use transform instead -- Block interaction during animation (unless intentional) -- Ignore reduced motion preferences (accessibility violation) -- Animate everything (animation fatigue is real) -- Create animations that draw more attention than content +- 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 diff --git a/dist/gemini/.gemini/commands/audit.toml b/dist/gemini/.gemini/commands/audit.toml index a40cf80dd..bf2d45106 100644 --- a/dist/gemini/.gemini/commands/audit.toml +++ b/dist/gemini/.gemini/commands/audit.toml @@ -34,6 +34,15 @@ Run comprehensive checks across multiple dimensions: - **Text scaling**: Layouts that break when text size increases - **Missing breakpoints**: No mobile/tablet variants +5. **Design Anti-Patterns** - Check for: + - **Pure gray/black**: Using `#000`, `#808080`, or untinted grays (should have subtle color tint) + - **Gray on color**: Gray text on colored backgrounds (looks washed out—use a shade of the background color instead) + - **Nested cards**: Cards inside cards (visual noise, flatten hierarchy) + - **Bounce/elastic easing**: Dated animation curves (use ease-out-quart/quint/expo instead) + - **Redundant copy**: Headers restating intros, repeated explanations + - **Placeholder as label**: Using placeholder text as the only field label + - **Generic fonts**: Defaulting to Inter/Roboto/Arial without intentional choice + **CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit. ## Generate Comprehensive Report diff --git a/dist/gemini/.gemini/commands/bolder.toml b/dist/gemini/.gemini/commands/bolder.toml index a11b06542..ed32a7388 100644 --- a/dist/gemini/.gemini/commands/bolder.toml +++ b/dist/gemini/.gemini/commands/bolder.toml @@ -44,11 +44,12 @@ Systematically increase impact across these dimensions: - **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent ### Color Intensification -- **Increase saturation**: Shift to more vibrant, energetic colors -- **Bold palette**: Introduce unexpected color combinations +- **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 -- **Gradients**: Rich, multi-stop gradients or mesh gradients +- **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 @@ -65,10 +66,10 @@ Systematically increase impact across these dimensions: - **Custom elements**: Illustrative elements, custom icons, decorative details ### Motion & Animation -- **Entrance choreography**: Staggered, dramatic page load animations +- **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 between states +- **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 diff --git a/dist/gemini/.gemini/commands/clarify.toml b/dist/gemini/.gemini/commands/clarify.toml index 6f3dc1b24..45797e134 100644 --- a/dist/gemini/.gemini/commands/clarify.toml +++ b/dist/gemini/.gemini/commands/clarify.toml @@ -155,6 +155,8 @@ Every piece of copy should follow these rules: - 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 diff --git a/dist/gemini/.gemini/commands/colorize.toml b/dist/gemini/.gemini/commands/colorize.toml index e8a71ab28..bae5f8feb 100644 --- a/dist/gemini/.gemini/commands/colorize.toml +++ b/dist/gemini/.gemini/commands/colorize.toml @@ -56,11 +56,13 @@ Add color systematically across these dimensions: - **Hover states**: Introduce color on interaction ### Background & Surfaces -- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`#faf9f7`) or cool tints (`#f8f9fb`) +- **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 gradients +- **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 @@ -106,11 +108,13 @@ Ensure color addition improves rather than overwhelms: **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) -- Choose colors that conflict with brand identity -- Use pure black (`#000`) or pure white (`#fff`) for large areas +- Default to purple-blue gradients (AI slop aesthetic) ## Verify Color Addition diff --git a/dist/gemini/.gemini/commands/delight.toml b/dist/gemini/.gemini/commands/delight.toml index 842bd2e43..f1c401cfe 100644 --- a/dist/gemini/.gemini/commands/delight.toml +++ b/dist/gemini/.gemini/commands/delight.toml @@ -75,9 +75,10 @@ Add personality and joy through these methods: } /* Ripple effect on click */ -/* Spring animation on hover */ +/* Smooth lift on hover */ .button:hover { - animation: spring 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); + transform: translateY(-2px); + transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */ } ``` diff --git a/dist/gemini/.gemini/commands/polish.toml b/dist/gemini/.gemini/commands/polish.toml index cd1498c2b..d0119f1a2 100644 --- a/dist/gemini/.gemini/commands/polish.toml +++ b/dist/gemini/.gemini/commands/polish.toml @@ -57,6 +57,8 @@ Work through these dimensions methodically: - **Theme consistency**: Works in all theme variants - **Color meaning**: Same colors mean same things throughout - **Accessible focus**: Focus indicators visible with sufficient contrast +- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) +- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency ### Interaction States @@ -75,9 +77,9 @@ Every interactive element needs all states: ### Micro-interactions & Transitions -- **Smooth transitions**: All state changes animated appropriately (200-300ms) -- **Consistent easing**: Same easing curves for similar transitions -- **No jank**: 60fps animations, no layout thrashing +- **Smooth transitions**: All state changes animated appropriately (150-300ms) +- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. +- **No jank**: 60fps animations, only animate transform and opacity - **Appropriate motion**: Motion serves purpose, not decoration - **Reduced motion**: Respects `prefers-reduced-motion` diff --git a/dist/gemini/.gemini/commands/quieter.toml b/dist/gemini/.gemini/commands/quieter.toml index 7fea156d0..a28f9a0f1 100644 --- a/dist/gemini/.gemini/commands/quieter.toml +++ b/dist/gemini/.gemini/commands/quieter.toml @@ -43,6 +43,8 @@ Systematically reduce intensity across these dimensions: - **Reduce color variety**: Use fewer colors more thoughtfully - **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule) - **Gentler contrasts**: High contrast only where it matters most +- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness +- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead ### Visual Weight Reduction - **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate @@ -57,9 +59,11 @@ Systematically reduce intensity across these dimensions: - **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows ### Motion Reduction -- **Reduce animation intensity**: Shorter distances, gentler easing, slower speeds +- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing - **Remove decorative animations**: Keep functional motion, remove flourishes - **Subtle micro-interactions**: Replace dramatic effects with gentle feedback +- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic +- **Remove animations entirely** if they're not serving a clear purpose ### Composition Refinement - **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling diff --git a/dist/gemini/.gemini/commands/simplify.toml b/dist/gemini/.gemini/commands/simplify.toml index 11db3dde6..58ac4ef30 100644 --- a/dist/gemini/.gemini/commands/simplify.toml +++ b/dist/gemini/.gemini/commands/simplify.toml @@ -48,7 +48,8 @@ Systematically remove complexity across these dimensions: - **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 +- **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 @@ -71,6 +72,7 @@ Systematically remove complexity across these dimensions: - **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 diff --git a/dist/gemini/GEMINI.frontend-design.md b/dist/gemini/GEMINI.frontend-design.md index 2c3a61e72..ebdf45088 100644 --- a/dist/gemini/GEMINI.frontend-design.md +++ b/dist/gemini/GEMINI.frontend-design.md @@ -1583,7 +1583,7 @@ The common mistake: using the accent color everywhere because it's "the brand co 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 tinted version of the background color instead, or transparency +- **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) diff --git a/source/commands/animate.md b/source/commands/animate.md index 0b22afe56..f54c06f68 100644 --- a/source/commands/animate.md +++ b/source/commands/animate.md @@ -65,7 +65,7 @@ Add motion systematically across these categories: - **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, shake or bounce effects +- **Success/error**: Color transitions, icon animations, gentle scale pulse - **Enable/disable**: Opacity transitions, cursor changes ### Navigation & Flow @@ -90,6 +90,28 @@ Add motion systematically across these categories: 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 */ @@ -124,13 +146,13 @@ Use appropriate techniques for each animation: ``` **NEVER**: -- Animate without purpose (every animation should have a reason) -- Use long durations (>500ms feels laggy) -- Animate layout properties (width, height, top, left) - use transform instead -- Block interaction during animation (unless intentional) -- Ignore reduced motion preferences (accessibility violation) -- Animate everything (animation fatigue is real) -- Create animations that draw more attention than content +- 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 diff --git a/source/commands/audit.md b/source/commands/audit.md index b03bf350f..011451e82 100644 --- a/source/commands/audit.md +++ b/source/commands/audit.md @@ -41,6 +41,15 @@ Run comprehensive checks across multiple dimensions: - **Text scaling**: Layouts that break when text size increases - **Missing breakpoints**: No mobile/tablet variants +5. **Design Anti-Patterns** - Check for: + - **Pure gray/black**: Using `#000`, `#808080`, or untinted grays (should have subtle color tint) + - **Gray on color**: Gray text on colored backgrounds (looks washed out—use a shade of the background color instead) + - **Nested cards**: Cards inside cards (visual noise, flatten hierarchy) + - **Bounce/elastic easing**: Dated animation curves (use ease-out-quart/quint/expo instead) + - **Redundant copy**: Headers restating intros, repeated explanations + - **Placeholder as label**: Using placeholder text as the only field label + - **Generic fonts**: Defaulting to Inter/Roboto/Arial without intentional choice + **CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit. ## Generate Comprehensive Report diff --git a/source/commands/bolder.md b/source/commands/bolder.md index e4ad89a7e..41adc3c20 100644 --- a/source/commands/bolder.md +++ b/source/commands/bolder.md @@ -51,11 +51,12 @@ Systematically increase impact across these dimensions: - **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent ### Color Intensification -- **Increase saturation**: Shift to more vibrant, energetic colors -- **Bold palette**: Introduce unexpected color combinations +- **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 -- **Gradients**: Rich, multi-stop gradients or mesh gradients +- **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 @@ -72,10 +73,10 @@ Systematically increase impact across these dimensions: - **Custom elements**: Illustrative elements, custom icons, decorative details ### Motion & Animation -- **Entrance choreography**: Staggered, dramatic page load animations +- **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 between states +- **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 diff --git a/source/commands/clarify.md b/source/commands/clarify.md index afa5c75d1..93cf123fe 100644 --- a/source/commands/clarify.md +++ b/source/commands/clarify.md @@ -162,6 +162,8 @@ Every piece of copy should follow these rules: - 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 diff --git a/source/commands/colorize.md b/source/commands/colorize.md index 5a943c3e9..e4ec55b6c 100644 --- a/source/commands/colorize.md +++ b/source/commands/colorize.md @@ -63,11 +63,13 @@ Add color systematically across these dimensions: - **Hover states**: Introduce color on interaction ### Background & Surfaces -- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`#faf9f7`) or cool tints (`#f8f9fb`) +- **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 gradients +- **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 @@ -113,11 +115,13 @@ Ensure color addition improves rather than overwhelms: **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) -- Choose colors that conflict with brand identity -- Use pure black (`#000`) or pure white (`#fff`) for large areas +- Default to purple-blue gradients (AI slop aesthetic) ## Verify Color Addition diff --git a/source/commands/delight.md b/source/commands/delight.md index 1c1e0f242..ba5188b3c 100644 --- a/source/commands/delight.md +++ b/source/commands/delight.md @@ -82,9 +82,10 @@ Add personality and joy through these methods: } /* Ripple effect on click */ -/* Spring animation on hover */ +/* Smooth lift on hover */ .button:hover { - animation: spring 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); + transform: translateY(-2px); + transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */ } ``` diff --git a/source/commands/polish.md b/source/commands/polish.md index 2091cc323..568d8bfe2 100644 --- a/source/commands/polish.md +++ b/source/commands/polish.md @@ -64,6 +64,8 @@ Work through these dimensions methodically: - **Theme consistency**: Works in all theme variants - **Color meaning**: Same colors mean same things throughout - **Accessible focus**: Focus indicators visible with sufficient contrast +- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) +- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency ### Interaction States @@ -82,9 +84,9 @@ Every interactive element needs all states: ### Micro-interactions & Transitions -- **Smooth transitions**: All state changes animated appropriately (200-300ms) -- **Consistent easing**: Same easing curves for similar transitions -- **No jank**: 60fps animations, no layout thrashing +- **Smooth transitions**: All state changes animated appropriately (150-300ms) +- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. +- **No jank**: 60fps animations, only animate transform and opacity - **Appropriate motion**: Motion serves purpose, not decoration - **Reduced motion**: Respects `prefers-reduced-motion` diff --git a/source/commands/quieter.md b/source/commands/quieter.md index f1c208600..ec9723252 100644 --- a/source/commands/quieter.md +++ b/source/commands/quieter.md @@ -50,6 +50,8 @@ Systematically reduce intensity across these dimensions: - **Reduce color variety**: Use fewer colors more thoughtfully - **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule) - **Gentler contrasts**: High contrast only where it matters most +- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness +- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead ### Visual Weight Reduction - **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate @@ -64,9 +66,11 @@ Systematically reduce intensity across these dimensions: - **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows ### Motion Reduction -- **Reduce animation intensity**: Shorter distances, gentler easing, slower speeds +- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing - **Remove decorative animations**: Keep functional motion, remove flourishes - **Subtle micro-interactions**: Replace dramatic effects with gentle feedback +- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic +- **Remove animations entirely** if they're not serving a clear purpose ### Composition Refinement - **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling diff --git a/source/commands/simplify.md b/source/commands/simplify.md index bd6857e94..ce7ec516e 100644 --- a/source/commands/simplify.md +++ b/source/commands/simplify.md @@ -55,7 +55,8 @@ Systematically remove complexity across these dimensions: - **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 +- **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 @@ -78,6 +79,7 @@ Systematically remove complexity across these dimensions: - **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 diff --git a/source/skills/frontend-design/reference/color-and-contrast.md b/source/skills/frontend-design/reference/color-and-contrast.md index 90e20e247..29a1f9851 100644 --- a/source/skills/frontend-design/reference/color-and-contrast.md +++ b/source/skills/frontend-design/reference/color-and-contrast.md @@ -97,7 +97,7 @@ The common mistake: using the accent color everywhere because it's "the brand co 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 tinted version of the background color instead, or transparency +- **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)