picasso-skill 2.6.0 → 2.7.0

package/agents/picasso.md

@@ -83,7 +83,7 @@ This is what makes Picasso different from every other design tool. Generate a ga
 
 5. Also generate a single `/tmp/picasso-gallery/index.html` that shows a thumbnail grid of all samples -- each as a small card (200px wide) with the sample number and the key differentiator (font name + primary color + one-word mood).
 
-6. Open the index page with Playwright MCP, screenshot at 1440x900, view with Read.
+6. Screenshot via Bash: `npx playwright screenshot /tmp/picasso-gallery/index.html /tmp/picasso-gallery.png --viewport-size=1200,800`. View: `Read /tmp/picasso-gallery.png`.
 
 7. Present: "Here are {N} directions for your app. React to what you see -- which ones do you like? Which do you hate? Anything close but needs tweaking? You can also open `/tmp/picasso-gallery/index.html` in your browser to browse them all."
 
@@ -158,7 +158,7 @@ Do NOT jump to code. Present a **Design Brief** -- a short, opinionated creative
    - Generate a self-contained HTML page showing a representative layout in the committed design tokens (nav + hero + card + buttons + input)
    - Use the Full Page Mood Preview structure from `references/visual-preview.md`
    - Write to `/tmp/picasso-brief-preview.html`
-   - Open with Playwright MCP, screenshot, view with Read
+   - Screenshot via Bash: `npx playwright screenshot /tmp/picasso-brief-preview.html /tmp/picasso-brief-preview.png --viewport-size=1200,800`. View with `Read`.
    - Present alongside the text brief: "Here's what I'm proposing -- the reasoning and a visual preview."
 
 4. **Generate `.picasso.md`** from the answers and save to project root.

package/commands/mood.md

@@ -35,7 +35,8 @@ If no mood word is provided, ask the user for one.
      - Footer with muted text
    - Load fonts using the Font Mapping table from `references/visual-preview.md`
    - Write to `/tmp/picasso-mood-{word}.html`
-   - Open via Playwright MCP, screenshot at 1440x900, view with Read tool
+   - Screenshot via Bash: `npx playwright screenshot /tmp/picasso-mood-{word}.html /tmp/picasso-mood-{word}.png --viewport-size=1200,800`
+   - View: `Read /tmp/picasso-mood-{word}.png`
    - Present to user: "This is what '{word}' looks like as a design system. Does this feel right, or should I adjust?"
 
 3. **Wait for confirmation.** Do not write `.picasso.md` or `DESIGN.md` until the user approves the visual direction.
@@ -48,4 +49,4 @@ If no mood word is provided, ask the user for one.
 
 - Never write config files before showing the visual preview
 - If the user says "adjust" or "not quite", iterate on the tokens and regenerate the preview
-- If Playwright MCP is unavailable, write the HTML and tell user the path to open manually
+- If npx playwright is unavailable, write the HTML and tell user the path to open manually

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. Open with Playwright MCP, screenshot at 1440x900, 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
 
@@ -41,4 +41,4 @@ The preset name: `$ARGUMENTS`
 ## Rules
 
 - Never apply a preset without showing a visual preview first
-- If Playwright MCP is unavailable, write the HTML and give the user the file path
+- If npx playwright is unavailable, write the HTML and give the user the file path

package/commands/preview.md

@@ -24,8 +24,8 @@ Generate and display visual previews of design options.
    - Nav bar, hero section, card grid, form, footer
    - All styled with the project's committed tokens
 5. Write to `/tmp/picasso-preview.html`
-6. Open via Playwright MCP (`mcp__playwright__browser_navigate` to `file:///tmp/picasso-preview.html`)
-7. Screenshot at 1440x900, view with Read tool
+6. Screenshot via Bash: `npx playwright screenshot /tmp/picasso-preview.html /tmp/picasso-preview.png --viewport-size=1200,800`
+7. View: `Read /tmp/picasso-preview.png`
 8. Present to user: "Here's what your current design tokens look like rendered. Open `/tmp/picasso-preview.html` in your browser for full resolution."
 
 ### `/preview <preset-name>`
@@ -47,6 +47,6 @@ Generate and display visual previews of design options.
 ## Rules
 
 - Always load font URLs from the Font Mapping table in `references/visual-preview.md`
-- If Playwright MCP is unavailable, write the file and tell the user the path to open manually
+- If npx playwright is unavailable, write the file and tell the user the path to open manually
 - Never describe what the preview looks like without viewing the screenshot first
 - The HTML must be fully self-contained (inline styles, external font imports only)

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/commands/variants.md

