picasso-skill 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Viperr
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,124 @@
+# Picasso
+
+The ultimate AI design skill for producing distinctive, production-grade frontend interfaces.
+
+Picasso consolidates best practices from 18+ sources into a single comprehensive skill that covers every dimension of frontend design: typography, color systems, spatial composition, motion, interaction patterns, responsive design, sound, haptics, icons, generative art, theming, React architecture, component taxonomy, configurable design intensity, and an exhaustive anti-patterns library.
+
+## Install
+
+### Option 1: npx (Recommended)
+
+Works with Claude Code, Cursor, Codex, and any agent that reads skill files:
+
+```bash
+# Install to current project (Claude Code)
+npx picasso-skill
+
+# Install globally (all Claude Code projects)
+npx picasso-skill --global
+
+# Install for Cursor
+npx picasso-skill --cursor
+
+# Install for Codex
+npx picasso-skill --codex
+
+# Install to .agents/skills/
+npx picasso-skill --agents
+
+# Custom path
+npx picasso-skill --path ./my-skills
+```
+
+### Option 2: One-Liner (no npm needed)
+
+```bash
+# Project-specific
+git clone https://github.com/viperrcrypto/picasso.git /tmp/picasso && mkdir -p .claude/skills && cp -r /tmp/picasso/skills/picasso .claude/skills/picasso && rm -rf /tmp/picasso
+
+# Global (all projects)
+git clone https://github.com/viperrcrypto/picasso.git /tmp/picasso && cp -r /tmp/picasso/skills/picasso ~/.claude/skills/picasso && rm -rf /tmp/picasso
+```
+
+### Option 3: Manual
+
+```bash
+git clone https://github.com/viperrcrypto/picasso.git
+cp -r picasso/skills/picasso ~/.claude/skills/picasso
+```
+
+### Option 4: Claude.ai (Consumer)
+
+Upload `skills/picasso/SKILL.md` as a Custom Skill in Claude.ai settings. Upload the reference files alongside it for full coverage.
+
+## What's Inside
+
+```
+skills/picasso/
+  SKILL.md                          # Main skill file
+  references/
+    typography.md                   # Type systems, font pairing, scales, OpenType
+    color-and-contrast.md           # OKLCH, tinted neutrals, dark mode, a11y
+    spatial-design.md               # Spacing scales, grids, visual hierarchy
+    motion-and-animation.md         # Easing, staggering, text morphing, reduced motion
+    interaction-design.md           # Forms, focus, loading, empty states, errors
+    responsive-design.md            # Mobile-first, fluid, container queries
+    sensory-design.md               # UI sounds, haptic feedback
+    react-patterns.md               # Server/client components, state, performance
+    anti-patterns.md                # What NOT to do (the most important file)
+    design-system.md                # DESIGN.md generation, theming, tokens
+    generative-art.md               # Algorithmic art, p5.js, seeded randomness
+    component-patterns.md           # Standard naming, taxonomy, state matrix
+```
+
+## Configurable Settings
+
+Three dials (1-10) control the design output:
+
+| Setting | Low (1-3) | Mid (4-6) | High (7-10) |
+|---|---|---|---|
+| **DESIGN_VARIANCE** | Clean, centered, conventional | Considered asymmetry | Avant-garde, overlapping, unconventional |
+| **MOTION_INTENSITY** | Hover states and fades only | Staggered reveals, scroll-triggered | Magnetic cursors, parallax, complex choreography |
+| **VISUAL_DENSITY** | Spacious, luxury | Balanced whitespace | Dense dashboards, data-heavy |
+
+## 21 Commands
+
+| Command | Effect |
+|---|---|
+| `/audit` | Technical quality check: a11y, performance, responsive |
+| `/critique` | UX design review: hierarchy, clarity, resonance |
+| `/polish` | Final pass: spacing, transitions, copy refinement |
+| `/simplify` | Strip to essence |
+| `/animate` | Add purposeful motion |
+| `/bolder` | Amplify timid designs |
+| `/quieter` | Tone down aggressive designs |
+| `/normalize` | Align with design system standards |
+| `/theme` | Generate or apply a theme |
+| `/sound` | Add UI sound effects |
+| `/haptics` | Add haptic feedback |
+| `/redesign` | Audit existing project, fix systematically |
+| `/soft` | Premium soft aesthetic preset |
+| `/minimalist` | Editorial minimalism preset |
+| `/brutalist` | Raw mechanical aesthetic preset |
+| `/stitch` | Generate Google Stitch DESIGN.md |
+| `/clarify` | Improve unclear UX copy |
+| `/harden` | Error handling, i18n, edge cases |
+| `/colorize` | Introduce strategic color |
+| `/delight` | Add moments of joy |
+| `/extract` | Pull into reusable components |
+
+## Sources
+
+Built on 18+ sources including [Anthropic's official skills](https://github.com/anthropics/skills), [Impeccable](https://github.com/pbakaus/impeccable), [Taste Skill](https://github.com/Leonxlnx/taste-skill), [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md), [Component Gallery](https://component.gallery/), [Torph](https://torph.lochie.me/), [Soundcn](https://github.com/kapishdima/soundcn), [Vercel agent-skills](https://github.com/vercel-labs/agent-skills), and more. See the full attribution list in the skill file.
+
+## The Non-Negotiables
+
+1. No design should look like AI made it.
+2. Every design must have a clear aesthetic point of view.
+3. Match implementation complexity to vision.
+4. Text is always a design element.
+5. Every detail matters.
+
+## License
+
+MIT

package/SKILL.md

@@ -0,0 +1,202 @@
+---
+name: picasso
+description: >
+  The ultimate frontend design and UI engineering skill. Use this whenever the user asks to build, design, style, or improve any web interface, component, page, application, dashboard, landing page, artifact, poster, or visual output. Covers typography, color systems, spatial design, motion/animation, interaction design, responsive layouts, sound design, haptic feedback, icon systems, generative art, theming, React best practices, and DESIGN.md system generation. Also use when the user asks to audit, critique, polish, simplify, animate, or normalize a frontend. Triggers on any mention of "make it look good," "fix the design," "UI," "UX," "frontend," "component," "landing page," "dashboard," "artifact," "poster," "design system," "theme," "animation," "responsive," or any request to improve visual quality. Use this skill even when the user does not explicitly ask for design help but the task involves producing a visual interface.
+---
+
+# Picasso
+
+The ultimate design skill for producing distinctive, production-grade frontend interfaces, visual artifacts, and design systems. This skill consolidates best practices from Anthropic's frontend-design, canvas-design, algorithmic-art, and theme-factory skills, Impeccable's 7-domain reference system, VoltAgent's DESIGN.md format, Vercel's React and typography standards, and specialized libraries for sound, haptics, icons, and text animation.
+
+Every output should look like it was built by a senior design engineer who spent days refining it, not generated by an AI in seconds.
+
+---
+
+## Configurable Settings
+
+These three dials (1-10) control the overall character of the output. Adjust based on what is being built. The user can set these explicitly or they can be inferred from context.
+
+- **DESIGN_VARIANCE** (default: 6) — How experimental the layout is. 1-3: clean, centered, conventional. 4-6: considered asymmetry, intentional breaks. 7-10: avant-garde, overlapping elements, unconventional grids.
+- **MOTION_INTENSITY** (default: 5) — How much animation is present. 1-3: hover states and fades only. 4-6: staggered reveals, scroll-triggered, text morphing. 7-10: magnetic cursors, parallax, complex choreography.
+- **VISUAL_DENSITY** (default: 5) — How much content fits on one screen. 1-3: spacious, luxury, breathing room. 4-6: balanced, structured whitespace. 7-10: dense dashboards, data-heavy, compact.
+
+When the user says "make it premium" or "luxury feel," drop VISUAL_DENSITY to 2-3 and MOTION_INTENSITY to 4-5. When they say "dashboard" or "admin panel," raise VISUAL_DENSITY to 7-8. When they say "make it pop" or "wow factor," raise DESIGN_VARIANCE and MOTION_INTENSITY to 7-8.
+
+---
+
+## Step 0: Read the Right References
+
+Before writing any code, read the reference files relevant to the task. Each covers a domain in depth with rules, examples, and anti-patterns. Load only what you need.
+
+| Reference File | When to Read |
+|---|---|
+| `references/typography.md` | Any task involving text, fonts, headings, or type hierarchy |
+| `references/color-and-contrast.md` | Color palettes, dark mode, accessibility, tinted neutrals |
+| `references/spatial-design.md` | Layout, spacing, grids, visual hierarchy, whitespace |
+| `references/motion-and-animation.md` | Transitions, scroll effects, text morphing, micro-interactions |
+| `references/interaction-design.md` | Forms, focus states, loading, empty states, error handling |
+| `references/responsive-design.md` | Mobile-first, fluid, container queries, touch targets |
+| `references/sensory-design.md` | UI sound effects, haptic feedback, multi-sensory interfaces |
+| `references/react-patterns.md` | React/Next.js component architecture, hooks, performance |
+| `references/anti-patterns.md` | Explicit list of what NOT to do (the most important reference) |
+| `references/design-system.md` | Generating DESIGN.md files, theming, systematic tokens |
+| `references/generative-art.md` | Algorithmic art, p5.js, seeded randomness, flow fields |
+| `references/component-patterns.md` | Standard component naming, taxonomy, and state patterns |
+
+---
+
+## Step 1: Design Thinking
+
+Before writing a single line of code, answer these questions internally:
+
+**Purpose.** What problem does this interface solve? Who uses it? What is the single most important action?
+
+**Tone.** Commit to a specific aesthetic direction. Not "clean and modern" (that is meaningless). Pick something with teeth: brutalist, editorial, retro-terminal, luxury serif, toy-like, industrial, organic, Swiss grid, art deco, vaporwave, newspaper broadsheet, scientific journal, or something entirely original. The direction should be informed by the content, not applied generically.
+
+**Differentiation.** What makes this unforgettable? What is the one thing someone will remember after closing the tab? If there is no answer, the design is not ready.
+
+**Constraints.** Framework requirements, accessibility targets, performance budgets, existing design tokens.
+
+---
+
+## Step 2: Aesthetic Execution
+
+### Typography
+
+Choose fonts that are distinctive, not default. Never use Inter, Roboto, Arial, or system fonts as primary choices. Pair a display font with a body font. Use a modular type scale (1.25 or 1.333 ratio). Set line heights between 1.4 and 1.6 for body text. Use OpenType features (ligatures, tabular numbers, small caps) when the font supports them. See `references/typography.md` for the full system.
+
+### Color
+
+Build palettes with intention. Use OKLCH for perceptually uniform color manipulation. Always tint neutrals (never use pure gray or pure black). Dominant color with sharp accent outperforms evenly distributed palettes. Test contrast ratios: 4.5:1 minimum for body text, 3:1 for large text and UI elements. See `references/color-and-contrast.md`.
+
+### Spatial Composition
+
+Use a spacing scale (4px base: 4, 8, 12, 16, 24, 32, 48, 64, 96). Asymmetric layouts, overlapping elements, diagonal flow, and grid-breaking moments create visual interest. Generous negative space communicates confidence. Dense layouts need careful rhythm. See `references/spatial-design.md`.
+
+### Backgrounds and Visual Depth
+
+Never default to flat solid colors. Create atmosphere with gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays, or subtle backdrop filters. Depth comes from elevation systems: consistent shadow scales, surface hierarchy, and z-index discipline.
+
+### Motion
+
+One well-orchestrated page load with staggered reveals (using animation-delay) creates more impact than scattered micro-interactions. Use CSS transitions for simple state changes. Use `framer-motion` or the Motion library for React when choreography matters. Never use bounce or elastic easing (it looks dated). Respect `prefers-reduced-motion`. See `references/motion-and-animation.md`.
+
+### Text Animation
+
+For text morphing effects (counters, status changes, tab labels), use `torph` (dependency-free, works with React/Vue/Svelte). Import as `import { TextMorph } from 'torph/react'` and wrap any text that changes dynamically.
+
+### Sound
+
+For UI sound feedback (clicks, notifications, transitions), use the soundcn pattern: inline base64 audio data URIs with a `useSound` hook via Web Audio API. Zero dependencies. See `references/sensory-design.md`.
+
+### Haptics
+
+For mobile web, use the WebHaptics pattern via the Vibration API (`navigator.vibrate()`) to provide tactile feedback on button presses, toggles, and destructive actions. Always gate behind feature detection and user preference. See `references/sensory-design.md`.
+
+### Icons
+
+Use Lucide React as the default icon library (`lucide-react`). For broader searches across 200K+ icons from 150+ collections, use the `better-icons` CLI pattern: search by keyword, retrieve SVG, sync to project. Prefer outline style for UI, solid for emphasis.
+
+### Avatars and Identity
+
+For deterministic avatar generation from strings (usernames, emails, UUIDs), use the Facehash pattern: a React component that generates unique face avatars. Same input always produces the same face. Zero external assets.
+
+---
+
+## Step 3: Implementation Standards
+
+### Single-File Artifacts
+
+When building for claude.ai artifacts (HTML or React), everything goes in one file. No external CSS files, no separate JS. Inline everything. For HTML artifacts, import external scripts only from `https://cdnjs.cloudflare.com`. For React artifacts, use only available libraries (lucide-react, recharts, d3, Three.js r128, Tone, shadcn/ui, Tailwind core utilities, lodash, mathjs, papaparse, Chart.js).
+
+### React Best Practices
+
+Follow these rules (see `references/react-patterns.md` for details):
+
+- Server Components by default, `'use client'` only when needed
+- Colocate state with the component that uses it
+- Prefer composition over prop drilling
+- Use `Suspense` boundaries with meaningful fallbacks
+- Never store derived state, compute it during render
+- Use semantic HTML elements, not `div` soup
+- Memoize expensive computations, not everything
+- Default export for page/route components, named exports for utilities
+
+### CSS Variables for Theming
+
+Always define a CSS variable system for colors, spacing, typography, and shadows. This makes themes swappable and dark mode trivial.
+
+```css
+:root {
+  --color-surface: #fafaf9;
+  --color-text: #1c1917;
+  --color-accent: #dc2626;
+  --radius: 8px;
+  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.05);
+}
+```
+
+### Accessibility Defaults
+
+Every interface must include: visible focus indicators (never `outline: none` without replacement), sufficient color contrast, keyboard navigability, ARIA labels on interactive elements without visible text, and `alt` text on meaningful images. Do not treat accessibility as optional.
+
+---
+
+## Step 4: Audit and Polish
+
+Before delivering any interface, run this mental checklist:
+
+1. **Typography audit.** Is there a clear type hierarchy? Are fonts loaded and rendering? Is body text readable at default zoom?
+2. **Color audit.** Does the palette feel cohesive? Do accents draw the eye to the right places? Does it work in both light and dark contexts?
+3. **Spatial audit.** Is spacing consistent? Are elements aligned to an invisible grid? Is there breathing room?
+4. **Interaction audit.** Do all interactive elements have hover, focus, and active states? Are transitions smooth? Is there loading feedback?
+5. **Responsive audit.** Does it work on 375px wide screens? Does it scale gracefully to ultrawide?
+6. **Motion audit.** Does the page load feel choreographed? Are transitions purposeful? Does `prefers-reduced-motion` disable non-essential animation?
+7. **Accessibility audit.** Can you tab through the entire interface? Are contrast ratios sufficient? Do screen readers make sense of the structure?
+
+---
+
+## Step 5: Design System Generation
+
+When asked to create a design system or DESIGN.md, follow the VoltAgent/Stitch format. See `references/design-system.md` for the complete template covering: visual theme and atmosphere, color palette with semantic roles, typography hierarchy, component styling (buttons, cards, inputs, navigation with states), layout principles, depth and elevation system, explicit dos and don'ts, responsive behavior, and an agent prompt guide.
+
+---
+
+## Step 6: Generative and Canvas Art
+
+When the task involves algorithmic art, generative visuals, or static poster/print design, see `references/generative-art.md`. The process: write an algorithmic philosophy (4-6 paragraphs), then express it through p5.js code with seeded randomness, parameter controls, and seed navigation.
+
+---
+
+## Commands
+
+These optional directives can be used to steer design refinement:
+
+| Command | Effect |
+|---|---|
+| `/audit` | Technical quality check: accessibility, performance, responsive |
+| `/critique` | UX design review: hierarchy, clarity, emotional resonance |
+| `/polish` | Final pass: refine spacing, transitions, copy |
+| `/simplify` | Strip to essence, remove visual noise |
+| `/animate` | Add purposeful motion and transitions |
+| `/bolder` | Amplify timid designs with stronger visual choices |
+| `/quieter` | Tone down overly aggressive designs |
+| `/normalize` | Align with design system standards |
+| `/theme` | Generate or apply a color/font theme |
+| `/sound` | Add UI sound effects to interactions |
+| `/haptics` | Add haptic feedback for mobile web |
+| `/redesign` | Audit an existing project, identify design problems, fix them systematically |
+| `/soft` | Apply premium soft aesthetic: generous whitespace, depth, smooth spring animations |
+| `/minimalist` | Apply editorial minimalism: monochrome, crisp borders, inspired by Linear/Notion |
+| `/brutalist` | Apply raw mechanical aesthetic: Swiss typography meets CRT terminal |
+| `/stitch` | Generate a Google Stitch-compatible DESIGN.md for the current project |
+
+---
+
+## The Non-Negotiables
+
+1. No design should ever look like "AI made this." No purple gradients on white. No Inter font. No centered everything. No cards nested in cards. No gray text on colored backgrounds.
+2. Every design must have a clear aesthetic point of view. If it could belong to any product, it belongs to none.
+3. Match implementation complexity to vision. Maximalist designs need elaborate code. Minimalist designs need surgical precision. Both require the same level of care.
+4. Text is always a design element, never an afterthought.
+5. Every detail matters. The shadow radius, the letter spacing, the hover transition duration, the border color in dark mode. These are not small decisions.

package/bin/install.mjs

@@ -0,0 +1,81 @@
+#!/usr/bin/env node
+
+import { existsSync, mkdirSync, cpSync, readdirSync } from "fs";
+import { resolve, join, dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const packageRoot = resolve(__dirname, "..");
+const skillSource = join(packageRoot, "skills", "picasso");
+
+const args = process.argv.slice(2);
+const command = args[0] || "install";
+
+if (command === "help" || command === "--help" || command === "-h") {
+  console.log(`
+  picasso-skill - The ultimate AI design skill
+
+  Usage:
+    npx picasso-skill              Install to current project (.claude/skills/)
+    npx picasso-skill --global     Install globally (~/.claude/skills/)
+    npx picasso-skill --cursor     Install for Cursor (.cursor/skills/)
+    npx picasso-skill --codex      Install for Codex (~/.codex/skills/)
+    npx picasso-skill --agents     Install to .agents/skills/
+    npx picasso-skill --path DIR   Install to a custom directory
+  `);
+  process.exit(0);
+}
+
+let targetDir;
+
+if (args.includes("--global") || args.includes("-g")) {
+  const home = process.env.HOME || process.env.USERPROFILE;
+  targetDir = join(home, ".claude", "skills", "picasso");
+} else if (args.includes("--cursor")) {
+  targetDir = join(process.cwd(), ".cursor", "skills", "picasso");
+} else if (args.includes("--codex")) {
+  const home = process.env.HOME || process.env.USERPROFILE;
+  targetDir = join(home, ".codex", "skills", "picasso");
+} else if (args.includes("--agents")) {
+  targetDir = join(process.cwd(), ".agents", "skills", "picasso");
+} else if (args.includes("--path")) {
+  const pathIdx = args.indexOf("--path");
+  const customPath = args[pathIdx + 1];
+  if (!customPath) {
+    console.error("Error: --path requires a directory argument");
+    process.exit(1);
+  }
+  targetDir = resolve(customPath, "picasso");
+} else {
+  // Default: project-level Claude Code
+  targetDir = join(process.cwd(), ".claude", "skills", "picasso");
+}
+
+console.log(`\n  Installing Picasso skill to: ${targetDir}\n`);
+
+try {
+  mkdirSync(targetDir, { recursive: true });
+  mkdirSync(join(targetDir, "references"), { recursive: true });
+
+  // Copy SKILL.md
+  cpSync(join(skillSource, "SKILL.md"), join(targetDir, "SKILL.md"));
+
+  // Copy all reference files
+  const refs = readdirSync(join(skillSource, "references"));
+  for (const ref of refs) {
+    cpSync(
+      join(skillSource, "references", ref),
+      join(targetDir, "references", ref)
+    );
+  }
+
+  console.log(`  Done! Installed ${1 + refs.length} files:`);
+  console.log(`    SKILL.md`);
+  for (const ref of refs) {
+    console.log(`    references/${ref}`);
+  }
+  console.log(`\n  Picasso is ready. Start designing.\n`);
+} catch (err) {
+  console.error(`  Error installing: ${err.message}`);
+  process.exit(1);
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "picasso-skill",
+  "version": "1.0.0",
+  "description": "The ultimate AI design skill for producing distinctive, production-grade frontend interfaces",
+  "bin": {
+    "picasso-skill": "./bin/install.mjs"
+  },
+  "keywords": [
+    "claude",
+    "claude-code",
+    "skill",
+    "design",
+    "frontend",
+    "ui",
+    "ux",
+    "cursor",
+    "codex",
+    "ai-agent",
+    "tailwind",
+    "react"
+  ],
+  "author": "viperrcrypto",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/viperrcrypto/picasso.git"
+  },
+  "homepage": "https://github.com/viperrcrypto/picasso",
+  "files": [
+    "bin/",
+    "skills/",
+    "SKILL.md",
+    "references/",
+    "LICENSE"
+  ]
+}

package/references/anti-patterns.md

@@ -0,0 +1,95 @@
+# Anti-Patterns Reference
+
+This is the most important reference file. These are the patterns that make AI-generated interfaces immediately recognizable. Avoid all of them.
+
+---
+
+## Typography Anti-Patterns
+
+- **Inter everywhere.** The default safe choice. It signals "I did not think about fonts."
+- **Roboto, Arial, Helvetica, system-ui as primary.** Same problem.
+- **Space Grotesk on repeat.** Overused in AI/crypto contexts. Pick something else.
+- **Light (300) weight for body text.** Hard to read on most screens.
+- **Centered paragraphs.** Center alignment works for 1-2 lines (headings, quotes). Never for body text.
+- **No max-width on text.** Lines spanning 1400px are unreadable. Cap at 600-750px for body text.
+- **All caps without letter-spacing.** All-caps text needs 0.08-0.15em spacing to be legible.
+- **More than 3 font families.** Two is ideal. Three is the maximum.
+- **Font size under 14px for body text.** Especially on mobile.
+
+---
+
+## Color Anti-Patterns
+
+- **Purple gradient on white background.** The signature AI slop aesthetic.
+- **Pure black text (#000000).** Always use tinted near-black (e.g., oklch(0.15 0.02 260)).
+- **Pure gray (#808080, #cccccc).** Always tint neutrals toward the palette hue.
+- **Gray text on colored backgrounds.** Creates low contrast and looks washed out.
+- **Full-saturation brand colors for large surfaces.** Reserve maximum chroma for small accents. Large areas need reduced saturation.
+- **Too many accent colors.** One primary, one secondary maximum. More creates visual chaos.
+- **Using opacity instead of actual color values.** opacity:0.5 on colored elements creates inconsistent results depending on background.
+- **No dark mode consideration.** Even if not implementing dark mode, design with the possibility in mind.
+
+---
+
+## Layout Anti-Patterns
+
+- **Everything centered vertically and horizontally.** Creates a lifeless vertical highway. Use left-aligned content with intentional centering for specific elements.
+- **Cards nested inside cards.** One level of card is usually enough. Nesting creates visual confusion about hierarchy.
+- **Wrapping everything in cards.** Not every piece of content needs a container with rounded corners and a shadow. Sometimes flat sections, dividers, or whitespace work better.
+- **Uniform rounded corners on everything.** Vary border-radius by context: pills for tags (999px), subtle rounding for cards (8-12px), sharper for data elements (4px).
+- **Equal spacing everywhere.** Groups need tighter internal spacing and wider external spacing. Without this, there is no visual structure.
+- **Three or four equal columns at every breakpoint.** Asymmetric grids (2:1, 3:2) are more interesting and create clearer hierarchy.
+- **Content that could belong to any product.** If the layout has no personality, the design is not done.
+
+---
+
+## Motion Anti-Patterns
+
+- **Bounce/elastic easing.** Feels dated and gimmicky. Use ease-out curves.
+- **Animating everything on the page.** Creates visual noise. Animate the important moments.
+- **transition: all 0.3s.** Animates properties you did not intend. Be specific: `transition: opacity 0.2s, transform 0.3s`.
+- **No loading feedback.** User clicks a button and nothing happens for 2 seconds. Always show progress.
+- **Spinner for content areas.** Use skeleton screens instead. Spinners should be reserved for small inline actions.
+- **Animation without prefers-reduced-motion handling.** Always provide a reduced-motion path.
+
+---
+
+## Interaction Anti-Patterns
+
+- **Placeholder text as the only label.** Disappears on focus. Inaccessible.
+- **outline: none without replacement.** Keyboard users lose all orientation.
+- **Hover-only interactions.** Must have keyboard and touch equivalents.
+- **Custom scrollbars that break native behavior.** Users expect scrolling to work natively.
+- **Toast notifications for errors.** They disappear. Use inline error messages instead.
+- **Alert/confirm dialogs for minor actions.** Blocking the entire page for "Are you sure?" on non-destructive actions.
+- **No focus trapping in modals.** Tab key escapes the modal and the user gets lost.
+- **Links that look like buttons and buttons that look like links.** Use the correct element for the correct purpose.
+
+---
+
+## Code Anti-Patterns
+
+- **div soup.** Use semantic HTML: nav, main, section, article, aside, header, footer.
+- **Inline styles for everything.** Use CSS variables, modules, or Tailwind. Inline styles cannot be overridden or themed.
+- **!important everywhere.** If specificity requires !important, the CSS architecture is broken.
+- **z-index: 9999.** Use a z-index scale (1, 10, 20, 30...) with named CSS variables.
+- **Fixed pixel values for everything.** Use rem for typography and spacing, em for component-internal sizing, px only for borders and shadows.
+- **console.log left in production.** Clean it up.
+
+---
+
+## Content Anti-Patterns
+
+- **"Lorem ipsum" in final deliverables.** Use real or realistic content. Design without content is decoration.
+- **Stock photo people smiling at laptops.** If using imagery, make it contextual.
+- **"Click here" link text.** Links should describe their destination: "View documentation" not "Click here".
+- **"Submit" button text.** Use the specific action: "Create account", "Send message", "Save changes".
+- **Walls of text without hierarchy.** Break content with headings, spacing, and visual rhythm.
+
+---
+
+## The Overall Pattern to Avoid
+
+The "AI slop" aesthetic is recognizable by its combination of: Inter/Roboto font, purple/blue gradient accents, evenly spaced centered layouts, uniform card grids with identical rounded corners, and generic stock imagery. Any single element might be fine in isolation. Together, they signal "an AI made this with zero human judgment."
+
+The antidote is intentionality. Every choice (font, color, spacing, layout, animation) should be a conscious decision tied to the specific context of what you are building.