Trim patterns to non-obvious, AI-bias-fighting guidance only

Removed items that are:
- Accessibility 101 (WCAG, color blindness, reduced motion, focus indicators)
- Basic design principles (hierarchy, readability, semantic tokens)
- Well-known rules (2-3 fonts max, mobile-first, decorative body fonts)

Kept items that fight specific AI biases:
- Off-whites/near-blacks, dominant color with accents
- Spacing scales, asymmetry, staggered reveals
- Bounce/elastic easing ban, cards-on-cards
- Gray text on color, placeholder-as-labels, generic errors

Reduced from 60 items to 34 - more focused and actionable.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.claude/skills/frontend-design/SKILL.md

@@ -54,42 +54,29 @@ Focus on intentional, distinctive design choices:
 **Typography**:
 - Use a modular type scale (1.2, 1.25, 1.333, 1.5 ratios)
 - Pair a distinctive display font with a refined body font
-- Establish clear hierarchy through weight, size, and spacing
 - Set body text at 16-18px minimum for readability
 - Use proper line heights (1.4-1.6 for body, tighter for headings)
 
 **Color & Contrast**:
 - Build palettes from a dominant color with intentional accents
 - Use off-whites and near-blacks for softer, sophisticated feel
-- Meet WCAG AA contrast (4.5:1 text, 3:1 UI elements)
-- Create semantic color tokens (success, warning, error, info)
-- Test with color blindness simulators
 
 **Layout & Space**:
 - Use a spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96)
 - Create visual rhythm through varied spacing
-- Let content breathe with generous whitespace
 - Use asymmetry and unexpected compositions
 - Break the grid intentionally for emphasis
 
 **Motion**:
-- Animate with purpose (guide attention, confirm actions)
 - Use 150-300ms for micro-interactions
 - Prefer transform and opacity (GPU-accelerated)
-- Respect prefers-reduced-motion preferences
 - Stagger reveals for orchestrated page loads
 
 **Interaction**:
-- Design clear, visible focus indicators
-- Make touch targets at least 44×44px
-- Provide immediate feedback for all actions
 - Write specific, helpful error messages
-- Support keyboard, mouse, and touch equally
 
 **Responsive**:
-- Design mobile-first, enhance for larger screens
 - Use fluid typography (clamp for smooth scaling)
-- Ensure all functionality works across devices
 - Test landscape orientation on mobile
 - Consider device capabilities (not just screen size)
 
@@ -98,46 +85,33 @@ Focus on intentional, distinctive design choices:
 These patterns create generic "AI slop" aesthetics:
 
 **Typography**:
-- Don't use more than 2-3 font families
-- Don't use decorative fonts for body text
 - Don't implement arbitrary font sizes without a scale
-- Don't sacrifice readability for aesthetic novelty
-- Don't skip fallback font definitions
 
 **Color & Contrast**:
 - Don't use gray text on colored backgrounds
-- Don't rely on color alone to convey information
 - Don't use pure gray, pure black (#000), or pure white (#fff) - add subtle color tint
 - Don't create palettes with arbitrary color choices
-- Don't ignore color blindness (8% of men)
 
 **Layout & Space**:
 - Don't wrap everything in cards
 - Don't nest cards inside cards
 - Don't make all spacing equal (variety creates hierarchy)
-- Don't forget white space is a design element
 - Don't create hierarchy through size alone
 
 **Motion**:
-- Don't animate without purpose
 - Don't use durations over 500ms for UI feedback
 - Don't animate layout properties (width, height, padding, margin) - use transform instead
 - Don't use bounce or elastic easing - they feel dated and tacky; use ease-out-quart/quint/expo
-- Don't ignore prefers-reduced-motion
 
 **Interaction**:
-- Don't remove focus indicators without alternatives
 - Don't use placeholder text as labels
-- Don't make touch targets smaller than 44×44px
 - Don't show generic error messages
 - Don't repeat the same information (redundant headers, intro restating heading, etc.)
 
 **Responsive**:
-- Don't design desktop-first and cram into mobile
 - Don't hide critical functionality on mobile
 - Don't use device detection over feature detection
 - Don't forget about landscape orientation
-- Don't assume all mobile devices are powerful
 
 These anti-patterns are baked into training data from countless generic templates. Without explicit guidance, AI reproduces them. This skill ensures your AI knows both what to do AND what to avoid.
 

dist/claude-code/.claude/skills/frontend-design/SKILL.md

@@ -54,42 +54,29 @@ Focus on intentional, distinctive design choices:
 **Typography**:
 - Use a modular type scale (1.2, 1.25, 1.333, 1.5 ratios)
 - Pair a distinctive display font with a refined body font
-- Establish clear hierarchy through weight, size, and spacing
 - Set body text at 16-18px minimum for readability
 - Use proper line heights (1.4-1.6 for body, tighter for headings)
 
 **Color & Contrast**:
 - Build palettes from a dominant color with intentional accents
 - Use off-whites and near-blacks for softer, sophisticated feel
-- Meet WCAG AA contrast (4.5:1 text, 3:1 UI elements)
-- Create semantic color tokens (success, warning, error, info)
-- Test with color blindness simulators
 
 **Layout & Space**:
 - Use a spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96)
 - Create visual rhythm through varied spacing
-- Let content breathe with generous whitespace
 - Use asymmetry and unexpected compositions
 - Break the grid intentionally for emphasis
 
 **Motion**:
-- Animate with purpose (guide attention, confirm actions)
 - Use 150-300ms for micro-interactions
 - Prefer transform and opacity (GPU-accelerated)
-- Respect prefers-reduced-motion preferences
 - Stagger reveals for orchestrated page loads
 
 **Interaction**:
-- Design clear, visible focus indicators
-- Make touch targets at least 44×44px
-- Provide immediate feedback for all actions
 - Write specific, helpful error messages