@@ -21,9 +21,8 @@ Generate 2-3 genuinely different aesthetic directions and show them as a side-by
    - For each direction, render a preview card showing: color palette strip, nav bar, heading, body text, sample card, primary/secondary buttons, input field -- all in that direction's tokens
    - Load fonts using the Font Mapping table from `references/visual-preview.md`
    - Write the comparison HTML to `/tmp/picasso-variants.html`
-   - Open via Playwright MCP: `mcp__playwright__browser_navigate` to `file:///tmp/picasso-variants.html`
-   - Screenshot at 1440x900 viewport
-   - View the screenshot with the Read tool
+   - Screenshot via Bash: `npx playwright screenshot /tmp/picasso-variants.html /tmp/picasso-variants.png --viewport-size=1200,800`
+   - View the screenshot: `Read /tmp/picasso-variants.png`
 6. Present the visual comparison to the user: "Here are the directions. Which speaks to you? Pick one, combine elements, or reject all."
 7. Also tell the user: "Open `/tmp/picasso-variants.html` in your browser for full resolution."
 
@@ -33,5 +32,5 @@ Generate 2-3 genuinely different aesthetic directions and show them as a side-by
 - No two directions can share the same heading font
 - At least one direction must be surprising or unconventional
 - Always include one "safe" option and one "bold" option
-- Visual preview is MANDATORY, not optional. If Playwright MCP is unavailable, write the HTML file and tell the user the path to open manually.
+- Visual preview is MANDATORY, not optional. If npx playwright is unavailable, write the HTML file and tell the user the path to open manually.
 - Never describe what the directions look like without viewing the screenshot first

package/package.json

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

package/references/visual-preview.md

@@ -10,19 +10,28 @@ Every time Picasso presents 2+ aesthetic options for the user to choose from, ge
 
 ### Standard Flow
 
-1. **Generate** a self-contained HTML file with inline styles and font imports
+1. **Generate** a self-contained HTML file with inline styles (NO external font imports -- use `system-ui` with font name labels)
 2. **Write** to `/tmp/picasso-preview-{name}.html`
-3. **Open** via Playwright MCP: `mcp__playwright__browser_navigate` to `file:///tmp/picasso-preview-{name}.html`
-4. **Screenshot** via `mcp__playwright__browser_take_screenshot`
-5. **View** the screenshot with `Read` tool (mandatory -- never skip this)
-6. **Present** to the user with the file path so they can also open it in their browser
+3. **Screenshot** via Bash: `npx playwright screenshot /tmp/picasso-preview-{name}.html /tmp/picasso-preview-{name}.png --viewport-size=1200,800`
+   - `npx playwright screenshot` accepts file paths directly (no `file://` prefix needed)
+   - Do NOT use `mcp__playwright__browser_navigate` + `mcp__playwright__browser_take_screenshot` -- these timeout on external font loading and block `file://` protocol
+4. **View** the screenshot with `Read /tmp/picasso-preview-{name}.png` (mandatory -- never skip this)
+5. **Present** to the user with both paths (HTML for full-res browser viewing, PNG for quick preview)
 
-### If Playwright MCP Is Unavailable
+### If npx playwright Is Unavailable
 
 1. Write the HTML file to `/tmp/`
 2. Tell the user: "I've generated a visual preview at `/tmp/picasso-preview-{name}.html` -- open it in your browser to see the options."
 3. Do NOT make visual claims about what the preview looks like without viewing it
 
+### Font Rule for Previews
+
+Do NOT import Google Fonts or Fontshare fonts via `<link>` or `@import` in preview HTML. External font loading causes screenshot timeouts. Instead:
+- Use `system-ui, -apple-system, sans-serif` for body text
+- Use `Georgia, serif` for serif directions
+- Use `ui-monospace, monospace` for mono directions
+- **Label the intended font** in each preview card: "Font: Satoshi + DM Sans" so the user knows what will be used in the real implementation
+
 ### File Naming
 
 - Interview aesthetics: `/tmp/picasso-interview-vibes.html`
@@ -48,9 +57,8 @@ Generate the full HTML dynamically. For each direction, substitute the actual fo
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Picasso: Choose a Direction</title>
 <!-- Import fonts for all directions shown -->
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family={FONT_1}&family={FONT_2}&family={FONT_3}&display=swap" rel="stylesheet">
+<!-- No external font imports -- use system fonts to avoid screenshot timeouts -->
+<!-- Label intended fonts in the .font-info footer of each card -->
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
   body {