picasso-skill 2.6.1 → 2.8.0

package/README.md

@@ -5,7 +5,7 @@
 </p>
 
 <p align="center">
-  32 reference domains &bull; 13 slash commands + 22 agent behaviors &bull; 11,000+ lines of actionable design intelligence<br/>
+  33 reference domains &bull; 15 slash commands &bull; 19,000 lines of design intelligence<br/>
   Every interface looks like a senior design engineer spent days on it.
 </p>
 
@@ -36,7 +36,7 @@ Existing design skills are shallow. They tell you to "use good typography" witho
 
 ### Depth That No Other Skill Matches
 
-Picasso covers **32 specialized reference domains**, each with concrete rules, specific values, and ready-to-use code. This isn't a collection of vague principles -- it's an engineering specification for beautiful interfaces.
+Picasso covers **33 specialized reference domains**, each with concrete rules, specific values, and ready-to-use code. This isn't a collection of vague principles -- it's an engineering specification for beautiful interfaces.
 
 | Domain | What You Get |
 |---|---|
@@ -44,7 +44,7 @@ Picasso covers **32 specialized reference domains**, each with concrete rules, s
 | **Color & Contrast** | OKLCH-based palette construction, tinted neutrals (never pure gray), 60-30-10 rule, dark mode inversion rules, "alpha is a design smell" |
 | **Spatial Design** | 4px base spacing scale, Gestalt proximity ratios (2:1 minimum), Squint Test, asymmetric grid patterns, "cards are not required" |
 | **Motion & Animation** | Duration rule (100/200/300/500ms), only animate transform+opacity, exit = 75% of entrance, grid-template-rows for height, stagger caps |
