picasso-skill 2.6.1 → 2.7.0

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.7.0",
   "description": "The ultimate AI design skill for producing distinctive, production-grade frontend interfaces",
   "bin": {
     "picasso-skill": "./bin/install.mjs"