From 46fa43ced63ebc6dd2122edd72334ac0a0b95784 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Thu, 8 Jan 2026 13:59:13 -0800 Subject: [PATCH] Consolidate all anti-patterns into single skill section - Removed scattered DON'Ts from individual Frontend Aesthetics sections - Created ONE "Anti-Patterns (CRITICAL)" section with two sub-sections: - AI Slop Tells: cyan-on-dark, gradient text, glassmorphism, hero metrics, etc. - Design Anti-Patterns: gray on color, nested cards, bounce easing, etc. - Added new pattern: "Rounded element with thick colored border on one side" - Commands now reference the skill's Anti-Patterns section instead of duplicating - Easier to maintain: one place to update Co-Authored-By: Claude Opus 4.5 --- .claude/commands/audit.md | 25 +---- .claude/commands/critique.md | 23 +---- .claude/skills/frontend-design/SKILL.md | 92 +++++++++-------- .../.claude/commands/i-audit.md | 25 +---- .../.claude/commands/i-critique.md | 23 +---- .../.claude/skills/frontend-design/SKILL.md | 92 +++++++++-------- dist/claude-code/.claude/commands/audit.md | 25 +---- dist/claude-code/.claude/commands/critique.md | 23 +---- .../.claude/skills/frontend-design/SKILL.md | 92 +++++++++-------- dist/codex-prefixed/.codex/prompts/i-audit.md | 25 +---- .../.codex/prompts/i-critique.md | 23 +---- .../.codex/skills/frontend-design/SKILL.md | 92 +++++++++-------- dist/codex/.codex/prompts/audit.md | 25 +---- dist/codex/.codex/prompts/critique.md | 23 +---- .../.codex/skills/frontend-design/SKILL.md | 92 +++++++++-------- .../.cursor/commands/i-audit.md | 25 +---- .../.cursor/commands/i-critique.md | 23 +---- .../.cursor/skills/frontend-design/SKILL.md | 92 +++++++++-------- dist/cursor/.cursor/commands/audit.md | 25 +---- dist/cursor/.cursor/commands/critique.md | 23 +---- .../.cursor/skills/frontend-design/SKILL.md | 92 +++++++++-------- .../.gemini/commands/i-audit.toml | 25 +---- .../.gemini/commands/i-critique.toml | 23 +---- .../.gemini/skills/frontend-design/SKILL.md | 92 +++++++++-------- dist/gemini/.gemini/commands/audit.toml | 25 +---- dist/gemini/.gemini/commands/critique.toml | 23 +---- .../.gemini/skills/frontend-design/SKILL.md | 92 +++++++++-------- source/commands/audit.md | 25 +---- source/commands/critique.md | 23 +---- source/skills/frontend-design/SKILL.md | 98 ++++++++++--------- 30 files changed, 583 insertions(+), 823 deletions(-) diff --git a/.claude/commands/audit.md b/.claude/commands/audit.md index 00260c136..066c14f0b 100644 --- a/.claude/commands/audit.md +++ b/.claude/commands/audit.md @@ -44,26 +44,7 @@ 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 - -6. **AI Slop Detection (CRITICAL)** - Does this look AI-generated? Check for: - - **AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds - - **Gradient text**: Especially on metrics or headings—decorative rather than meaningful - - **Default dark mode with glowing accents**: "Cool" without requiring design decisions - - **Monospace typography**: Lazy shorthand for "technical/developer" vibes - - **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively - - **Hero metric layout**: Big number, small label, supporting stats, gradient accent—it's a template - - **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing - - **Identical card grids**: Same-sized cards with icon + heading + text, repeated - - **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell - - **Rounded rectangles with generic shadows**: Safe, forgettable, could be any AI output +5. **Anti-Patterns (CRITICAL)** - Check against the **Anti-Patterns** section in the frontend-design skill. Look for both AI slop tells (cyan-on-dark, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). **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. @@ -71,8 +52,8 @@ Run comprehensive checks across multiple dimensions: Create a detailed audit report with the following structure: -### AI Slop Verdict -**Start here.** Pass/fail: Does this look AI-generated? List specific tells if yes. Be brutally honest—this is the most important quality signal. +### 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. ### Executive Summary - Total issues found (count by severity) diff --git a/.claude/commands/critique.md b/.claude/commands/critique.md index b600c7e04..f3c7757af 100644 --- a/.claude/commands/critique.md +++ b/.claude/commands/critique.md @@ -18,24 +18,11 @@ 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? Watch for these tells: +**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025? -- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds. These combinations have become a fingerprint for AI-generated work. -- **Gradient text for "impact"**: Especially on metrics or headings. It's decorative rather than meaningful. -- **Default dark mode**: AI loves dark themes with glowing accents because it looks "cool" without requiring actual design decisions. -- **Monospace typography**: Lazy shorthand for "this is technical/for developers." -- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders—used decoratively rather than purposefully. -- **Hero metric layout**: Big number, small label, supporting stats, gradient accent. It's a template now. -- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing. -- **Cards nested in cards**: The AI's go-to for "organizing" content. -- **Inter/Roboto/system fonts**: The path of least resistance. -- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell. -- **Rounded rectangles with drop shadows**: Generic, safe, forgettable. -- **Identical card grids**: Same-sized cards with icon + heading + text, repeated. +Review the design against the **AI Slop Detection** section and all **DON'T** guidelines in the frontend-design skill. Check for the AI color palette, gradient text, default dark mode with glowing accents, glassmorphism, hero metric layouts, card grids, generic fonts, and all other tells. -**Ask yourself**: If you showed this 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?" +**The test**: If you showed this 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?" ### 2. Visual Hierarchy - Does the eye flow to the most important element first? @@ -95,8 +82,8 @@ A distinctive interface should make someone ask "how was this made?" not "which Structure your feedback as a design director would: -### AI Slop Verdict -**Start here.** Give a clear verdict: Does this look AI-generated? If yes, list the specific tells you spotted. This is pass/fail—either it's distinctive or it's not. Be brutally honest. +### 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. diff --git a/.claude/skills/frontend-design/SKILL.md b/.claude/skills/frontend-design/SKILL.md index 65a4ee945..0f35955a6 100644 --- a/.claude/skills/frontend-design/SKILL.md +++ b/.claude/skills/frontend-design/SKILL.md @@ -36,72 +36,80 @@ Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is: ### 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**: Put large icons with rounded corners above every heading—they rarely add value and make sites look templated +Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font. Use a modular type scale with fluid sizing (clamp). Vary font weights and sizes to create clear visual hierarchy. ### 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**: Reach for purple-to-blue gradients on white—it's the #1 "AI slop" tell +Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Use modern CSS color functions (oklch, color-mix, light-dark) for perceptually uniform, maintainable palettes. Tint your neutrals toward your brand hue—even a subtle hint creates subconscious cohesion. ### 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 -**DON'T**: Nest cards inside cards -**DON'T**: Use modals unless there's truly no better alternative—modals are lazy -**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 +Create visual rhythm through varied spacing—tight groupings, generous separations. Use fluid spacing with clamp() that breathes on larger screens. Embrace asymmetry and unexpected compositions. Break the grid intentionally for emphasis. ### 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 +Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Use motion to convey state changes—entrances, exits, feedback. Use exponential easing (ease-out-quart/quint/expo) for natural deceleration. For height animations, use grid-template-rows transitions instead of animating height directly. ### 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 +Make interactions feel fast. Use optimistic UI—update immediately, sync later. Use progressive disclosure—start simple, reveal sophistication through interaction. Design empty states that teach the interface, not just say "nothing here". Make every interactive surface feel intentional and responsive. ### 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 +Use container queries (@container) for component-level responsiveness. Adapt the interface for different contexts—don't just shrink 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 +Make every word earn its place. + +--- + +## Anti-Patterns (CRITICAL) + +**This is the most important section.** These patterns make interfaces look generic, dated, or obviously AI-generated. Avoid ALL of them: + +### AI Slop Tells +These scream "AI made this" and have become fingerprints for AI-generated work from 2024-2025: + +- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds +- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell +- **Gradient text for "impact"**: Especially on metrics or headings—decorative rather than meaningful +- **Default dark mode with glowing accents**: Looks "cool" without requiring actual design decisions +- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively rather than purposefully +- **Rounded element with thick colored border on one side**: A lazy accent that almost never looks intentional +- **Hero metric layout**: Big number, small label, supporting stats below, gradient accent—it's a template +- **Identical card grids**: Same-sized cards with icon + heading + text, repeated endlessly +- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing meaningful +- **Large rounded icons above every heading**: Rarely adds value, makes sites look templated +- **Inter, Roboto, Arial, Open Sans, system fonts**: The path of least resistance +- **Monospace typography for "technical" vibes**: Lazy shorthand for "this is for developers" +- **Rounded rectangles with generic drop shadows**: Safe, forgettable, could be any AI output + +### Design Anti-Patterns +These are just bad design, AI or not: + +- **Gray text on colored backgrounds**: Looks washed out—use a shade of the background color instead +- **Pure black (#000) or pure white (#fff)**: Always tint; pure black/white never appears in nature +- **Wrap everything in cards**: Not everything needs a container +- **Nest cards inside cards**: Visual noise—flatten the hierarchy +- **Modals for everything**: Modals are lazy; find a better alternative +- **Center everything**: Left-aligned text with asymmetric layouts feels more designed +- **Same spacing everywhere**: Without rhythm, layouts feel monotonous +- **Animate layout properties**: Use transform and opacity only, never width/height/padding/margin +- **Bounce or elastic easing**: Feels dated and tacky; real objects decelerate smoothly +- **Redundant copy**: Headers restating intros, repeated explanations +- **Every button is primary**: Use ghost buttons, text links, secondary styles; hierarchy matters +- **Hide functionality on mobile**: Adapt the interface, don't amputate it +- **Repeat information**: If users can already see it, don't say it again + +### The Test +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?" --- diff --git a/dist/claude-code-prefixed/.claude/commands/i-audit.md b/dist/claude-code-prefixed/.claude/commands/i-audit.md index 74b8bbe15..6bba2d63e 100644 --- a/dist/claude-code-prefixed/.claude/commands/i-audit.md +++ b/dist/claude-code-prefixed/.claude/commands/i-audit.md @@ -44,26 +44,7 @@ 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 - -6. **AI Slop Detection (CRITICAL)** - Does this look AI-generated? Check for: - - **AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds - - **Gradient text**: Especially on metrics or headings—decorative rather than meaningful - - **Default dark mode with glowing accents**: "Cool" without requiring design decisions - - **Monospace typography**: Lazy shorthand for "technical/developer" vibes - - **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively - - **Hero metric layout**: Big number, small label, supporting stats, gradient accent—it's a template - - **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing - - **Identical card grids**: Same-sized cards with icon + heading + text, repeated - - **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell - - **Rounded rectangles with generic shadows**: Safe, forgettable, could be any AI output +5. **Anti-Patterns (CRITICAL)** - Check against the **Anti-Patterns** section in the frontend-design skill. Look for both AI slop tells (cyan-on-dark, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). **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. @@ -71,8 +52,8 @@ Run comprehensive checks across multiple dimensions: Create a detailed audit report with the following structure: -### AI Slop Verdict -**Start here.** Pass/fail: Does this look AI-generated? List specific tells if yes. Be brutally honest—this is the most important quality signal. +### 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. ### Executive Summary - Total issues found (count by severity) diff --git a/dist/claude-code-prefixed/.claude/commands/i-critique.md b/dist/claude-code-prefixed/.claude/commands/i-critique.md index 2aa2324d9..39965195d 100644 --- a/dist/claude-code-prefixed/.claude/commands/i-critique.md +++ b/dist/claude-code-prefixed/.claude/commands/i-critique.md @@ -18,24 +18,11 @@ 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? Watch for these tells: +**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025? -- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds. These combinations have become a fingerprint for AI-generated work. -- **Gradient text for "impact"**: Especially on metrics or headings. It's decorative rather than meaningful. -- **Default dark mode**: AI loves dark themes with glowing accents because it looks "cool" without requiring actual design decisions. -- **Monospace typography**: Lazy shorthand for "this is technical/for developers." -- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders—used decoratively rather than purposefully. -- **Hero metric layout**: Big number, small label, supporting stats, gradient accent. It's a template now. -- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing. -- **Cards nested in cards**: The AI's go-to for "organizing" content. -- **Inter/Roboto/system fonts**: The path of least resistance. -- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell. -- **Rounded rectangles with drop shadows**: Generic, safe, forgettable. -- **Identical card grids**: Same-sized cards with icon + heading + text, repeated. +Review the design against the **AI Slop Detection** section and all **DON'T** guidelines in the frontend-design skill. Check for the AI color palette, gradient text, default dark mode with glowing accents, glassmorphism, hero metric layouts, card grids, generic fonts, and all other tells. -**Ask yourself**: If you showed this 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?" +**The test**: If you showed this 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?" ### 2. Visual Hierarchy - Does the eye flow to the most important element first? @@ -95,8 +82,8 @@ A distinctive interface should make someone ask "how was this made?" not "which Structure your feedback as a design director would: -### AI Slop Verdict -**Start here.** Give a clear verdict: Does this look AI-generated? If yes, list the specific tells you spotted. This is pass/fail—either it's distinctive or it's not. Be brutally honest. +### 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. diff --git a/dist/claude-code-prefixed/.claude/skills/frontend-design/SKILL.md b/dist/claude-code-prefixed/.claude/skills/frontend-design/SKILL.md index 65a4ee945..0f35955a6 100644 --- a/dist/claude-code-prefixed/.claude/skills/frontend-design/SKILL.md +++ b/dist/claude-code-prefixed/.claude/skills/frontend-design/SKILL.md @@ -36,72 +36,80 @@ Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is: ### 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**: Put large icons with rounded corners above every heading—they rarely add value and make sites look templated +Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font. Use a modular type scale with fluid sizing (clamp). Vary font weights and sizes to create clear visual hierarchy. ### 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**: Reach for purple-to-blue gradients on white—it's the #1 "AI slop" tell +Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Use modern CSS color functions (oklch, color-mix, light-dark) for perceptually uniform, maintainable palettes. Tint your neutrals toward your brand hue—even a subtle hint creates subconscious cohesion. ### 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 -**DON'T**: Nest cards inside cards -**DON'T**: Use modals unless there's truly no better alternative—modals are lazy -**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 +Create visual rhythm through varied spacing—tight groupings, generous separations. Use fluid spacing with clamp() that breathes on larger screens. Embrace asymmetry and unexpected compositions. Break the grid intentionally for emphasis. ### 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 +Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Use motion to convey state changes—entrances, exits, feedback. Use exponential easing (ease-out-quart/quint/expo) for natural deceleration. For height animations, use grid-template-rows transitions instead of animating height directly. ### 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 +Make interactions feel fast. Use optimistic UI—update immediately, sync later. Use progressive disclosure—start simple, reveal sophistication through interaction. Design empty states that teach the interface, not just say "nothing here". Make every interactive surface feel intentional and responsive. ### 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 +Use container queries (@container) for component-level responsiveness. Adapt the interface for different contexts—don't just shrink 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 +Make every word earn its place. + +--- + +## Anti-Patterns (CRITICAL) + +**This is the most important section.** These patterns make interfaces look generic, dated, or obviously AI-generated. Avoid ALL of them: + +### AI Slop Tells +These scream "AI made this" and have become fingerprints for AI-generated work from 2024-2025: + +- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds +- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell +- **Gradient text for "impact"**: Especially on metrics or headings—decorative rather than meaningful +- **Default dark mode with glowing accents**: Looks "cool" without requiring actual design decisions +- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively rather than purposefully +- **Rounded element with thick colored border on one side**: A lazy accent that almost never looks intentional +- **Hero metric layout**: Big number, small label, supporting stats below, gradient accent—it's a template +- **Identical card grids**: Same-sized cards with icon + heading + text, repeated endlessly +- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing meaningful +- **Large rounded icons above every heading**: Rarely adds value, makes sites look templated +- **Inter, Roboto, Arial, Open Sans, system fonts**: The path of least resistance +- **Monospace typography for "technical" vibes**: Lazy shorthand for "this is for developers" +- **Rounded rectangles with generic drop shadows**: Safe, forgettable, could be any AI output + +### Design Anti-Patterns +These are just bad design, AI or not: + +- **Gray text on colored backgrounds**: Looks washed out—use a shade of the background color instead +- **Pure black (#000) or pure white (#fff)**: Always tint; pure black/white never appears in nature +- **Wrap everything in cards**: Not everything needs a container +- **Nest cards inside cards**: Visual noise—flatten the hierarchy +- **Modals for everything**: Modals are lazy; find a better alternative +- **Center everything**: Left-aligned text with asymmetric layouts feels more designed +- **Same spacing everywhere**: Without rhythm, layouts feel monotonous +- **Animate layout properties**: Use transform and opacity only, never width/height/padding/margin +- **Bounce or elastic easing**: Feels dated and tacky; real objects decelerate smoothly +- **Redundant copy**: Headers restating intros, repeated explanations +- **Every button is primary**: Use ghost buttons, text links, secondary styles; hierarchy matters +- **Hide functionality on mobile**: Adapt the interface, don't amputate it +- **Repeat information**: If users can already see it, don't say it again + +### The Test +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?" --- diff --git a/dist/claude-code/.claude/commands/audit.md b/dist/claude-code/.claude/commands/audit.md index 00260c136..066c14f0b 100644 --- a/dist/claude-code/.claude/commands/audit.md +++ b/dist/claude-code/.claude/commands/audit.md @@ -44,26 +44,7 @@ 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 - -6. **AI Slop Detection (CRITICAL)** - Does this look AI-generated? Check for: - - **AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds - - **Gradient text**: Especially on metrics or headings—decorative rather than meaningful - - **Default dark mode with glowing accents**: "Cool" without requiring design decisions - - **Monospace typography**: Lazy shorthand for "technical/developer" vibes - - **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively - - **Hero metric layout**: Big number, small label, supporting stats, gradient accent—it's a template - - **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing - - **Identical card grids**: Same-sized cards with icon + heading + text, repeated - - **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell - - **Rounded rectangles with generic shadows**: Safe, forgettable, could be any AI output +5. **Anti-Patterns (CRITICAL)** - Check against the **Anti-Patterns** section in the frontend-design skill. Look for both AI slop tells (cyan-on-dark, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). **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. @@ -71,8 +52,8 @@ Run comprehensive checks across multiple dimensions: Create a detailed audit report with the following structure: -### AI Slop Verdict -**Start here.** Pass/fail: Does this look AI-generated? List specific tells if yes. Be brutally honest—this is the most important quality signal. +### 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. ### Executive Summary - Total issues found (count by severity) diff --git a/dist/claude-code/.claude/commands/critique.md b/dist/claude-code/.claude/commands/critique.md index b600c7e04..f3c7757af 100644 --- a/dist/claude-code/.claude/commands/critique.md +++ b/dist/claude-code/.claude/commands/critique.md @@ -18,24 +18,11 @@ 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? Watch for these tells: +**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025? -- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds. These combinations have become a fingerprint for AI-generated work. -- **Gradient text for "impact"**: Especially on metrics or headings. It's decorative rather than meaningful. -- **Default dark mode**: AI loves dark themes with glowing accents because it looks "cool" without requiring actual design decisions. -- **Monospace typography**: Lazy shorthand for "this is technical/for developers." -- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders—used decoratively rather than purposefully. -- **Hero metric layout**: Big number, small label, supporting stats, gradient accent. It's a template now. -- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing. -- **Cards nested in cards**: The AI's go-to for "organizing" content. -- **Inter/Roboto/system fonts**: The path of least resistance. -- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell. -- **Rounded rectangles with drop shadows**: Generic, safe, forgettable. -- **Identical card grids**: Same-sized cards with icon + heading + text, repeated. +Review the design against the **AI Slop Detection** section and all **DON'T** guidelines in the frontend-design skill. Check for the AI color palette, gradient text, default dark mode with glowing accents, glassmorphism, hero metric layouts, card grids, generic fonts, and all other tells. -**Ask yourself**: If you showed this 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?" +**The test**: If you showed this 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?" ### 2. Visual Hierarchy - Does the eye flow to the most important element first? @@ -95,8 +82,8 @@ A distinctive interface should make someone ask "how was this made?" not "which Structure your feedback as a design director would: -### AI Slop Verdict -**Start here.** Give a clear verdict: Does this look AI-generated? If yes, list the specific tells you spotted. This is pass/fail—either it's distinctive or it's not. Be brutally honest. +### 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. diff --git a/dist/claude-code/.claude/skills/frontend-design/SKILL.md b/dist/claude-code/.claude/skills/frontend-design/SKILL.md index 65a4ee945..0f35955a6 100644 --- a/dist/claude-code/.claude/skills/frontend-design/SKILL.md +++ b/dist/claude-code/.claude/skills/frontend-design/SKILL.md @@ -36,72 +36,80 @@ Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is: ### 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**: Put large icons with rounded corners above every heading—they rarely add value and make sites look templated +Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font. Use a modular type scale with fluid sizing (clamp). Vary font weights and sizes to create clear visual hierarchy. ### 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**: Reach for purple-to-blue gradients on white—it's the #1 "AI slop" tell +Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Use modern CSS color functions (oklch, color-mix, light-dark) for perceptually uniform, maintainable palettes. Tint your neutrals toward your brand hue—even a subtle hint creates subconscious cohesion. ### 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 -**DON'T**: Nest cards inside cards -**DON'T**: Use modals unless there's truly no better alternative—modals are lazy -**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 +Create visual rhythm through varied spacing—tight groupings, generous separations. Use fluid spacing with clamp() that breathes on larger screens. Embrace asymmetry and unexpected compositions. Break the grid intentionally for emphasis. ### 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 +Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Use motion to convey state changes—entrances, exits, feedback. Use exponential easing (ease-out-quart/quint/expo) for natural deceleration. For height animations, use grid-template-rows transitions instead of animating height directly. ### 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 +Make interactions feel fast. Use optimistic UI—update immediately, sync later. Use progressive disclosure—start simple, reveal sophistication through interaction. Design empty states that teach the interface, not just say "nothing here". Make every interactive surface feel intentional and responsive. ### 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 +Use container queries (@container) for component-level responsiveness. Adapt the interface for different contexts—don't just shrink 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 +Make every word earn its place. + +--- + +## Anti-Patterns (CRITICAL) + +**This is the most important section.** These patterns make interfaces look generic, dated, or obviously AI-generated. Avoid ALL of them: + +### AI Slop Tells +These scream "AI made this" and have become fingerprints for AI-generated work from 2024-2025: + +- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds +- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell +- **Gradient text for "impact"**: Especially on metrics or headings—decorative rather than meaningful +- **Default dark mode with glowing accents**: Looks "cool" without requiring actual design decisions +- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively rather than purposefully +- **Rounded element with thick colored border on one side**: A lazy accent that almost never looks intentional +- **Hero metric layout**: Big number, small label, supporting stats below, gradient accent—it's a template +- **Identical card grids**: Same-sized cards with icon + heading + text, repeated endlessly +- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing meaningful +- **Large rounded icons above every heading**: Rarely adds value, makes sites look templated +- **Inter, Roboto, Arial, Open Sans, system fonts**: The path of least resistance +- **Monospace typography for "technical" vibes**: Lazy shorthand for "this is for developers" +- **Rounded rectangles with generic drop shadows**: Safe, forgettable, could be any AI output + +### Design Anti-Patterns +These are just bad design, AI or not: + +- **Gray text on colored backgrounds**: Looks washed out—use a shade of the background color instead +- **Pure black (#000) or pure white (#fff)**: Always tint; pure black/white never appears in nature +- **Wrap everything in cards**: Not everything needs a container +- **Nest cards inside cards**: Visual noise—flatten the hierarchy +- **Modals for everything**: Modals are lazy; find a better alternative +- **Center everything**: Left-aligned text with asymmetric layouts feels more designed +- **Same spacing everywhere**: Without rhythm, layouts feel monotonous +- **Animate layout properties**: Use transform and opacity only, never width/height/padding/margin +- **Bounce or elastic easing**: Feels dated and tacky; real objects decelerate smoothly +- **Redundant copy**: Headers restating intros, repeated explanations +- **Every button is primary**: Use ghost buttons, text links, secondary styles; hierarchy matters +- **Hide functionality on mobile**: Adapt the interface, don't amputate it +- **Repeat information**: If users can already see it, don't say it again + +### The Test +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?" --- diff --git a/dist/codex-prefixed/.codex/prompts/i-audit.md b/dist/codex-prefixed/.codex/prompts/i-audit.md index 85ccf8adf..214dcac15 100644 --- a/dist/codex-prefixed/.codex/prompts/i-audit.md +++ b/dist/codex-prefixed/.codex/prompts/i-audit.md @@ -39,26 +39,7 @@ 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 - -6. **AI Slop Detection (CRITICAL)** - Does this look AI-generated? Check for: - - **AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds - - **Gradient text**: Especially on metrics or headings—decorative rather than meaningful - - **Default dark mode with glowing accents**: "Cool" without requiring design decisions - - **Monospace typography**: Lazy shorthand for "technical/developer" vibes - - **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively - - **Hero metric layout**: Big number, small label, supporting stats, gradient accent—it's a template - - **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing - - **Identical card grids**: Same-sized cards with icon + heading + text, repeated - - **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell - - **Rounded rectangles with generic shadows**: Safe, forgettable, could be any AI output +5. **Anti-Patterns (CRITICAL)** - Check against the **Anti-Patterns** section in the frontend-design skill. Look for both AI slop tells (cyan-on-dark, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). **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. @@ -66,8 +47,8 @@ Run comprehensive checks across multiple dimensions: Create a detailed audit report with the following structure: -### AI Slop Verdict -**Start here.** Pass/fail: Does this look AI-generated? List specific tells if yes. Be brutally honest—this is the most important quality signal. +### 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. ### Executive Summary - Total issues found (count by severity) diff --git a/dist/codex-prefixed/.codex/prompts/i-critique.md b/dist/codex-prefixed/.codex/prompts/i-critique.md index baeae485f..179920205 100644 --- a/dist/codex-prefixed/.codex/prompts/i-critique.md +++ b/dist/codex-prefixed/.codex/prompts/i-critique.md @@ -13,24 +13,11 @@ 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? Watch for these tells: +**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025? -- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds. These combinations have become a fingerprint for AI-generated work. -- **Gradient text for "impact"**: Especially on metrics or headings. It's decorative rather than meaningful. -- **Default dark mode**: AI loves dark themes with glowing accents because it looks "cool" without requiring actual design decisions. -- **Monospace typography**: Lazy shorthand for "this is technical/for developers." -- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders—used decoratively rather than purposefully. -- **Hero metric layout**: Big number, small label, supporting stats, gradient accent. It's a template now. -- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing. -- **Cards nested in cards**: The AI's go-to for "organizing" content. -- **Inter/Roboto/system fonts**: The path of least resistance. -- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell. -- **Rounded rectangles with drop shadows**: Generic, safe, forgettable. -- **Identical card grids**: Same-sized cards with icon + heading + text, repeated. +Review the design against the **AI Slop Detection** section and all **DON'T** guidelines in the frontend-design skill. Check for the AI color palette, gradient text, default dark mode with glowing accents, glassmorphism, hero metric layouts, card grids, generic fonts, and all other tells. -**Ask yourself**: If you showed this 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?" +**The test**: If you showed this 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?" ### 2. Visual Hierarchy - Does the eye flow to the most important element first? @@ -90,8 +77,8 @@ A distinctive interface should make someone ask "how was this made?" not "which Structure your feedback as a design director would: -### AI Slop Verdict -**Start here.** Give a clear verdict: Does this look AI-generated? If yes, list the specific tells you spotted. This is pass/fail—either it's distinctive or it's not. Be brutally honest. +### 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. diff --git a/dist/codex-prefixed/.codex/skills/frontend-design/SKILL.md b/dist/codex-prefixed/.codex/skills/frontend-design/SKILL.md index 0ceecd0ee..0db813cae 100644 --- a/dist/codex-prefixed/.codex/skills/frontend-design/SKILL.md +++ b/dist/codex-prefixed/.codex/skills/frontend-design/SKILL.md @@ -36,72 +36,80 @@ Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is: ### 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**: Put large icons with rounded corners above every heading—they rarely add value and make sites look templated +Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font. Use a modular type scale with fluid sizing (clamp). Vary font weights and sizes to create clear visual hierarchy. ### 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**: Reach for purple-to-blue gradients on white—it's the #1 "AI slop" tell +Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Use modern CSS color functions (oklch, color-mix, light-dark) for perceptually uniform, maintainable palettes. Tint your neutrals toward your brand hue—even a subtle hint creates subconscious cohesion. ### 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 -**DON'T**: Nest cards inside cards -**DON'T**: Use modals unless there's truly no better alternative—modals are lazy -**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 +Create visual rhythm through varied spacing—tight groupings, generous separations. Use fluid spacing with clamp() that breathes on larger screens. Embrace asymmetry and unexpected compositions. Break the grid intentionally for emphasis. ### 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 +Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Use motion to convey state changes—entrances, exits, feedback. Use exponential easing (ease-out-quart/quint/expo) for natural deceleration. For height animations, use grid-template-rows transitions instead of animating height directly. ### 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 +Make interactions feel fast. Use optimistic UI—update immediately, sync later. Use progressive disclosure—start simple, reveal sophistication through interaction. Design empty states that teach the interface, not just say "nothing here". Make every interactive surface feel intentional and responsive. ### 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 +Use container queries (@container) for component-level responsiveness. Adapt the interface for different contexts—don't just shrink 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 +Make every word earn its place. + +--- + +## Anti-Patterns (CRITICAL) + +**This is the most important section.** These patterns make interfaces look generic, dated, or obviously AI-generated. Avoid ALL of them: + +### AI Slop Tells +These scream "AI made this" and have become fingerprints for AI-generated work from 2024-2025: + +- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds +- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell +- **Gradient text for "impact"**: Especially on metrics or headings—decorative rather than meaningful +- **Default dark mode with glowing accents**: Looks "cool" without requiring actual design decisions +- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively rather than purposefully +- **Rounded element with thick colored border on one side**: A lazy accent that almost never looks intentional +- **Hero metric layout**: Big number, small label, supporting stats below, gradient accent—it's a template +- **Identical card grids**: Same-sized cards with icon + heading + text, repeated endlessly +- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing meaningful +- **Large rounded icons above every heading**: Rarely adds value, makes sites look templated +- **Inter, Roboto, Arial, Open Sans, system fonts**: The path of least resistance +- **Monospace typography for "technical" vibes**: Lazy shorthand for "this is for developers" +- **Rounded rectangles with generic drop shadows**: Safe, forgettable, could be any AI output + +### Design Anti-Patterns +These are just bad design, AI or not: + +- **Gray text on colored backgrounds**: Looks washed out—use a shade of the background color instead +- **Pure black (#000) or pure white (#fff)**: Always tint; pure black/white never appears in nature +- **Wrap everything in cards**: Not everything needs a container +- **Nest cards inside cards**: Visual noise—flatten the hierarchy +- **Modals for everything**: Modals are lazy; find a better alternative +- **Center everything**: Left-aligned text with asymmetric layouts feels more designed +- **Same spacing everywhere**: Without rhythm, layouts feel monotonous +- **Animate layout properties**: Use transform and opacity only, never width/height/padding/margin +- **Bounce or elastic easing**: Feels dated and tacky; real objects decelerate smoothly +- **Redundant copy**: Headers restating intros, repeated explanations +- **Every button is primary**: Use ghost buttons, text links, secondary styles; hierarchy matters +- **Hide functionality on mobile**: Adapt the interface, don't amputate it +- **Repeat information**: If users can already see it, don't say it again + +### The Test +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?" --- diff --git a/dist/codex/.codex/prompts/audit.md b/dist/codex/.codex/prompts/audit.md index 85ccf8adf..214dcac15 100644 --- a/dist/codex/.codex/prompts/audit.md +++ b/dist/codex/.codex/prompts/audit.md @@ -39,26 +39,7 @@ 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 - -6. **AI Slop Detection (CRITICAL)** - Does this look AI-generated? Check for: - - **AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds - - **Gradient text**: Especially on metrics or headings—decorative rather than meaningful - - **Default dark mode with glowing accents**: "Cool" without requiring design decisions - - **Monospace typography**: Lazy shorthand for "technical/developer" vibes - - **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively - - **Hero metric layout**: Big number, small label, supporting stats, gradient accent—it's a template - - **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing - - **Identical card grids**: Same-sized cards with icon + heading + text, repeated - - **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell - - **Rounded rectangles with generic shadows**: Safe, forgettable, could be any AI output +5. **Anti-Patterns (CRITICAL)** - Check against the **Anti-Patterns** section in the frontend-design skill. Look for both AI slop tells (cyan-on-dark, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). **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. @@ -66,8 +47,8 @@ Run comprehensive checks across multiple dimensions: Create a detailed audit report with the following structure: -### AI Slop Verdict -**Start here.** Pass/fail: Does this look AI-generated? List specific tells if yes. Be brutally honest—this is the most important quality signal. +### 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. ### Executive Summary - Total issues found (count by severity) diff --git a/dist/codex/.codex/prompts/critique.md b/dist/codex/.codex/prompts/critique.md index baeae485f..179920205 100644 --- a/dist/codex/.codex/prompts/critique.md +++ b/dist/codex/.codex/prompts/critique.md @@ -13,24 +13,11 @@ 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? Watch for these tells: +**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025? -- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds. These combinations have become a fingerprint for AI-generated work. -- **Gradient text for "impact"**: Especially on metrics or headings. It's decorative rather than meaningful. -- **Default dark mode**: AI loves dark themes with glowing accents because it looks "cool" without requiring actual design decisions. -- **Monospace typography**: Lazy shorthand for "this is technical/for developers." -- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders—used decoratively rather than purposefully. -- **Hero metric layout**: Big number, small label, supporting stats, gradient accent. It's a template now. -- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing. -- **Cards nested in cards**: The AI's go-to for "organizing" content. -- **Inter/Roboto/system fonts**: The path of least resistance. -- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell. -- **Rounded rectangles with drop shadows**: Generic, safe, forgettable. -- **Identical card grids**: Same-sized cards with icon + heading + text, repeated. +Review the design against the **AI Slop Detection** section and all **DON'T** guidelines in the frontend-design skill. Check for the AI color palette, gradient text, default dark mode with glowing accents, glassmorphism, hero metric layouts, card grids, generic fonts, and all other tells. -**Ask yourself**: If you showed this 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?" +**The test**: If you showed this 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?" ### 2. Visual Hierarchy - Does the eye flow to the most important element first? @@ -90,8 +77,8 @@ A distinctive interface should make someone ask "how was this made?" not "which Structure your feedback as a design director would: -### AI Slop Verdict -**Start here.** Give a clear verdict: Does this look AI-generated? If yes, list the specific tells you spotted. This is pass/fail—either it's distinctive or it's not. Be brutally honest. +### 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. diff --git a/dist/codex/.codex/skills/frontend-design/SKILL.md b/dist/codex/.codex/skills/frontend-design/SKILL.md index 0ceecd0ee..0db813cae 100644 --- a/dist/codex/.codex/skills/frontend-design/SKILL.md +++ b/dist/codex/.codex/skills/frontend-design/SKILL.md @@ -36,72 +36,80 @@ Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is: ### 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**: Put large icons with rounded corners above every heading—they rarely add value and make sites look templated +Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font. Use a modular type scale with fluid sizing (clamp). Vary font weights and sizes to create clear visual hierarchy. ### 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**: Reach for purple-to-blue gradients on white—it's the #1 "AI slop" tell +Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Use modern CSS color functions (oklch, color-mix, light-dark) for perceptually uniform, maintainable palettes. Tint your neutrals toward your brand hue—even a subtle hint creates subconscious cohesion. ### 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 -**DON'T**: Nest cards inside cards -**DON'T**: Use modals unless there's truly no better alternative—modals are lazy -**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 +Create visual rhythm through varied spacing—tight groupings, generous separations. Use fluid spacing with clamp() that breathes on larger screens. Embrace asymmetry and unexpected compositions. Break the grid intentionally for emphasis. ### 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 +Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Use motion to convey state changes—entrances, exits, feedback. Use exponential easing (ease-out-quart/quint/expo) for natural deceleration. For height animations, use grid-template-rows transitions instead of animating height directly. ### 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 +Make interactions feel fast. Use optimistic UI—update immediately, sync later. Use progressive disclosure—start simple, reveal sophistication through interaction. Design empty states that teach the interface, not just say "nothing here". Make every interactive surface feel intentional and responsive. ### 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 +Use container queries (@container) for component-level responsiveness. Adapt the interface for different contexts—don't just shrink 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 +Make every word earn its place. + +--- + +## Anti-Patterns (CRITICAL) + +**This is the most important section.** These patterns make interfaces look generic, dated, or obviously AI-generated. Avoid ALL of them: + +### AI Slop Tells +These scream "AI made this" and have become fingerprints for AI-generated work from 2024-2025: + +- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds +- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell +- **Gradient text for "impact"**: Especially on metrics or headings—decorative rather than meaningful +- **Default dark mode with glowing accents**: Looks "cool" without requiring actual design decisions +- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively rather than purposefully +- **Rounded element with thick colored border on one side**: A lazy accent that almost never looks intentional +- **Hero metric layout**: Big number, small label, supporting stats below, gradient accent—it's a template +- **Identical card grids**: Same-sized cards with icon + heading + text, repeated endlessly +- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing meaningful +- **Large rounded icons above every heading**: Rarely adds value, makes sites look templated +- **Inter, Roboto, Arial, Open Sans, system fonts**: The path of least resistance +- **Monospace typography for "technical" vibes**: Lazy shorthand for "this is for developers" +- **Rounded rectangles with generic drop shadows**: Safe, forgettable, could be any AI output + +### Design Anti-Patterns +These are just bad design, AI or not: + +- **Gray text on colored backgrounds**: Looks washed out—use a shade of the background color instead +- **Pure black (#000) or pure white (#fff)**: Always tint; pure black/white never appears in nature +- **Wrap everything in cards**: Not everything needs a container +- **Nest cards inside cards**: Visual noise—flatten the hierarchy +- **Modals for everything**: Modals are lazy; find a better alternative +- **Center everything**: Left-aligned text with asymmetric layouts feels more designed +- **Same spacing everywhere**: Without rhythm, layouts feel monotonous +- **Animate layout properties**: Use transform and opacity only, never width/height/padding/margin +- **Bounce or elastic easing**: Feels dated and tacky; real objects decelerate smoothly +- **Redundant copy**: Headers restating intros, repeated explanations +- **Every button is primary**: Use ghost buttons, text links, secondary styles; hierarchy matters +- **Hide functionality on mobile**: Adapt the interface, don't amputate it +- **Repeat information**: If users can already see it, don't say it again + +### The Test +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?" --- diff --git a/dist/cursor-prefixed/.cursor/commands/i-audit.md b/dist/cursor-prefixed/.cursor/commands/i-audit.md index 1df7809ea..bbca258cf 100644 --- a/dist/cursor-prefixed/.cursor/commands/i-audit.md +++ b/dist/cursor-prefixed/.cursor/commands/i-audit.md @@ -34,26 +34,7 @@ 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 - -6. **AI Slop Detection (CRITICAL)** - Does this look AI-generated? Check for: - - **AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds - - **Gradient text**: Especially on metrics or headings—decorative rather than meaningful - - **Default dark mode with glowing accents**: "Cool" without requiring design decisions - - **Monospace typography**: Lazy shorthand for "technical/developer" vibes - - **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively - - **Hero metric layout**: Big number, small label, supporting stats, gradient accent—it's a template - - **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing - - **Identical card grids**: Same-sized cards with icon + heading + text, repeated - - **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell - - **Rounded rectangles with generic shadows**: Safe, forgettable, could be any AI output +5. **Anti-Patterns (CRITICAL)** - Check against the **Anti-Patterns** section in the frontend-design skill. Look for both AI slop tells (cyan-on-dark, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). **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. @@ -61,8 +42,8 @@ Run comprehensive checks across multiple dimensions: Create a detailed audit report with the following structure: -### AI Slop Verdict -**Start here.** Pass/fail: Does this look AI-generated? List specific tells if yes. Be brutally honest—this is the most important quality signal. +### 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. ### Executive Summary - Total issues found (count by severity) diff --git a/dist/cursor-prefixed/.cursor/commands/i-critique.md b/dist/cursor-prefixed/.cursor/commands/i-critique.md index 8dfd0322c..ba9bab022 100644 --- a/dist/cursor-prefixed/.cursor/commands/i-critique.md +++ b/dist/cursor-prefixed/.cursor/commands/i-critique.md @@ -8,24 +8,11 @@ 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? Watch for these tells: +**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025? -- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds. These combinations have become a fingerprint for AI-generated work. -- **Gradient text for "impact"**: Especially on metrics or headings. It's decorative rather than meaningful. -- **Default dark mode**: AI loves dark themes with glowing accents because it looks "cool" without requiring actual design decisions. -- **Monospace typography**: Lazy shorthand for "this is technical/for developers." -- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders—used decoratively rather than purposefully. -- **Hero metric layout**: Big number, small label, supporting stats, gradient accent. It's a template now. -- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing. -- **Cards nested in cards**: The AI's go-to for "organizing" content. -- **Inter/Roboto/system fonts**: The path of least resistance. -- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell. -- **Rounded rectangles with drop shadows**: Generic, safe, forgettable. -- **Identical card grids**: Same-sized cards with icon + heading + text, repeated. +Review the design against the **AI Slop Detection** section and all **DON'T** guidelines in the frontend-design skill. Check for the AI color palette, gradient text, default dark mode with glowing accents, glassmorphism, hero metric layouts, card grids, generic fonts, and all other tells. -**Ask yourself**: If you showed this 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?" +**The test**: If you showed this 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?" ### 2. Visual Hierarchy - Does the eye flow to the most important element first? @@ -85,8 +72,8 @@ A distinctive interface should make someone ask "how was this made?" not "which Structure your feedback as a design director would: -### AI Slop Verdict -**Start here.** Give a clear verdict: Does this look AI-generated? If yes, list the specific tells you spotted. This is pass/fail—either it's distinctive or it's not. Be brutally honest. +### 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. diff --git a/dist/cursor-prefixed/.cursor/skills/frontend-design/SKILL.md b/dist/cursor-prefixed/.cursor/skills/frontend-design/SKILL.md index 180965196..98ef18cc3 100644 --- a/dist/cursor-prefixed/.cursor/skills/frontend-design/SKILL.md +++ b/dist/cursor-prefixed/.cursor/skills/frontend-design/SKILL.md @@ -36,72 +36,80 @@ Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is: ### 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**: Put large icons with rounded corners above every heading—they rarely add value and make sites look templated +Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font. Use a modular type scale with fluid sizing (clamp). Vary font weights and sizes to create clear visual hierarchy. ### 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**: Reach for purple-to-blue gradients on white—it's the #1 "AI slop" tell +Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Use modern CSS color functions (oklch, color-mix, light-dark) for perceptually uniform, maintainable palettes. Tint your neutrals toward your brand hue—even a subtle hint creates subconscious cohesion. ### 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 -**DON'T**: Nest cards inside cards -**DON'T**: Use modals unless there's truly no better alternative—modals are lazy -**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 +Create visual rhythm through varied spacing—tight groupings, generous separations. Use fluid spacing with clamp() that breathes on larger screens. Embrace asymmetry and unexpected compositions. Break the grid intentionally for emphasis. ### 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 +Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Use motion to convey state changes—entrances, exits, feedback. Use exponential easing (ease-out-quart/quint/expo) for natural deceleration. For height animations, use grid-template-rows transitions instead of animating height directly. ### 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 +Make interactions feel fast. Use optimistic UI—update immediately, sync later. Use progressive disclosure—start simple, reveal sophistication through interaction. Design empty states that teach the interface, not just say "nothing here". Make every interactive surface feel intentional and responsive. ### 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 +Use container queries (@container) for component-level responsiveness. Adapt the interface for different contexts—don't just shrink 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 +Make every word earn its place. + +--- + +## Anti-Patterns (CRITICAL) + +**This is the most important section.** These patterns make interfaces look generic, dated, or obviously AI-generated. Avoid ALL of them: + +### AI Slop Tells +These scream "AI made this" and have become fingerprints for AI-generated work from 2024-2025: + +- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds +- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell +- **Gradient text for "impact"**: Especially on metrics or headings—decorative rather than meaningful +- **Default dark mode with glowing accents**: Looks "cool" without requiring actual design decisions +- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively rather than purposefully +- **Rounded element with thick colored border on one side**: A lazy accent that almost never looks intentional +- **Hero metric layout**: Big number, small label, supporting stats below, gradient accent—it's a template +- **Identical card grids**: Same-sized cards with icon + heading + text, repeated endlessly +- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing meaningful +- **Large rounded icons above every heading**: Rarely adds value, makes sites look templated +- **Inter, Roboto, Arial, Open Sans, system fonts**: The path of least resistance +- **Monospace typography for "technical" vibes**: Lazy shorthand for "this is for developers" +- **Rounded rectangles with generic drop shadows**: Safe, forgettable, could be any AI output + +### Design Anti-Patterns +These are just bad design, AI or not: + +- **Gray text on colored backgrounds**: Looks washed out—use a shade of the background color instead +- **Pure black (#000) or pure white (#fff)**: Always tint; pure black/white never appears in nature +- **Wrap everything in cards**: Not everything needs a container +- **Nest cards inside cards**: Visual noise—flatten the hierarchy +- **Modals for everything**: Modals are lazy; find a better alternative +- **Center everything**: Left-aligned text with asymmetric layouts feels more designed +- **Same spacing everywhere**: Without rhythm, layouts feel monotonous +- **Animate layout properties**: Use transform and opacity only, never width/height/padding/margin +- **Bounce or elastic easing**: Feels dated and tacky; real objects decelerate smoothly +- **Redundant copy**: Headers restating intros, repeated explanations +- **Every button is primary**: Use ghost buttons, text links, secondary styles; hierarchy matters +- **Hide functionality on mobile**: Adapt the interface, don't amputate it +- **Repeat information**: If users can already see it, don't say it again + +### The Test +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?" --- diff --git a/dist/cursor/.cursor/commands/audit.md b/dist/cursor/.cursor/commands/audit.md index 1df7809ea..bbca258cf 100644 --- a/dist/cursor/.cursor/commands/audit.md +++ b/dist/cursor/.cursor/commands/audit.md @@ -34,26 +34,7 @@ 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 - -6. **AI Slop Detection (CRITICAL)** - Does this look AI-generated? Check for: - - **AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds - - **Gradient text**: Especially on metrics or headings—decorative rather than meaningful - - **Default dark mode with glowing accents**: "Cool" without requiring design decisions - - **Monospace typography**: Lazy shorthand for "technical/developer" vibes - - **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively - - **Hero metric layout**: Big number, small label, supporting stats, gradient accent—it's a template - - **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing - - **Identical card grids**: Same-sized cards with icon + heading + text, repeated - - **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell - - **Rounded rectangles with generic shadows**: Safe, forgettable, could be any AI output +5. **Anti-Patterns (CRITICAL)** - Check against the **Anti-Patterns** section in the frontend-design skill. Look for both AI slop tells (cyan-on-dark, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). **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. @@ -61,8 +42,8 @@ Run comprehensive checks across multiple dimensions: Create a detailed audit report with the following structure: -### AI Slop Verdict -**Start here.** Pass/fail: Does this look AI-generated? List specific tells if yes. Be brutally honest—this is the most important quality signal. +### 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. ### Executive Summary - Total issues found (count by severity) diff --git a/dist/cursor/.cursor/commands/critique.md b/dist/cursor/.cursor/commands/critique.md index 8dfd0322c..ba9bab022 100644 --- a/dist/cursor/.cursor/commands/critique.md +++ b/dist/cursor/.cursor/commands/critique.md @@ -8,24 +8,11 @@ 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? Watch for these tells: +**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025? -- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds. These combinations have become a fingerprint for AI-generated work. -- **Gradient text for "impact"**: Especially on metrics or headings. It's decorative rather than meaningful. -- **Default dark mode**: AI loves dark themes with glowing accents because it looks "cool" without requiring actual design decisions. -- **Monospace typography**: Lazy shorthand for "this is technical/for developers." -- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders—used decoratively rather than purposefully. -- **Hero metric layout**: Big number, small label, supporting stats, gradient accent. It's a template now. -- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing. -- **Cards nested in cards**: The AI's go-to for "organizing" content. -- **Inter/Roboto/system fonts**: The path of least resistance. -- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell. -- **Rounded rectangles with drop shadows**: Generic, safe, forgettable. -- **Identical card grids**: Same-sized cards with icon + heading + text, repeated. +Review the design against the **AI Slop Detection** section and all **DON'T** guidelines in the frontend-design skill. Check for the AI color palette, gradient text, default dark mode with glowing accents, glassmorphism, hero metric layouts, card grids, generic fonts, and all other tells. -**Ask yourself**: If you showed this 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?" +**The test**: If you showed this 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?" ### 2. Visual Hierarchy - Does the eye flow to the most important element first? @@ -85,8 +72,8 @@ A distinctive interface should make someone ask "how was this made?" not "which Structure your feedback as a design director would: -### AI Slop Verdict -**Start here.** Give a clear verdict: Does this look AI-generated? If yes, list the specific tells you spotted. This is pass/fail—either it's distinctive or it's not. Be brutally honest. +### 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. diff --git a/dist/cursor/.cursor/skills/frontend-design/SKILL.md b/dist/cursor/.cursor/skills/frontend-design/SKILL.md index 180965196..98ef18cc3 100644 --- a/dist/cursor/.cursor/skills/frontend-design/SKILL.md +++ b/dist/cursor/.cursor/skills/frontend-design/SKILL.md @@ -36,72 +36,80 @@ Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is: ### 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**: Put large icons with rounded corners above every heading—they rarely add value and make sites look templated +Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font. Use a modular type scale with fluid sizing (clamp). Vary font weights and sizes to create clear visual hierarchy. ### 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**: Reach for purple-to-blue gradients on white—it's the #1 "AI slop" tell +Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Use modern CSS color functions (oklch, color-mix, light-dark) for perceptually uniform, maintainable palettes. Tint your neutrals toward your brand hue—even a subtle hint creates subconscious cohesion. ### 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 -**DON'T**: Nest cards inside cards -**DON'T**: Use modals unless there's truly no better alternative—modals are lazy -**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 +Create visual rhythm through varied spacing—tight groupings, generous separations. Use fluid spacing with clamp() that breathes on larger screens. Embrace asymmetry and unexpected compositions. Break the grid intentionally for emphasis. ### 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 +Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Use motion to convey state changes—entrances, exits, feedback. Use exponential easing (ease-out-quart/quint/expo) for natural deceleration. For height animations, use grid-template-rows transitions instead of animating height directly. ### 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 +Make interactions feel fast. Use optimistic UI—update immediately, sync later. Use progressive disclosure—start simple, reveal sophistication through interaction. Design empty states that teach the interface, not just say "nothing here". Make every interactive surface feel intentional and responsive. ### 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 +Use container queries (@container) for component-level responsiveness. Adapt the interface for different contexts—don't just shrink 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 +Make every word earn its place. + +--- + +## Anti-Patterns (CRITICAL) + +**This is the most important section.** These patterns make interfaces look generic, dated, or obviously AI-generated. Avoid ALL of them: + +### AI Slop Tells +These scream "AI made this" and have become fingerprints for AI-generated work from 2024-2025: + +- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds +- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell +- **Gradient text for "impact"**: Especially on metrics or headings—decorative rather than meaningful +- **Default dark mode with glowing accents**: Looks "cool" without requiring actual design decisions +- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively rather than purposefully +- **Rounded element with thick colored border on one side**: A lazy accent that almost never looks intentional +- **Hero metric layout**: Big number, small label, supporting stats below, gradient accent—it's a template +- **Identical card grids**: Same-sized cards with icon + heading + text, repeated endlessly +- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing meaningful +- **Large rounded icons above every heading**: Rarely adds value, makes sites look templated +- **Inter, Roboto, Arial, Open Sans, system fonts**: The path of least resistance +- **Monospace typography for "technical" vibes**: Lazy shorthand for "this is for developers" +- **Rounded rectangles with generic drop shadows**: Safe, forgettable, could be any AI output + +### Design Anti-Patterns +These are just bad design, AI or not: + +- **Gray text on colored backgrounds**: Looks washed out—use a shade of the background color instead +- **Pure black (#000) or pure white (#fff)**: Always tint; pure black/white never appears in nature +- **Wrap everything in cards**: Not everything needs a container +- **Nest cards inside cards**: Visual noise—flatten the hierarchy +- **Modals for everything**: Modals are lazy; find a better alternative +- **Center everything**: Left-aligned text with asymmetric layouts feels more designed +- **Same spacing everywhere**: Without rhythm, layouts feel monotonous +- **Animate layout properties**: Use transform and opacity only, never width/height/padding/margin +- **Bounce or elastic easing**: Feels dated and tacky; real objects decelerate smoothly +- **Redundant copy**: Headers restating intros, repeated explanations +- **Every button is primary**: Use ghost buttons, text links, secondary styles; hierarchy matters +- **Hide functionality on mobile**: Adapt the interface, don't amputate it +- **Repeat information**: If users can already see it, don't say it again + +### The Test +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?" --- diff --git a/dist/gemini-prefixed/.gemini/commands/i-audit.toml b/dist/gemini-prefixed/.gemini/commands/i-audit.toml index 2c4f6457f..27417d32a 100644 --- a/dist/gemini-prefixed/.gemini/commands/i-audit.toml +++ b/dist/gemini-prefixed/.gemini/commands/i-audit.toml @@ -36,26 +36,7 @@ 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 - -6. **AI Slop Detection (CRITICAL)** - Does this look AI-generated? Check for: - - **AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds - - **Gradient text**: Especially on metrics or headings—decorative rather than meaningful - - **Default dark mode with glowing accents**: "Cool" without requiring design decisions - - **Monospace typography**: Lazy shorthand for "technical/developer" vibes - - **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively - - **Hero metric layout**: Big number, small label, supporting stats, gradient accent—it's a template - - **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing - - **Identical card grids**: Same-sized cards with icon + heading + text, repeated - - **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell - - **Rounded rectangles with generic shadows**: Safe, forgettable, could be any AI output +5. **Anti-Patterns (CRITICAL)** - Check against the **Anti-Patterns** section in the frontend-design skill. Look for both AI slop tells (cyan-on-dark, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). **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. @@ -63,8 +44,8 @@ Run comprehensive checks across multiple dimensions: Create a detailed audit report with the following structure: -### AI Slop Verdict -**Start here.** Pass/fail: Does this look AI-generated? List specific tells if yes. Be brutally honest—this is the most important quality signal. +### 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. ### Executive Summary - Total issues found (count by severity) diff --git a/dist/gemini-prefixed/.gemini/commands/i-critique.toml b/dist/gemini-prefixed/.gemini/commands/i-critique.toml index 1b7be2144..b9d1f55b2 100644 --- a/dist/gemini-prefixed/.gemini/commands/i-critique.toml +++ b/dist/gemini-prefixed/.gemini/commands/i-critique.toml @@ -10,24 +10,11 @@ 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? Watch for these tells: +**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025? -- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds. These combinations have become a fingerprint for AI-generated work. -- **Gradient text for "impact"**: Especially on metrics or headings. It's decorative rather than meaningful. -- **Default dark mode**: AI loves dark themes with glowing accents because it looks "cool" without requiring actual design decisions. -- **Monospace typography**: Lazy shorthand for "this is technical/for developers." -- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders—used decoratively rather than purposefully. -- **Hero metric layout**: Big number, small label, supporting stats, gradient accent. It's a template now. -- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing. -- **Cards nested in cards**: The AI's go-to for "organizing" content. -- **Inter/Roboto/system fonts**: The path of least resistance. -- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell. -- **Rounded rectangles with drop shadows**: Generic, safe, forgettable. -- **Identical card grids**: Same-sized cards with icon + heading + text, repeated. +Review the design against the **AI Slop Detection** section and all **DON'T** guidelines in the frontend-design skill. Check for the AI color palette, gradient text, default dark mode with glowing accents, glassmorphism, hero metric layouts, card grids, generic fonts, and all other tells. -**Ask yourself**: If you showed this 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?" +**The test**: If you showed this 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?" ### 2. Visual Hierarchy - Does the eye flow to the most important element first? @@ -87,8 +74,8 @@ A distinctive interface should make someone ask "how was this made?" not "which Structure your feedback as a design director would: -### AI Slop Verdict -**Start here.** Give a clear verdict: Does this look AI-generated? If yes, list the specific tells you spotted. This is pass/fail—either it's distinctive or it's not. Be brutally honest. +### 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. diff --git a/dist/gemini-prefixed/.gemini/skills/frontend-design/SKILL.md b/dist/gemini-prefixed/.gemini/skills/frontend-design/SKILL.md index 921335048..3cb25ea8b 100644 --- a/dist/gemini-prefixed/.gemini/skills/frontend-design/SKILL.md +++ b/dist/gemini-prefixed/.gemini/skills/frontend-design/SKILL.md @@ -35,72 +35,80 @@ Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is: ### 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**: Put large icons with rounded corners above every heading—they rarely add value and make sites look templated +Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font. Use a modular type scale with fluid sizing (clamp). Vary font weights and sizes to create clear visual hierarchy. ### 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**: Reach for purple-to-blue gradients on white—it's the #1 "AI slop" tell +Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Use modern CSS color functions (oklch, color-mix, light-dark) for perceptually uniform, maintainable palettes. Tint your neutrals toward your brand hue—even a subtle hint creates subconscious cohesion. ### 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 -**DON'T**: Nest cards inside cards -**DON'T**: Use modals unless there's truly no better alternative—modals are lazy -**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 +Create visual rhythm through varied spacing—tight groupings, generous separations. Use fluid spacing with clamp() that breathes on larger screens. Embrace asymmetry and unexpected compositions. Break the grid intentionally for emphasis. ### 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 +Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Use motion to convey state changes—entrances, exits, feedback. Use exponential easing (ease-out-quart/quint/expo) for natural deceleration. For height animations, use grid-template-rows transitions instead of animating height directly. ### 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 +Make interactions feel fast. Use optimistic UI—update immediately, sync later. Use progressive disclosure—start simple, reveal sophistication through interaction. Design empty states that teach the interface, not just say "nothing here". Make every interactive surface feel intentional and responsive. ### 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 +Use container queries (@container) for component-level responsiveness. Adapt the interface for different contexts—don't just shrink 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 +Make every word earn its place. + +--- + +## Anti-Patterns (CRITICAL) + +**This is the most important section.** These patterns make interfaces look generic, dated, or obviously AI-generated. Avoid ALL of them: + +### AI Slop Tells +These scream "AI made this" and have become fingerprints for AI-generated work from 2024-2025: + +- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds +- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell +- **Gradient text for "impact"**: Especially on metrics or headings—decorative rather than meaningful +- **Default dark mode with glowing accents**: Looks "cool" without requiring actual design decisions +- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively rather than purposefully +- **Rounded element with thick colored border on one side**: A lazy accent that almost never looks intentional +- **Hero metric layout**: Big number, small label, supporting stats below, gradient accent—it's a template +- **Identical card grids**: Same-sized cards with icon + heading + text, repeated endlessly +- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing meaningful +- **Large rounded icons above every heading**: Rarely adds value, makes sites look templated +- **Inter, Roboto, Arial, Open Sans, system fonts**: The path of least resistance +- **Monospace typography for "technical" vibes**: Lazy shorthand for "this is for developers" +- **Rounded rectangles with generic drop shadows**: Safe, forgettable, could be any AI output + +### Design Anti-Patterns +These are just bad design, AI or not: + +- **Gray text on colored backgrounds**: Looks washed out—use a shade of the background color instead +- **Pure black (#000) or pure white (#fff)**: Always tint; pure black/white never appears in nature +- **Wrap everything in cards**: Not everything needs a container +- **Nest cards inside cards**: Visual noise—flatten the hierarchy +- **Modals for everything**: Modals are lazy; find a better alternative +- **Center everything**: Left-aligned text with asymmetric layouts feels more designed +- **Same spacing everywhere**: Without rhythm, layouts feel monotonous +- **Animate layout properties**: Use transform and opacity only, never width/height/padding/margin +- **Bounce or elastic easing**: Feels dated and tacky; real objects decelerate smoothly +- **Redundant copy**: Headers restating intros, repeated explanations +- **Every button is primary**: Use ghost buttons, text links, secondary styles; hierarchy matters +- **Hide functionality on mobile**: Adapt the interface, don't amputate it +- **Repeat information**: If users can already see it, don't say it again + +### The Test +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?" --- diff --git a/dist/gemini/.gemini/commands/audit.toml b/dist/gemini/.gemini/commands/audit.toml index 2c4f6457f..27417d32a 100644 --- a/dist/gemini/.gemini/commands/audit.toml +++ b/dist/gemini/.gemini/commands/audit.toml @@ -36,26 +36,7 @@ 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 - -6. **AI Slop Detection (CRITICAL)** - Does this look AI-generated? Check for: - - **AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds - - **Gradient text**: Especially on metrics or headings—decorative rather than meaningful - - **Default dark mode with glowing accents**: "Cool" without requiring design decisions - - **Monospace typography**: Lazy shorthand for "technical/developer" vibes - - **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively - - **Hero metric layout**: Big number, small label, supporting stats, gradient accent—it's a template - - **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing - - **Identical card grids**: Same-sized cards with icon + heading + text, repeated - - **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell - - **Rounded rectangles with generic shadows**: Safe, forgettable, could be any AI output +5. **Anti-Patterns (CRITICAL)** - Check against the **Anti-Patterns** section in the frontend-design skill. Look for both AI slop tells (cyan-on-dark, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). **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. @@ -63,8 +44,8 @@ Run comprehensive checks across multiple dimensions: Create a detailed audit report with the following structure: -### AI Slop Verdict -**Start here.** Pass/fail: Does this look AI-generated? List specific tells if yes. Be brutally honest—this is the most important quality signal. +### 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. ### Executive Summary - Total issues found (count by severity) diff --git a/dist/gemini/.gemini/commands/critique.toml b/dist/gemini/.gemini/commands/critique.toml index 1b7be2144..b9d1f55b2 100644 --- a/dist/gemini/.gemini/commands/critique.toml +++ b/dist/gemini/.gemini/commands/critique.toml @@ -10,24 +10,11 @@ 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? Watch for these tells: +**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025? -- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds. These combinations have become a fingerprint for AI-generated work. -- **Gradient text for "impact"**: Especially on metrics or headings. It's decorative rather than meaningful. -- **Default dark mode**: AI loves dark themes with glowing accents because it looks "cool" without requiring actual design decisions. -- **Monospace typography**: Lazy shorthand for "this is technical/for developers." -- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders—used decoratively rather than purposefully. -- **Hero metric layout**: Big number, small label, supporting stats, gradient accent. It's a template now. -- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing. -- **Cards nested in cards**: The AI's go-to for "organizing" content. -- **Inter/Roboto/system fonts**: The path of least resistance. -- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell. -- **Rounded rectangles with drop shadows**: Generic, safe, forgettable. -- **Identical card grids**: Same-sized cards with icon + heading + text, repeated. +Review the design against the **AI Slop Detection** section and all **DON'T** guidelines in the frontend-design skill. Check for the AI color palette, gradient text, default dark mode with glowing accents, glassmorphism, hero metric layouts, card grids, generic fonts, and all other tells. -**Ask yourself**: If you showed this 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?" +**The test**: If you showed this 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?" ### 2. Visual Hierarchy - Does the eye flow to the most important element first? @@ -87,8 +74,8 @@ A distinctive interface should make someone ask "how was this made?" not "which Structure your feedback as a design director would: -### AI Slop Verdict -**Start here.** Give a clear verdict: Does this look AI-generated? If yes, list the specific tells you spotted. This is pass/fail—either it's distinctive or it's not. Be brutally honest. +### 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. diff --git a/dist/gemini/.gemini/skills/frontend-design/SKILL.md b/dist/gemini/.gemini/skills/frontend-design/SKILL.md index 921335048..3cb25ea8b 100644 --- a/dist/gemini/.gemini/skills/frontend-design/SKILL.md +++ b/dist/gemini/.gemini/skills/frontend-design/SKILL.md @@ -35,72 +35,80 @@ Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is: ### 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**: Put large icons with rounded corners above every heading—they rarely add value and make sites look templated +Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font. Use a modular type scale with fluid sizing (clamp). Vary font weights and sizes to create clear visual hierarchy. ### 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**: Reach for purple-to-blue gradients on white—it's the #1 "AI slop" tell +Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Use modern CSS color functions (oklch, color-mix, light-dark) for perceptually uniform, maintainable palettes. Tint your neutrals toward your brand hue—even a subtle hint creates subconscious cohesion. ### 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 -**DON'T**: Nest cards inside cards -**DON'T**: Use modals unless there's truly no better alternative—modals are lazy -**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 +Create visual rhythm through varied spacing—tight groupings, generous separations. Use fluid spacing with clamp() that breathes on larger screens. Embrace asymmetry and unexpected compositions. Break the grid intentionally for emphasis. ### 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 +Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Use motion to convey state changes—entrances, exits, feedback. Use exponential easing (ease-out-quart/quint/expo) for natural deceleration. For height animations, use grid-template-rows transitions instead of animating height directly. ### 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 +Make interactions feel fast. Use optimistic UI—update immediately, sync later. Use progressive disclosure—start simple, reveal sophistication through interaction. Design empty states that teach the interface, not just say "nothing here". Make every interactive surface feel intentional and responsive. ### 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 +Use container queries (@container) for component-level responsiveness. Adapt the interface for different contexts—don't just shrink 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 +Make every word earn its place. + +--- + +## Anti-Patterns (CRITICAL) + +**This is the most important section.** These patterns make interfaces look generic, dated, or obviously AI-generated. Avoid ALL of them: + +### AI Slop Tells +These scream "AI made this" and have become fingerprints for AI-generated work from 2024-2025: + +- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds +- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell +- **Gradient text for "impact"**: Especially on metrics or headings—decorative rather than meaningful +- **Default dark mode with glowing accents**: Looks "cool" without requiring actual design decisions +- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively rather than purposefully +- **Rounded element with thick colored border on one side**: A lazy accent that almost never looks intentional +- **Hero metric layout**: Big number, small label, supporting stats below, gradient accent—it's a template +- **Identical card grids**: Same-sized cards with icon + heading + text, repeated endlessly +- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing meaningful +- **Large rounded icons above every heading**: Rarely adds value, makes sites look templated +- **Inter, Roboto, Arial, Open Sans, system fonts**: The path of least resistance +- **Monospace typography for "technical" vibes**: Lazy shorthand for "this is for developers" +- **Rounded rectangles with generic drop shadows**: Safe, forgettable, could be any AI output + +### Design Anti-Patterns +These are just bad design, AI or not: + +- **Gray text on colored backgrounds**: Looks washed out—use a shade of the background color instead +- **Pure black (#000) or pure white (#fff)**: Always tint; pure black/white never appears in nature +- **Wrap everything in cards**: Not everything needs a container +- **Nest cards inside cards**: Visual noise—flatten the hierarchy +- **Modals for everything**: Modals are lazy; find a better alternative +- **Center everything**: Left-aligned text with asymmetric layouts feels more designed +- **Same spacing everywhere**: Without rhythm, layouts feel monotonous +- **Animate layout properties**: Use transform and opacity only, never width/height/padding/margin +- **Bounce or elastic easing**: Feels dated and tacky; real objects decelerate smoothly +- **Redundant copy**: Headers restating intros, repeated explanations +- **Every button is primary**: Use ghost buttons, text links, secondary styles; hierarchy matters +- **Hide functionality on mobile**: Adapt the interface, don't amputate it +- **Repeat information**: If users can already see it, don't say it again + +### The Test +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?" --- diff --git a/source/commands/audit.md b/source/commands/audit.md index 1fde584f6..667aa1cf4 100644 --- a/source/commands/audit.md +++ b/source/commands/audit.md @@ -44,26 +44,7 @@ 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 - -6. **AI Slop Detection (CRITICAL)** - Does this look AI-generated? Check for: - - **AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds - - **Gradient text**: Especially on metrics or headings—decorative rather than meaningful - - **Default dark mode with glowing accents**: "Cool" without requiring design decisions - - **Monospace typography**: Lazy shorthand for "technical/developer" vibes - - **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively - - **Hero metric layout**: Big number, small label, supporting stats, gradient accent—it's a template - - **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing - - **Identical card grids**: Same-sized cards with icon + heading + text, repeated - - **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell - - **Rounded rectangles with generic shadows**: Safe, forgettable, could be any AI output +5. **Anti-Patterns (CRITICAL)** - Check against the **Anti-Patterns** section in the frontend-design skill. Look for both AI slop tells (cyan-on-dark, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). **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. @@ -71,8 +52,8 @@ Run comprehensive checks across multiple dimensions: Create a detailed audit report with the following structure: -### AI Slop Verdict -**Start here.** Pass/fail: Does this look AI-generated? List specific tells if yes. Be brutally honest—this is the most important quality signal. +### 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. ### Executive Summary - Total issues found (count by severity) diff --git a/source/commands/critique.md b/source/commands/critique.md index d3d1f9ea7..018bd302b 100644 --- a/source/commands/critique.md +++ b/source/commands/critique.md @@ -18,24 +18,11 @@ 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? Watch for these tells: +**This is the most important check.** Does this look like every other AI-generated interface from 2024-2025? -- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds. These combinations have become a fingerprint for AI-generated work. -- **Gradient text for "impact"**: Especially on metrics or headings. It's decorative rather than meaningful. -- **Default dark mode**: AI loves dark themes with glowing accents because it looks "cool" without requiring actual design decisions. -- **Monospace typography**: Lazy shorthand for "this is technical/for developers." -- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders—used decoratively rather than purposefully. -- **Hero metric layout**: Big number, small label, supporting stats, gradient accent. It's a template now. -- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing. -- **Cards nested in cards**: The AI's go-to for "organizing" content. -- **Inter/Roboto/system fonts**: The path of least resistance. -- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell. -- **Rounded rectangles with drop shadows**: Generic, safe, forgettable. -- **Identical card grids**: Same-sized cards with icon + heading + text, repeated. +Review the design against the **AI Slop Detection** section and all **DON'T** guidelines in the frontend-design skill. Check for the AI color palette, gradient text, default dark mode with glowing accents, glassmorphism, hero metric layouts, card grids, generic fonts, and all other tells. -**Ask yourself**: If you showed this 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?" +**The test**: If you showed this 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?" ### 2. Visual Hierarchy - Does the eye flow to the most important element first? @@ -95,8 +82,8 @@ A distinctive interface should make someone ask "how was this made?" not "which Structure your feedback as a design director would: -### AI Slop Verdict -**Start here.** Give a clear verdict: Does this look AI-generated? If yes, list the specific tells you spotted. This is pass/fail—either it's distinctive or it's not. Be brutally honest. +### 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. diff --git a/source/skills/frontend-design/SKILL.md b/source/skills/frontend-design/SKILL.md index 81dfeb1bb..27299293a 100644 --- a/source/skills/frontend-design/SKILL.md +++ b/source/skills/frontend-design/SKILL.md @@ -8,14 +8,14 @@ This skill guides creation of distinctive, production-grade frontend interfaces ## Design Thinking -Great design requires understanding. First, scan available context—README, existing components, brand guidelines, design tokens—to infer purpose, audience, and constraints. +Great design requires understanding. First, scan available context (README, existing components, brand guidelines, design tokens) to infer purpose, audience, and constraints. **BEFORE writing any code**, you MUST know: - Who is the target audience? - What is the brand personality or tone? - Are there existing design tokens, colors, or fonts to use? -If ANY of these are unclear from the codebase, {{ask_instruction}} Don't guess on fundamentals—wrong assumptions lead to generic output. +If ANY of these are unclear from the codebase, {{ask_instruction}} Don't guess on fundamentals, wrong assumptions lead to generic output. Then commit to a BOLD aesthetic direction: - **Purpose**: What problem does this interface solve? Who uses it? @@ -25,7 +25,7 @@ Then commit to a BOLD aesthetic direction: **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 (HTML/CSS/JS, React, Vue, etc.) that is: +Then implement working code that is: - Production-grade and functional - Visually striking and memorable - Cohesive with a clear aesthetic point-of-view @@ -36,72 +36,80 @@ Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is: ### 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**: Put large icons with rounded corners above every heading—they rarely add value and make sites look templated +Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font. Use a modular type scale with fluid sizing (clamp). Vary font weights and sizes to create clear visual hierarchy. ### 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**: Reach for purple-to-blue gradients on white—it's the #1 "AI slop" tell +Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Use modern CSS color functions (oklch, color-mix, light-dark) for perceptually uniform, maintainable palettes. Tint your neutrals toward your brand hue—even a subtle hint creates subconscious cohesion. ### 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 -**DON'T**: Nest cards inside cards -**DON'T**: Use modals unless there's truly no better alternative—modals are lazy -**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 +Create visual rhythm through varied spacing—tight groupings, generous separations. Use fluid spacing with clamp() that breathes on larger screens. Embrace asymmetry and unexpected compositions. Break the grid intentionally for emphasis. ### 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 +Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Use motion to convey state changes—entrances, exits, feedback. Use exponential easing (ease-out-quart/quint/expo) for natural deceleration. For height animations, use grid-template-rows transitions instead of animating height directly. ### 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 +Make interactions feel fast. Use optimistic UI—update immediately, sync later. Use progressive disclosure—start simple, reveal sophistication through interaction. Design empty states that teach the interface, not just say "nothing here". Make every interactive surface feel intentional and responsive. ### 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 +Use container queries (@container) for component-level responsiveness. Adapt the interface for different contexts—don't just shrink 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 +Make every word earn its place. + +--- + +## Anti-Patterns (CRITICAL) + +**This is the most important section.** These patterns make interfaces look generic, dated, or obviously AI-generated. Avoid ALL of them: + +### AI Slop Tells +These scream "AI made this" and have become fingerprints for AI-generated work from 2024-2025: + +- **The AI color palette**: Cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds +- **Purple-to-blue gradients on white**: The #1 "AI marketing site" tell +- **Gradient text for "impact"**: Especially on metrics or headings—decorative rather than meaningful +- **Default dark mode with glowing accents**: Looks "cool" without requiring actual design decisions +- **Glassmorphism everywhere**: Blur effects, glass cards, glow borders used decoratively rather than purposefully +- **Rounded element with thick colored border on one side**: A lazy accent that almost never looks intentional +- **Hero metric layout**: Big number, small label, supporting stats below, gradient accent—it's a template +- **Identical card grids**: Same-sized cards with icon + heading + text, repeated endlessly +- **Sparklines as decoration**: Tiny charts that look sophisticated but convey nothing meaningful +- **Large rounded icons above every heading**: Rarely adds value, makes sites look templated +- **Inter, Roboto, Arial, Open Sans, system fonts**: The path of least resistance +- **Monospace typography for "technical" vibes**: Lazy shorthand for "this is for developers" +- **Rounded rectangles with generic drop shadows**: Safe, forgettable, could be any AI output + +### Design Anti-Patterns +These are just bad design, AI or not: + +- **Gray text on colored backgrounds**: Looks washed out—use a shade of the background color instead +- **Pure black (#000) or pure white (#fff)**: Always tint; pure black/white never appears in nature +- **Wrap everything in cards**: Not everything needs a container +- **Nest cards inside cards**: Visual noise—flatten the hierarchy +- **Modals for everything**: Modals are lazy; find a better alternative +- **Center everything**: Left-aligned text with asymmetric layouts feels more designed +- **Same spacing everywhere**: Without rhythm, layouts feel monotonous +- **Animate layout properties**: Use transform and opacity only, never width/height/padding/margin +- **Bounce or elastic easing**: Feels dated and tacky; real objects decelerate smoothly +- **Redundant copy**: Headers restating intros, repeated explanations +- **Every button is primary**: Use ghost buttons, text links, secondary styles; hierarchy matters +- **Hide functionality on mobile**: Adapt the interface, don't amputate it +- **Repeat information**: If users can already see it, don't say it again + +### The Test +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?" ---