-| **Interaction Design** | All 8 interactive states (default/hover/focus/active/disabled/loading/error/success), dropdown positioning (#1 bug fix), Popover API, undo > confirmation |
+| **UX Evaluation** | Nielsen's 10 heuristics as actionable checklist, Jobs to Be Done extraction from code, component state machines (8 states), prompt enhancement for vague requests |
 | **Responsive Design** | Input method detection (`@media pointer/hover`), safe areas, container queries, content-driven breakpoints, real device testing |
 | **Sensory Design** | soundcn (700+ CC0 sounds), web-haptics (4 presets + custom), multi-sensory integration patterns |
 | **React/Next.js** | Server Components by default, barrel import avoidance, RSC serialization minimization, React.cache() deduplication |
@@ -69,7 +69,7 @@ Picasso covers **32 specialized reference domains**, each with concrete rules, s
 | **Micro-Interactions** | IntersectionObserver scroll animations, View Transitions API, magnetic cursors, gesture detection (swipe/pinch), animation budget (max 3 concurrent) |
 | **i18n Visual Patterns** | Logical properties for RTL, text expansion by language (+35% German), CJK rendering, Noto font stacks, icon mirroring rules |
 | **Brand & Identity** | Logo sizing (min 24px), clear space rules, lockup variants, 60-30-10 brand color usage, when to bend brand rules |
-| **Animation Performance** | Compositor-only properties (transform + opacity only), will-change lifecycle, layout thrashing batching, `contain` property, GPU hints |
+| **Visual Preview** | Self-contained HTML preview generation, side-by-side direction comparison, preset browser grid, font URL mapping, screenshot protocol |
 | **Code Typography** | JetBrains Mono/Fira Code selection, syntax highlighting contrast (3:1 min), code block design, copy button UX, diff views, terminal styling |
 
 ### The AI-Slop Firewall
@@ -102,33 +102,32 @@ Picasso doesn't just describe tools -- it specifies exactly how to use them with
 
 ---
 
-## The Design Interview
+## Visual Discovery (Not a Questionnaire)
 
-When you first use Picasso on a project, it doesn't just start generating. It asks.
+Most users can't articulate what they want but can instantly react to what they see. So Picasso shows, not asks.
 
 ```
-Picasso: What are we building? New project, redesign, polish, or fixing specific issues?
-You:     New SaaS dashboard for a fintech startup
+1. CRAWL    Picasso silently reads your codebase, identifies the product
+            type, studies 2-3 real competitors in your space.
 
-Picasso: Who is this for?
-You:     Financial analysts, 30-50 age range, use Bloomberg terminals all day
+2. ASK      2-3 quick questions max: "What's the primary user action?"
+            "Any brand colors to keep?" "Site you love the look of?"
 
-Picasso: What's the vibe? Any sites you love the look of?
-You:     Dark, dense, like Linear meets Bloomberg. Here's a reference: linear.app
+3. SHOW     Generates 6-10 fast visual sample pages, each a different
+            design direction applied to YOUR app's actual structure.
+            Opens a gallery for you to browse.
 
-Picasso: Rate these 1-5:
-         Animations? Mobile? Accessibility? Dark mode? Performance?
-You:     Animations 3, Mobile 2, A11y 5, Dark mode YES, Perf 5
+4. REACT    You: "Like 3 and 7. Hate the dark ones. 7 is close but
+            the font is too playful."
 
-Picasso: Got it. Here's what I'm building:
-         → Dark-tech aesthetic inspired by Linear
-         → Dense layout (VISUAL_DENSITY: 8), subtle motion (MOTION_INTENSITY: 3)
-         → WCAG AAA accessibility, dark-first, performance-critical
-         → Generating .picasso.md and DESIGN.md now...
-         Sound good?
+5. NARROW   Generates 3-5 refined samples based on your reactions.
+            Each one more polished than round 1.
+
+6. CONFIRM  You pick a direction. Picasso generates .picasso.md and
+            begins implementation with your real content.
 ```
 
-The interview generates a `.picasso.md` config that persists your preferences across every future session. Run `/picasso` anytime to redo it.
+You never have to go look at design sites for inspiration. Picasso brings it to you. Your reactions reveal more preferences than any questionnaire.
 
 ---
 
@@ -170,19 +169,19 @@ A single 0-100 score, broken down by category. Track it over time.
 
 Typography:    ████████████░░░  12/15
 Color:         ████████████░░░  11/15
-Spacing:       ████████░░       8/10
-Accessibility: ████████████████ 16/20
-Motion:        ██████░░░░       6/10
-Responsive:    ████████░░       8/10
-Performance:   ██████░░░░       6/10
-Anti-Slop:     ██████░░░░       6/10
+Spacing:       ████████░░        8/10
+UX Heuristics: ████████████████ 16/20
+Motion:        ██████░░░░        6/10
+Responsive:    ████████░░        8/10
+Performance:   ██████░░░░        6/10
+Anti-Slop:     ██████░░░░        6/10
 
 Top fixes for +15 points:
-1. Add prefers-reduced-motion support (+4)
-2. Replace #000 with tinted near-black (+3)
-3. Add staggered entrance animation (+3)
-4. Set max-width on body text (+3)
-5. Replace outline:none with focus-visible (+2)
+1. Replace default primary color with industry-appropriate choice (+4)
+2. Set max-width on body text and increase to 16px (+3)
+3. Add prefers-reduced-motion support (+3)
+4. Replace outline:none with focus-visible (+3)
+5. Replace #000 with tinted near-black (+2)
 ```
 
 ### `/steal <url>` -- Extract Any Site's Design DNA
@@ -205,22 +204,22 @@ Generates a complete design system -- palette, fonts, spacing, motion, component
 
 ### `/evolve` -- Iterative Multi-Round Refinement
 
-Instead of generating once and hoping, Picasso proposes 3 distinct directions, lets you pick, then refines through multiple rounds:
+Proposes 3 directions as visual HTML previews, lets you pick, then implements and refines through multiple rounds with screenshots between each:
 
 ```
-Round 1: Here are 3 directions:
-  A) Minimal monochrome -- Geist font, black/white, sharp corners
-  B) Warm editorial -- Instrument Serif headers, terracotta accent, soft radius
-  C) Dark technical -- JetBrains Mono accent, neon green, dense layout
+Round 1: [generates 3 visual preview cards, screenshots them]
+         A) Counsel -- sage/teal, serif headers, 8px radius
+         B) Chambers -- dark, amber accent, monospace, 3px sharp
+         C) Parchment -- warm cream, terracotta, italic serif
 