-- Support keyboard, mouse, and touch equally
 
 **Responsive**:
-- Design mobile-first, enhance for larger screens
 - Use fluid typography (clamp for smooth scaling)
-- Ensure all functionality works across devices
 - Test landscape orientation on mobile
 - Consider device capabilities (not just screen size)
 
@@ -98,46 +85,33 @@ Focus on intentional, distinctive design choices:
 These patterns create generic "AI slop" aesthetics:
 
 **Typography**:
-- Don't use more than 2-3 font families
-- Don't use decorative fonts for body text
 - Don't implement arbitrary font sizes without a scale
-- Don't sacrifice readability for aesthetic novelty
-- Don't skip fallback font definitions
 
 **Color & Contrast**:
 - Don't use gray text on colored backgrounds
-- Don't rely on color alone to convey information
 - Don't use pure gray, pure black (#000), or pure white (#fff) - add subtle color tint
 - Don't create palettes with arbitrary color choices
-- Don't ignore color blindness (8% of men)
 
 **Layout & Space**:
 - Don't wrap everything in cards
 - Don't nest cards inside cards
 - Don't make all spacing equal (variety creates hierarchy)
-- Don't forget white space is a design element
 - Don't create hierarchy through size alone
 
 **Motion**:
-- Don't animate without purpose
 - Don't use durations over 500ms for UI feedback
 - Don't animate layout properties (width, height, padding, margin) - use transform instead
 - Don't use bounce or elastic easing - they feel dated and tacky; use ease-out-quart/quint/expo
-- Don't ignore prefers-reduced-motion
 
 **Interaction**:
-- Don't remove focus indicators without alternatives
 - Don't use placeholder text as labels
-- Don't make touch targets smaller than 44×44px
 - Don't show generic error messages
 - Don't repeat the same information (redundant headers, intro restating heading, etc.)
 
 **Responsive**:
-- Don't design desktop-first and cram into mobile
 - Don't hide critical functionality on mobile
 - Don't use device detection over feature detection
 - Don't forget about landscape orientation
-- Don't assume all mobile devices are powerful
 
 These anti-patterns are baked into training data from countless generic templates. Without explicit guidance, AI reproduces them. This skill ensures your AI knows both what to do AND what to avoid.
 

source/patterns.md

@@ -4,85 +4,59 @@ patterns:
     items:
       - Use a modular type scale (1.2, 1.25, 1.333, 1.5 ratios)
       - Pair a distinctive display font with a refined body font
-      - Establish clear hierarchy through weight, size, and spacing
       - Set body text at 16-18px minimum for readability
       - Use proper line heights (1.4-1.6 for body, tighter for headings)
   - name: Color & Contrast
     items:
       - Build palettes from a dominant color with intentional accents
       - Use off-whites and near-blacks for softer, sophisticated feel
-      - Meet WCAG AA contrast (4.5:1 text, 3:1 UI elements)
-      - Create semantic color tokens (success, warning, error, info)
-      - Test with color blindness simulators
   - name: Layout & Space
     items:
       - Use a spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96)
       - Create visual rhythm through varied spacing
-      - Let content breathe with generous whitespace
       - Use asymmetry and unexpected compositions
       - Break the grid intentionally for emphasis
   - name: Motion
     items:
-      - Animate with purpose (guide attention, confirm actions)
       - Use 150-300ms for micro-interactions
       - Prefer transform and opacity (GPU-accelerated)
-      - Respect prefers-reduced-motion preferences
       - Stagger reveals for orchestrated page loads
   - name: Interaction
     items:
-      - Design clear, visible focus indicators
-      - Make touch targets at least 44×44px
-      - Provide immediate feedback for all actions
       - Write specific, helpful error messages
-      - Support keyboard, mouse, and touch equally
   - name: Responsive
     items:
-      - Design mobile-first, enhance for larger screens
       - Use fluid typography (clamp for smooth scaling)
-      - Ensure all functionality works across devices
       - Test landscape orientation on mobile
       - Consider device capabilities (not just screen size)
 antipatterns:
   - name: Typography
     items:
-      - Don't use more than 2-3 font families
-      - Don't use decorative fonts for body text
       - Don't implement arbitrary font sizes without a scale
-      - Don't sacrifice readability for aesthetic novelty
-      - Don't skip fallback font definitions
   - name: Color & Contrast
     items:
       - Don't use gray text on colored backgrounds
-      - Don't rely on color alone to convey information
       - Don't use pure gray, pure black (#000), or pure white (#fff) - add subtle color tint
       - Don't create palettes with arbitrary color choices
-      - Don't ignore color blindness (8% of men)
   - name: Layout & Space
     items:
       - Don't wrap everything in cards
       - Don't nest cards inside cards
       - Don't make all spacing equal (variety creates hierarchy)
-      - Don't forget white space is a design element
       - Don't create hierarchy through size alone
   - name: Motion
     items:
-      - Don't animate without purpose
       - Don't use durations over 500ms for UI feedback
       - Don't animate layout properties (width, height, padding, margin) - use transform instead
       - Don't use bounce or elastic easing - they feel dated and tacky; use ease-out-quart/quint/expo
-      - Don't ignore prefers-reduced-motion
   - name: Interaction
     items:
-      - Don't remove focus indicators without alternatives
       - Don't use placeholder text as labels
-      - Don't make touch targets smaller than 44×44px
       - Don't show generic error messages
       - Don't repeat the same information (redundant headers, intro restating heading, etc.)
   - name: Responsive
     items:
-      - Don't design desktop-first and cram into mobile
       - Don't hide critical functionality on mobile
       - Don't use device detection over feature detection
       - Don't forget about landscape orientation
-      - Don't assume all mobile devices are powerful
 ---