From df981860c2eaec29633524402a75680c40d74605 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Tue, 16 Dec 2025 15:35:38 -0800 Subject: [PATCH] Generate patterns section from YAML data (single source of truth) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Updated claude-code transformer to generate markdown from YAML patterns/antipatterns - Removed redundant prose body from patterns.md - SKILL.md now contains detailed lists (5 items per category) instead of condensed prose - patterns.md YAML frontmatter is now the single source of truth for both: - Website API (/api/patterns) - Generated skill files 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- .claude/skills/frontend-design/SKILL.md | 85 ++++++++++++++++--- .../.claude/skills/frontend-design/SKILL.md | 85 ++++++++++++++++--- dist/codex/AGENTS.frontend-design.md | 38 --------- dist/cursor/.cursor/rules/frontend-design.md | 38 --------- dist/gemini/GEMINI.frontend-design.md | 38 --------- scripts/lib/transformers/claude-code.js | 61 +++++++++++-- source/patterns.md | 36 -------- 7 files changed, 202 insertions(+), 179 deletions(-) diff --git a/.claude/skills/frontend-design/SKILL.md b/.claude/skills/frontend-design/SKILL.md index 5b4f244b2..16e712e2d 100644 --- a/.claude/skills/frontend-design/SKILL.md +++ b/.claude/skills/frontend-design/SKILL.md @@ -51,34 +51,97 @@ This reference defines what TO do and what NOT to do when creating frontend inte Focus on intentional, distinctive design choices: -**Typography**: Use a modular type scale with a distinctive display font paired with a refined body font. Establish clear hierarchy through weight, size, and spacing—not size alone. +**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**: Build palettes from a dominant color with sharp accents. Use off-whites and near-blacks for sophistication. Always meet WCAG AA contrast requirements. +**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 -**Space**: Use a spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96). Create visual rhythm through varied spacing. Let content breathe. Break the grid intentionally. +**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 and confirm actions. Use 150-300ms for micro-interactions. Prefer transform and opacity with smooth ease-out curves (quart, quint, expo). Stagger reveals for orchestrated page loads. +**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 focus indicators. Make touch targets 44×44px minimum. Provide immediate feedback. Write specific, helpful error messages. +**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. Use fluid typography with clamp(). Ensure all functionality works across devices. +**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) ### What NOT to Do (Anti-Patterns) These patterns create generic "AI slop" aesthetics: -**Generic Visuals**: Defaulting to Inter/Roboto/Arial, purple-to-blue gradients on white, pure grays without color tint, wrapping everything in rounded cards, decorative shadows without purpose. +**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 -**Structural Issues**: Arbitrary spacing without a scale, hierarchy through size alone, equal spacing everywhere, cards nested inside cards, redundant copy (headers restating intros, repeated explanations). +**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) -**Motion Mistakes**: Bounce and elastic easing (dated and tacky), animating layout properties, durations over 500ms for feedback, animation without purpose. +**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 -**Interaction Failures**: Removing focus outlines without alternatives, placeholder text as labels, touch targets under 44×44px, generic "Something went wrong" errors, gray text on colored backgrounds. +**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 -**Accessibility Violations**: Color-only meaning, ignoring prefers-reduced-motion, failing WCAG contrast, creating keyboard traps. +**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. + --- ## Domain Reference Files diff --git a/dist/claude-code/.claude/skills/frontend-design/SKILL.md b/dist/claude-code/.claude/skills/frontend-design/SKILL.md index 5b4f244b2..16e712e2d 100644 --- a/dist/claude-code/.claude/skills/frontend-design/SKILL.md +++ b/dist/claude-code/.claude/skills/frontend-design/SKILL.md @@ -51,34 +51,97 @@ This reference defines what TO do and what NOT to do when creating frontend inte Focus on intentional, distinctive design choices: -**Typography**: Use a modular type scale with a distinctive display font paired with a refined body font. Establish clear hierarchy through weight, size, and spacing—not size alone. +**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**: Build palettes from a dominant color with sharp accents. Use off-whites and near-blacks for sophistication. Always meet WCAG AA contrast requirements. +**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 -**Space**: Use a spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96). Create visual rhythm through varied spacing. Let content breathe. Break the grid intentionally. +**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 and confirm actions. Use 150-300ms for micro-interactions. Prefer transform and opacity with smooth ease-out curves (quart, quint, expo). Stagger reveals for orchestrated page loads. +**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 focus indicators. Make touch targets 44×44px minimum. Provide immediate feedback. Write specific, helpful error messages. +**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. Use fluid typography with clamp(). Ensure all functionality works across devices. +**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) ### What NOT to Do (Anti-Patterns) These patterns create generic "AI slop" aesthetics: -**Generic Visuals**: Defaulting to Inter/Roboto/Arial, purple-to-blue gradients on white, pure grays without color tint, wrapping everything in rounded cards, decorative shadows without purpose. +**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 -**Structural Issues**: Arbitrary spacing without a scale, hierarchy through size alone, equal spacing everywhere, cards nested inside cards, redundant copy (headers restating intros, repeated explanations). +**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) -**Motion Mistakes**: Bounce and elastic easing (dated and tacky), animating layout properties, durations over 500ms for feedback, animation without purpose. +**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 -**Interaction Failures**: Removing focus outlines without alternatives, placeholder text as labels, touch targets under 44×44px, generic "Something went wrong" errors, gray text on colored backgrounds. +**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 -**Accessibility Violations**: Color-only meaning, ignoring prefers-reduced-motion, failing WCAG contrast, creating keyboard traps. +**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. + --- ## Domain Reference Files diff --git a/dist/codex/AGENTS.frontend-design.md b/dist/codex/AGENTS.frontend-design.md index ebdf45088..b11922dcf 100644 --- a/dist/codex/AGENTS.frontend-design.md +++ b/dist/codex/AGENTS.frontend-design.md @@ -35,44 +35,6 @@ Interpret creatively and make unexpected choices that feel genuinely designed fo Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision. - - -## Design Patterns Reference - -This reference defines what TO do and what NOT to do when creating frontend interfaces. These patterns fight against model bias—the tendency of LLMs to converge on the same predictable choices. - -### What TO Do (Patterns) - -Focus on intentional, distinctive design choices: - -**Typography**: Use a modular type scale with a distinctive display font paired with a refined body font. Establish clear hierarchy through weight, size, and spacing—not size alone. - -**Color**: Build palettes from a dominant color with sharp accents. Use off-whites and near-blacks for sophistication. Always meet WCAG AA contrast requirements. - -**Space**: Use a spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96). Create visual rhythm through varied spacing. Let content breathe. Break the grid intentionally. - -**Motion**: Animate with purpose—guide attention and confirm actions. Use 150-300ms for micro-interactions. Prefer transform and opacity with smooth ease-out curves (quart, quint, expo). Stagger reveals for orchestrated page loads. - -**Interaction**: Design clear focus indicators. Make touch targets 44×44px minimum. Provide immediate feedback. Write specific, helpful error messages. - -**Responsive**: Design mobile-first. Use fluid typography with clamp(). Ensure all functionality works across devices. - -### What NOT to Do (Anti-Patterns) - -These patterns create generic "AI slop" aesthetics: - -**Generic Visuals**: Defaulting to Inter/Roboto/Arial, purple-to-blue gradients on white, pure grays without color tint, wrapping everything in rounded cards, decorative shadows without purpose. - -**Structural Issues**: Arbitrary spacing without a scale, hierarchy through size alone, equal spacing everywhere, cards nested inside cards, redundant copy (headers restating intros, repeated explanations). - -**Motion Mistakes**: Bounce and elastic easing (dated and tacky), animating layout properties, durations over 500ms for feedback, animation without purpose. - -**Interaction Failures**: Removing focus outlines without alternatives, placeholder text as labels, touch targets under 44×44px, generic "Something went wrong" errors, gray text on colored backgrounds. - -**Accessibility Violations**: Color-only meaning, ignoring prefers-reduced-motion, failing WCAG contrast, creating keyboard traps. - -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. - --- ## Domain Reference Files diff --git a/dist/cursor/.cursor/rules/frontend-design.md b/dist/cursor/.cursor/rules/frontend-design.md index ebdf45088..b11922dcf 100644 --- a/dist/cursor/.cursor/rules/frontend-design.md +++ b/dist/cursor/.cursor/rules/frontend-design.md @@ -35,44 +35,6 @@ Interpret creatively and make unexpected choices that feel genuinely designed fo Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision. - - -## Design Patterns Reference - -This reference defines what TO do and what NOT to do when creating frontend interfaces. These patterns fight against model bias—the tendency of LLMs to converge on the same predictable choices. - -### What TO Do (Patterns) - -Focus on intentional, distinctive design choices: - -**Typography**: Use a modular type scale with a distinctive display font paired with a refined body font. Establish clear hierarchy through weight, size, and spacing—not size alone. - -**Color**: Build palettes from a dominant color with sharp accents. Use off-whites and near-blacks for sophistication. Always meet WCAG AA contrast requirements. - -**Space**: Use a spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96). Create visual rhythm through varied spacing. Let content breathe. Break the grid intentionally. - -**Motion**: Animate with purpose—guide attention and confirm actions. Use 150-300ms for micro-interactions. Prefer transform and opacity with smooth ease-out curves (quart, quint, expo). Stagger reveals for orchestrated page loads. - -**Interaction**: Design clear focus indicators. Make touch targets 44×44px minimum. Provide immediate feedback. Write specific, helpful error messages. - -**Responsive**: Design mobile-first. Use fluid typography with clamp(). Ensure all functionality works across devices. - -### What NOT to Do (Anti-Patterns) - -These patterns create generic "AI slop" aesthetics: - -**Generic Visuals**: Defaulting to Inter/Roboto/Arial, purple-to-blue gradients on white, pure grays without color tint, wrapping everything in rounded cards, decorative shadows without purpose. - -**Structural Issues**: Arbitrary spacing without a scale, hierarchy through size alone, equal spacing everywhere, cards nested inside cards, redundant copy (headers restating intros, repeated explanations). - -**Motion Mistakes**: Bounce and elastic easing (dated and tacky), animating layout properties, durations over 500ms for feedback, animation without purpose. - -**Interaction Failures**: Removing focus outlines without alternatives, placeholder text as labels, touch targets under 44×44px, generic "Something went wrong" errors, gray text on colored backgrounds. - -**Accessibility Violations**: Color-only meaning, ignoring prefers-reduced-motion, failing WCAG contrast, creating keyboard traps. - -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. - --- ## Domain Reference Files diff --git a/dist/gemini/GEMINI.frontend-design.md b/dist/gemini/GEMINI.frontend-design.md index ebdf45088..b11922dcf 100644 --- a/dist/gemini/GEMINI.frontend-design.md +++ b/dist/gemini/GEMINI.frontend-design.md @@ -35,44 +35,6 @@ Interpret creatively and make unexpected choices that feel genuinely designed fo Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision. - - -## Design Patterns Reference - -This reference defines what TO do and what NOT to do when creating frontend interfaces. These patterns fight against model bias—the tendency of LLMs to converge on the same predictable choices. - -### What TO Do (Patterns) - -Focus on intentional, distinctive design choices: - -**Typography**: Use a modular type scale with a distinctive display font paired with a refined body font. Establish clear hierarchy through weight, size, and spacing—not size alone. - -**Color**: Build palettes from a dominant color with sharp accents. Use off-whites and near-blacks for sophistication. Always meet WCAG AA contrast requirements. - -**Space**: Use a spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96). Create visual rhythm through varied spacing. Let content breathe. Break the grid intentionally. - -**Motion**: Animate with purpose—guide attention and confirm actions. Use 150-300ms for micro-interactions. Prefer transform and opacity with smooth ease-out curves (quart, quint, expo). Stagger reveals for orchestrated page loads. - -**Interaction**: Design clear focus indicators. Make touch targets 44×44px minimum. Provide immediate feedback. Write specific, helpful error messages. - -**Responsive**: Design mobile-first. Use fluid typography with clamp(). Ensure all functionality works across devices. - -### What NOT to Do (Anti-Patterns) - -These patterns create generic "AI slop" aesthetics: - -**Generic Visuals**: Defaulting to Inter/Roboto/Arial, purple-to-blue gradients on white, pure grays without color tint, wrapping everything in rounded cards, decorative shadows without purpose. - -**Structural Issues**: Arbitrary spacing without a scale, hierarchy through size alone, equal spacing everywhere, cards nested inside cards, redundant copy (headers restating intros, repeated explanations). - -**Motion Mistakes**: Bounce and elastic easing (dated and tacky), animating layout properties, durations over 500ms for feedback, animation without purpose. - -**Interaction Failures**: Removing focus outlines without alternatives, placeholder text as labels, touch targets under 44×44px, generic "Something went wrong" errors, gray text on colored backgrounds. - -**Accessibility Violations**: Color-only meaning, ignoring prefers-reduced-motion, failing WCAG contrast, creating keyboard traps. - -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. - --- ## Domain Reference Files diff --git a/scripts/lib/transformers/claude-code.js b/scripts/lib/transformers/claude-code.js index 198d2c3d2..7943c58bd 100644 --- a/scripts/lib/transformers/claude-code.js +++ b/scripts/lib/transformers/claude-code.js @@ -1,6 +1,50 @@ import path from 'path'; import { cleanDir, ensureDir, writeFile, generateYamlFrontmatter } from '../utils.js'; +/** + * Generate markdown from structured patterns/antipatterns data + */ +function generatePatternsMarkdown(patterns) { + if (!patterns || (!patterns.patterns?.length && !patterns.antipatterns?.length)) { + return ''; + } + + let md = `## Design Patterns Reference + +This reference defines what TO do and what NOT to do when creating frontend interfaces. These patterns fight against model bias—the tendency of LLMs to converge on the same predictable choices. + +### What TO Do (Patterns) + +Focus on intentional, distinctive design choices: +`; + + for (const category of patterns.patterns || []) { + md += `\n**${category.name}**:\n`; + for (const item of category.items || []) { + md += `- ${item}\n`; + } + } + + md += ` +### What NOT to Do (Anti-Patterns) + +These patterns create generic "AI slop" aesthetics: +`; + + for (const category of patterns.antipatterns || []) { + md += `\n**${category.name}**:\n`; + for (const item of category.items || []) { + md += `- ${item}\n`; + } + } + + md += ` +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. +`; + + return md; +} + /** * Claude Code Transformer (Full Featured) * @@ -43,13 +87,16 @@ export function transformClaudeCode(commands, skills, distDir, patterns = null) let body = skill.body; - // Merge patterns body into frontend-design skill (before Domain Reference Files section) - if (skill.name === 'frontend-design' && patterns && patterns.body) { - const insertPoint = body.indexOf('---\n\n## Domain Reference Files'); - if (insertPoint > -1) { - body = body.slice(0, insertPoint) + '\n\n' + patterns.body + '\n\n' + body.slice(insertPoint); - } else { - body += '\n\n' + patterns.body; + // Generate and merge patterns into frontend-design skill (before Domain Reference Files section) + if (skill.name === 'frontend-design' && patterns) { + const patternsMarkdown = generatePatternsMarkdown(patterns); + if (patternsMarkdown) { + const insertPoint = body.indexOf('---\n\n## Domain Reference Files'); + if (insertPoint > -1) { + body = body.slice(0, insertPoint) + '\n\n' + patternsMarkdown + '\n\n' + body.slice(insertPoint); + } else { + body += '\n\n' + patternsMarkdown; + } } } diff --git a/source/patterns.md b/source/patterns.md index bc1e70343..5ada3f607 100644 --- a/source/patterns.md +++ b/source/patterns.md @@ -86,39 +86,3 @@ antipatterns: - Don't forget about landscape orientation - Don't assume all mobile devices are powerful --- - -## Design Patterns Reference - -This reference defines what TO do and what NOT to do when creating frontend interfaces. These patterns fight against model bias—the tendency of LLMs to converge on the same predictable choices. - -### What TO Do (Patterns) - -Focus on intentional, distinctive design choices: - -**Typography**: Use a modular type scale with a distinctive display font paired with a refined body font. Establish clear hierarchy through weight, size, and spacing—not size alone. - -**Color**: Build palettes from a dominant color with sharp accents. Use off-whites and near-blacks for sophistication. Always meet WCAG AA contrast requirements. - -**Space**: Use a spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96). Create visual rhythm through varied spacing. Let content breathe. Break the grid intentionally. - -**Motion**: Animate with purpose—guide attention and confirm actions. Use 150-300ms for micro-interactions. Prefer transform and opacity with smooth ease-out curves (quart, quint, expo). Stagger reveals for orchestrated page loads. - -**Interaction**: Design clear focus indicators. Make touch targets 44×44px minimum. Provide immediate feedback. Write specific, helpful error messages. - -**Responsive**: Design mobile-first. Use fluid typography with clamp(). Ensure all functionality works across devices. - -### What NOT to Do (Anti-Patterns) - -These patterns create generic "AI slop" aesthetics: - -**Generic Visuals**: Defaulting to Inter/Roboto/Arial, purple-to-blue gradients on white, pure grays without color tint, wrapping everything in rounded cards, decorative shadows without purpose. - -**Structural Issues**: Arbitrary spacing without a scale, hierarchy through size alone, equal spacing everywhere, cards nested inside cards, redundant copy (headers restating intros, repeated explanations). - -**Motion Mistakes**: Bounce and elastic easing (dated and tacky), animating layout properties, durations over 500ms for feedback, animation without purpose. - -**Interaction Failures**: Removing focus outlines without alternatives, placeholder text as labels, touch targets under 44×44px, generic "Something went wrong" errors, gray text on colored backgrounds. - -**Accessibility Violations**: Color-only meaning, ignoring prefers-reduced-motion, failing WCAG contrast, creating keyboard traps. - -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.