-You: B, but darker
+You: B, but less extreme
 
-Round 2: [implements B with darker surfaces, screenshots]
+Round 2: [implements B with adjustments, screenshots running app]
          What do you love? What's not right?
 
 You: Love the typography. Cards need more breathing room.
 
-Round 3: [adjusts spacing, screenshots]
+Round 3: [adjusts spacing, screenshots again]
          Are we there?
 
 You: Ship it.
@@ -255,14 +254,11 @@ After any `/polish` or `/redesign`, auto-generates side-by-side screenshots show
 ### `/preset <name>` -- One-Command Aesthetic
 
 ```bash
-/preset linear     # Linear-inspired dark minimal
-/preset stripe     # Stripe-inspired gradient editorial
-/preset vercel     # Vercel-inspired black/white sharp
-/preset notion     # Notion-inspired warm readable
-/preset brutalist  # Raw, intentional, monospace
+/preset            # Visual browser grid of all 22 presets -- pick one
+/preset bold-signal  # Preview Bold Signal, then apply it
 ```
 
-Generates `.picasso.md` + `DESIGN.md` + updates your CSS variables in one command.
+Without args: generates a visual grid showing all 22 presets with swatches, fonts, and sample buttons. Pick visually. With a name: shows a full-page preview before applying. Generates `.picasso.md` + `DESIGN.md` + updates CSS variables.
 
 ---
 
@@ -274,10 +270,10 @@ We compared Picasso against every publicly available AI design skill as of April
 
 | Metric | Picasso | Anthropic frontend-design | Impeccable | Taste Skill | Generic skills |
 |---|---|---|---|---|---|
-| **Reference domains** | **32** | 1 | 7 | 1 | 1-3 |
-| **Total lines of guidance** | **11,000+** | ~120 | ~2,500 | ~200 | 50-300 |
+| **Reference domains** | **33** | 1 | 7 | 1 | 1-3 |
+| **Total lines of guidance** | **19,000** | ~120 | ~2,500 | ~200 | 50-300 |
 | **Anti-pattern rules** | **50+** | ~10 | ~30 | ~5 | 0-5 |
-| **Steering commands** | **35** | 0 | 20 | 0 | 0-3 |
+| **Slash commands** | **15** | 0 | 20 | 0 | 0-3 |
 | **ARIA patterns documented** | **12 widgets** | 0 | 0 | 0 | 0 |
 | **React performance rules** | **45 (Vercel)** | 0 | 0 | 0 | 0 |
 | **Chart/data viz guidance** | **Full matrix** | None | None | None | None |
@@ -391,7 +387,7 @@ Picasso ships as both a **skill** (knowledge base) and an **agent** (autonomous
 | **When it runs** | When you ask for design help | On explicit commands (/audit, /roast, /godmode, etc.) |
 | **Can audit code** | Only when asked | Yes, with structured scoring |
 | **Can run axe-core** | No | Yes (via CLI) |
-| **Can screenshot pages** | No | Yes (via Playwright MCP) |
+| **Can screenshot pages** | No | Yes (via `npx playwright screenshot`) |
 | **Can auto-fix issues** | No | Yes (with pre-flight git/test checks) |
 | **Can enforce design system** | No | Yes (greps for token violations) |
 | **Enforces anti-slop gate** | Via SKILL.md instructions | Yes, mandatory before any code generation |
@@ -419,7 +415,9 @@ These have dedicated command files and can be invoked directly.
 | `/compete <url>` | Head-to-head design comparison against a competitor site |
 | `/before-after` | Visual side-by-side comparison after changes with HTML report |
 | `/preset <name>` | Apply a curated community design preset (linear, stripe, vercel, notion, etc.) |
-| `/variants` | Generate 2-3 distinct visual directions for A/B comparison with code previews |
+| `/variants` | Generate 2-3 distinct visual directions with side-by-side visual HTML previews |
+| `/preview` | Visual preview of design tokens, presets, or side-by-side direction comparison |
+| `/figma` | Figma MCP integration: extract design tokens, audit, compare Figma vs live |
 | `/backlog` | Create persistent design debt backlog with impact-priority scoring in `.picasso-backlog.md` |
 
 ### `/godmode` -- The Nuclear Option
@@ -447,25 +445,17 @@ These are defined in the Picasso agent and run as part of pipelines (e.g., `/god
 
 | Behavior | What It Does |
 |---|---|
-| `/picasso` | Run the design interview, generates `.picasso.md` |
-| `/audit` | Full technical audit across typography, color, spacing, a11y, motion, responsive, interaction |
-| `/critique` | UX-focused review: hierarchy, clarity, emotional resonance, user flow |
+| `/picasso` | Run the visual discovery process, generates `.picasso.md` |
+| `/audit` | Full technical audit across typography, color, spacing, UX heuristics, motion, responsive |
 | `/polish` | Auto-fix all audit findings with smallest safe changes |
 | `/redesign` | Full audit + aggressive fixes + re-audit to verify improvement |
-| `/simplify` | Strip unnecessary complexity: flatten nesting, reduce color count |
-| `/animate` | Add purposeful motion: staggered reveals, hover states, scroll-triggered animations |
-| `/bolder` | Amplify timid designs: increase contrast, enlarge type, strengthen hierarchy |
-| `/quieter` | Tone down aggressive designs: reduce saturation, soften shadows, increase whitespace |
-| `/normalize` | Align with design system: replace hardcoded values with tokens |
 | `/harden` | Add error handling, loading states, empty states, edge case handling |
-| `/theme` | Generate or apply a theme via DESIGN.md |
 | `/stitch` | Generate a complete DESIGN.md from the current codebase |
 | `/a11y` | Full accessibility audit: axe-core + pa11y + Lighthouse with JSON parsing |
 | `/perf` | Lighthouse performance audit with Core Web Vitals pass/fail thresholds |
 | `/visual-diff` | Screenshot desktop + mobile in light/dark mode, analyze visually |
 | `/consistency` | Multi-page consistency check across all routes |
-| `/lint-design` | Find hardcoded colors, spacing violations, font inconsistencies, z-index chaos |
-| `/mood-board` | Generate visual inspiration HTML from adjectives |
+| `/lint-design` | Find hardcoded colors, spacing violations, font inconsistencies |
 | `/design-system-sync` | Detect and fix drift between DESIGN.md and code |
 | `/install-hooks` | Generate git pre-commit hook for automated design checks |
 | `/ci-setup` | Generate GitHub Actions workflow for PR design review with scores |
@@ -475,38 +465,39 @@ These are defined in the Picasso agent and run as part of pipelines (e.g., `/god
 ## References
 
 ```
-references/                          # 32 files, 9,300+ lines
+references/                          # 33 files, 7,000 lines
   anti-patterns.md                   # 50+ banned patterns (THE MOST IMPORTANT FILE)
-  typography.md                      # Type systems, font pairing, scales, OpenType, vertical rhythm
-  color-and-contrast.md              # OKLCH, tinted neutrals, dark mode, 60-30-10, dangerous combos
+  typography.md                      # Type systems, font pairing, scales, vertical rhythm
+  color-and-contrast.md              # OKLCH, tinted neutrals, dark mode, 60-30-10
   spatial-design.md                  # 4px spacing scale, grids, hierarchy, Squint Test
-  depth-and-elevation.md             # Dual shadows, layering, shadow scale, z-index, hover patterns
-  motion-and-animation.md            # Duration rule, easing curves, staggering, text morphing
-  micro-interactions.md              # Scroll animations, View Transitions, gestures, magnetic cursors
-  animation-performance.md           # Compositor-only props, will-change, layout thrashing, contain
-  interaction-design.md              # 8 states, forms, focus, Popover API, dropdown positioning
-  navigation-patterns.md             # Breadcrumbs, sidebar, tabs, bottom bar, mega menus, skip links
-  tables-and-forms.md                # Sortable tables, inline editing, validation, multi-step forms
-  loading-and-states.md              # Skeletons, error boundaries, 5 empty state types, offline
-  responsive-design.md               # Input method detection, safe areas, container queries
-  dark-mode.md                       # Preference hierarchy, elevation, transitions, testing
-  images-and-media.md                # Format selection, srcset, favicons, OG images, video
-  brand-and-identity.md              # Logo sizing, brand color 60-30-10, lockup variants
-  i18n-visual-patterns.md            # RTL, logical properties, text expansion, CJK, Noto stacks
-  code-typography.md                 # Monospace fonts, syntax highlighting, code blocks, diff views
-  sensory-design.md                  # soundcn, web-haptics, multi-sensory integration
-  react-patterns.md                  # Server Components, composition, state management, styling
-  design-system.md                   # 9-section DESIGN.md format, theme generation, tokens
+  depth-and-elevation.md             # Shadows, layering, z-index, hover patterns
+  motion-and-animation.md            # Duration, easing, staggering, performance (merged)
+  micro-interactions.md              # Scroll animations, View Transitions, gestures, cursors
+  navigation-patterns.md             # Breadcrumbs, sidebar, tabs, bottom bar, mega menus
+  tables-and-forms.md                # Sortable tables, inline editing, validation
+  loading-and-states.md              # Skeletons, error boundaries, empty states, offline
+  responsive-design.md               # Input method detection, container queries
+  dark-mode.md                       # Preference hierarchy, elevation, transitions
+  images-and-media.md                # Format selection, srcset, favicons, OG images
+  brand-and-identity.md              # Logo sizing, brand color, lockup variants
+  i18n-visual-patterns.md            # RTL, logical properties, text expansion, CJK
+  code-typography.md                 # Monospace fonts, syntax highlighting, code blocks
+  sensory-design.md                  # useSound hook, haptic patterns, multi-sensory
+  react-patterns.md                  # Server Components, composition, Tailwind v4
+  design-system.md                   # DESIGN.md format, theme generation, tokens
   generative-art.md                  # Philosophy-first process, p5.js, seeded randomness
   component-patterns.md              # 40+ components, state matrix, compound patterns
-  ux-psychology.md                   # Gestalt, Fitts's/Hick's/Miller's/Jakob's Law, F/Z-pattern
-  ux-writing.md                      # Error formula, button labels, empty states, terminology
+  ux-psychology.md                   # Gestalt, Fitts's/Hick's/Miller's/Jakob's Law
+  ux-writing.md                      # Error formula, button labels, terminology
+  ux-evaluation.md                   # Nielsen's 10 heuristics, JTBD, state machines
   data-visualization.md              # Chart selection matrix, dashboard layouts, Tufte
-  conversion-design.md               # Landing pages, CTAs, pricing, onboarding, notifications
-  accessibility-wcag.md              # 12 ARIA patterns, WCAG 2.2, SPA focus, accessible tables
+  conversion-design.md               # Landing pages, CTAs, pricing, onboarding
+  accessibility-wcag.md              # ARIA patterns, WCAG 2.2, focus management
   modern-css-performance.md          # Nesting, :has(), @layer, View Transitions, Tailwind v4
-  performance-optimization.md        # 45 Vercel rules across 7 priority tiers
-  style-presets.md                   # 22 visual presets with OKLCH values and font pairings
+  performance-optimization.md        # Core Web Vitals, priority tiers
+  style-presets.md                   # 22 visual presets with values and font pairings
+  visual-preview.md                  # HTML preview generation, templates, font mapping
+  figma-mcp.md                       # Figma MCP workflows, token extraction
   tools-catalog.md                   # torph, soundcn, Lucide, Facehash, better-icons
 ```
 

package/commands/preset.md

@@ -21,7 +21,7 @@ The preset name: `$ARGUMENTS`
    - Each card: preset name (in its heading font), 5-swatch color palette strip, one-line mood description, a sample button in the preset's primary color and radius
    - Card backgrounds use the preset's surface color, text uses its text color
 3. Write to `/tmp/picasso-preset-browser.html`
-4. Screenshot via Bash: `npx playwright screenshot /tmp/picasso-preset-browser.html /tmp/picasso-preset-browser.png --viewport-size=1200,800`, then view with `Read`
+4. Screenshot via Bash: `npx playwright screenshot /tmp/picasso-preset-browser.html /tmp/picasso-preset-browser.png --viewport-size=1200,1600 --full-page`, then view with `Read`
 5. Present: "Here are all 22 presets. Which one catches your eye?"
 6. Wait for the user to pick
 

package/commands/quick-audit.md

@@ -3,8 +3,70 @@ name: quick-audit
 description: "5-minute fast design audit: 6 binary checks (font, color, layout, spacing, a11y, anti-slop)"
 ---
 
-Run the Picasso /quick-audit command. Check exactly 6 things and report pass/fail for each. Takes 5 minutes, not 30.
+# /quick-audit -- 5-Minute Fast Audit
 
-MANDATORY FIRST STEP: Take a desktop screenshot (`npx playwright screenshot http://localhost:PORT /tmp/picasso-quick-audit.png --viewport-size=1440,900`) and VIEW it with the Read tool before assessing Layout, Spacing, or Anti-Slop visually. Font and Color checks can be done from code. Accessibility can be done from code. But layout/spacing/anti-slop require visual verification.
+Check exactly 6 things and report pass/fail. Takes 5 minutes, not 30.
 
-If screenshots fail, you can still check Font, Color, and Accessibility from code. Mark Layout, Spacing, and Anti-Slop as "SKIPPED (no screenshot available)" instead of guessing.
+## First Step
+
+Take a desktop screenshot: `npx playwright screenshot http://localhost:PORT /tmp/picasso-quick-audit.png --viewport-size=1440,900`
+View it with `Read` before assessing Layout, Spacing, or Anti-Slop.
+
+If screenshots fail, check Font/Color/Accessibility from code. Mark Layout/Spacing/Anti-Slop as "SKIPPED (no screenshot)."
+
+## The 6 Checks
+
+### 1. Font
+FAIL if primary font is any of: Inter, Roboto, Arial, Open Sans, system-ui, Helvetica.
+FAIL if primary font is the framework default (Geist for Next.js, Noto Sans for Material).
+PASS if a deliberately chosen, non-default font is used.
+
+### 2. Color
+FAIL if neutrals are pure gray (#808080, #ccc, #666, #333 without hue tint).
+FAIL if primary color is Tailwind's default indigo/violet/purple family.
+PASS if neutrals are tinted and primary is a deliberate brand choice.
+
+### 3. Layout
+FAIL if everything is centered on one vertical axis with no spatial variation.
+PASS if layout has asymmetry, varied section widths, or intentional spatial hierarchy.
+(Requires screenshot to verify.)
+
+### 4. Spacing
+FAIL if spacing is uniform everywhere with no gestalt grouping.
+PASS if spacing follows a consistent scale AND varies between groups vs. within groups.
+(Requires screenshot to verify.)
+
+### 5. Accessibility
+FAIL if `outline: none` exists without `:focus-visible` replacement.
+FAIL if `prefers-reduced-motion` is not handled.
+PASS if focus indicators and motion preferences are both addressed.
+
+### 6. Anti-Slop
+FAIL if 3+ of these appear simultaneously:
+- Indigo/violet/purple as primary color
+- Per-card staggered entrance animations (animation-delay per stat card)
+- Rainbow-coded elements (different color per icon/badge/card)
+- Gradient blobs on body background
+- Uniform identical card grid (all same size/radius/style)
+- Icons inside colored circle/rounded-square containers
+- hover:-translate-y + shadow-lg on cards
+- Colored left-border or top-border per card
+- Everything centered on one axis
+- Same spacing between every section
+
+PASS if fewer than 3 are present.
+
+## Output
+
+```
+## Quick Audit: [project name]
+
+Font:          PASS/FAIL  (details)
+Color:         PASS/FAIL  (details)
+Layout:        PASS/FAIL  (details)
+Spacing:       PASS/FAIL  (details)
+Accessibility: PASS/FAIL  (details)
+Anti-Slop:     PASS/FAIL  (X fingerprints: list them)
+
+Result: X/6 -- [one-line recommendation]
+```

package/commands/roast.md

@@ -23,7 +23,12 @@ Rules:
 - Be funny and cutting, but never mean about the developer -- only the design
 - Every roast point MUST include the fix
 - End with a genuine compliment about what IS working
-- Output a Roast Score from 🔥 (barely warm) to 🔥🔥🔥🔥🔥 (absolute inferno)
+- Output a Roast Score calibrated to severity:
+  - 🔥 (1/5): Minor polish. Good design with a few rough edges.
+  - 🔥🔥 (2/5): Noticeable issues. Looks decent but has clear amateur tells.
+  - 🔥🔥🔥 (3/5): Significant problems. AI-generated fingerprints visible. Needs real design work.
+  - 🔥🔥🔥🔥 (4/5): Major overhaul needed. Multiple anti-patterns, no cohesive design language.
+  - 🔥🔥🔥🔥🔥 (5/5): Start over. Every design decision is a default or anti-pattern.
 - Load anti-patterns.md first to check against the AI slop fingerprint
 
 Format:

package/commands/score.md

@@ -1,28 +1,94 @@
-Run the Picasso /score command -- quantified design quality score.
+---
+name: score
+description: "Quantified 0-100 design quality score with category breakdown."
+---
 
-Use the Picasso agent to score the current project's frontend design on a 0-100 scale.
+# /score -- Design Quality Score
 
-MANDATORY FIRST STEP -- Gather visual evidence before scoring:
+Score the current project's frontend design on a 0-100 scale.
+
+## First Steps (Mandatory)
 
 1. Take screenshots: `npx playwright screenshot http://localhost:PORT /tmp/picasso-score-desktop.png --viewport-size=1440,900` (and mobile at 375,812)
-2. Use the Read tool to VIEW the screenshot files before scoring visual categories
-3. If screenshots fail, tell the user and score only code-auditable categories (mark visual categories as "N/A - no screenshot")
-
-If a Figma URL is provided, run /figma first to extract design tokens, then proceed with those as ground truth.
-
-ANTI-HALLUCINATION RULES:
-- Visual categories (Typography appearance, Color in practice, Spacing rhythm, Anti-Slop visual check) MUST be scored from screenshots, not code alone
-- Code-auditable categories (a11y violations via axe, transition:all grep, prefers-reduced-motion grep) can be scored from code
-- Never claim "this looks like X" without viewing a screenshot
-
-Categories:
-- Typography (0-15): font choice, type scale, max-width, line-height, letter-spacing
-- Color (0-15): no pure black/gray, OKLCH usage, tinted neutrals, 60-30-10, semantics
-- Spacing (0-10): consistent 4px scale, Gestalt grouping
-- Accessibility (0-20): axe-core violations, focus-visible, semantic HTML, alt text, reduced-motion
-- Motion (0-10): no transition:all, stagger pattern, reduced-motion, no bounce
-- Responsive (0-10): works at 375px, touch targets, no horizontal scroll
-- Performance (0-10): Lighthouse perf score mapped 0-100 -> 0-10
-- Anti-Slop (0-10): deductions for each AI-slop fingerprint detected (-2 each)
-
-Output format with visual bars and top fixes for maximum point improvement.
+2. View the screenshots with `Read` before scoring visual categories
+3. If screenshots fail, tell the user and score only code-auditable categories
+
+If a Figma URL is provided, run /figma first for ground truth.
+
+## Scoring Categories
+
+### Typography (0-15)
+- Font choice: not a banned default AND not a framework default (Geist for Next.js, Roboto for Material). +3
+- Type scale: follows a modular ratio, not ad-hoc sizes. +3
+- Body text max-width set (65ch or equivalent). +3
+- Line-height: 1.5-1.6 body, 1.1-1.2 headings. +3
+- Letter-spacing on uppercase text (0.05em+). +3
+
+### Color (0-15)
+- No pure black (#000) or pure gray. +3
+- OKLCH or HSL usage (not all raw hex). +3
+- Neutrals tinted toward palette hue. +3
+- 60-30-10 ratio (dominant surface, secondary, accent). +3
+- Semantic colors defined (success, warning, error). +3
+
+### Spacing (0-10)
+- Consistent scale (4px multiples). +5
+- Gestalt grouping: tighter within groups, wider between. +5
+
+### UX Heuristics (0-20)
+Score against Nielsen's 10 heuristics (see `references/ux-evaluation.md`), 2 pts each:
+- H1: System status (loading states, feedback). +2
+- H2: Real world match (clear labels, familiar icons). +2
+- H3: User control (undo, escape, back). +2
+- H4: Consistency (same styles everywhere). +2
+- H5: Error prevention (validation, confirmation). +2
+- H6: Recognition (visible labels, persistent nav). +2
+- H7: Efficiency (keyboard shortcuts, bulk ops). +2
+- H8: Minimal design (clear hierarchy, no clutter). +2
+- H9: Error recovery (helpful error messages). +2
+- H10: Help (tooltips, onboarding). +2
+
+### Motion (0-10)
+- No `transition: all` (grep for it). +3
+- Page has choreographed entrance (page-level, NOT per-card stagger). +3
+- `prefers-reduced-motion` support exists. +2
+- No bounce/elastic easing. +2
+
+### Responsive (0-10)
+- Content readable at 375px. +5
+- Touch targets >= 44px. +3
+- No horizontal scroll on mobile. +2
+
+### Performance (0-10)
+- If Lighthouse available: map score 0-100 to 0-10
+- If Lighthouse unavailable: check for lazy loading (+3), image dimensions set (+3), font-display: swap (+2), no layout-shifting elements (+2)
+
+### Anti-Slop (0-10)
+Start at 10, deduct -2 for each fingerprint found (minimum 0):
+- Indigo/violet/purple as primary (unless user's declared brand color)
+- Per-card/per-row staggered entrance animations
+- Rainbow-coded elements (different color per card/badge/icon)
+- Gradient blobs on body background
+- Uniform identical card grid (all same size/style)
+- Icons inside colored circle containers
+- hover:-translate-y + shadow-lg on cards
+- Colored left-border or top-border accents on cards
+
+## Output
+
+```
+## Picasso Design Score: XX/100
+
+Typography:    [bars]  XX/15
+Color:         [bars]  XX/15
+Spacing:       [bars]  XX/10
+UX Heuristics: [bars]  XX/20
+Motion:        [bars]  XX/10
+Responsive:    [bars]  XX/10
+Performance:   [bars]  XX/10
+Anti-Slop:     [bars]  XX/10
+
+Top fixes for +XX points:
+1. [specific fix] (+X)
+2. [specific fix] (+X)
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picasso-skill",
-  "version": "2.6.1",
+  "version": "2.8.0",
   "description": "The ultimate AI design skill for producing distinctive, production-grade frontend interfaces",
   "bin": {
     "picasso-skill": "./bin/install.mjs"