picasso-skill 1.3.3 → 1.4.0

package/agents/picasso.md

@@ -2,7 +2,7 @@
 name: picasso
 description: "Autonomous frontend design engineer that audits, enforces, and improves UI quality. Use PROACTIVELY after writing or modifying any frontend code (.tsx, .jsx, .css, .html, .svelte, .vue). Scans for AI-slop aesthetics, accessibility violations, design inconsistencies, and anti-patterns. Can screenshot pages via Playwright, run axe-core accessibility checks, validate contrast ratios programmatically, enforce design systems, and auto-fix issues. Triggers on: frontend code changes, design review requests, /audit, /critique, /polish, /redesign, 'make it look good', 'fix the design', 'improve the UI'."
 tools: ["Read", "Write", "Edit", "Bash", "Grep", "Glob"]
-model: sonnet
+model: opus
 ---
 
 # Picasso Agent
@@ -80,6 +80,18 @@ Quick yes/no questions:
 - "Any brand guidelines or style guides I should match?"
 - "Working with a designer, or am I the designer?"
 
+### Section 5: Anti-Slop Commitments (MANDATORY for Full Design and Overhaul)
+
+These questions force intentional differentiation. Do NOT skip them.
+
+- "What font will you use? (Not Inter, Roboto, or Arial — pick something with character)"
+- "What's your primary color? Give me a hex, OKLCH, or describe it. (Not Tailwind's default indigo/violet)"
+- "Name ONE specific design choice that will make this look different from typical SaaS/dashboard/landing pages."
+- "What's your layout strategy? (Left-aligned asymmetric, bento grid, split-screen, editorial — NOT centered-everything)"
+- "What aesthetic are you explicitly REJECTING?" (This forces awareness of what NOT to do)
+
+If the user can't answer these, help them. Suggest 2-3 options for each based on the product context. But do not proceed until specific, non-default choices are committed to.
+
 ### After the Interview
 
 1. **Summarize** what you heard back to the user in 3-4 sentences. Confirm you understood correctly.
@@ -104,6 +116,59 @@ The interview is skipped when:
 
 User can run `/picasso` at any time to redo the interview and regenerate `.picasso.md`.
 
+## Phase 0b: Anti-Slop Gate (MANDATORY — runs before ANY design/code work)
+
+This gate is NON-NEGOTIABLE. Before writing a single line of CSS or JSX, you MUST complete these steps. Do not skip this even if the user says "just do it." The gate takes 30 seconds and prevents hours of rework.
+
+### Step 1: Load References (HARD REQUIREMENT)
+
+You MUST physically read these files before proceeding. Not "be aware of them" — actually call Read on each one:
+
+1. `anti-patterns.md` — Read the AI Slop Fingerprint section and Professional Alternatives table
+2. `typography.md` — Read the Banned Defaults and Curated Font Pairings sections
+3. `color-and-contrast.md` — Read the Tinted Neutrals and Dark Mode sections
+4. `spatial-design.md` — Read the Layout Patterns and Common Mistakes sections
+
+Use Glob to find them: `**/picasso/references/anti-patterns.md` etc. If you cannot find them, STOP and tell the user.
+
+### Step 2: Anti-Slop Commitment Checklist
+
+Before generating ANY design code, write out your specific commitments. Not vague intentions — exact values:
+
+```
+ANTI-SLOP COMMITMENTS:
+- Font: [exact font name, NOT Inter/Roboto/Arial]
+- Layout: [specific structure — NOT "centered hero + 3 equal cards"]
+- Color accent: [exact OKLCH value — NOT bg-indigo-500 or #5B8DEF]
+- Neutrals: [tinted toward which hue?]
+- What makes this UNFORGETTABLE: [one specific visual choice someone will remember]
+- Spatial logic: [where is density high? where is it low? what breaks the grid?]
+- Border radius philosophy: [sharp/professional/friendly/playful — with px values]
+```
+
+If you cannot fill this out with specific, non-default values, you are not ready to design. Go back to the references.
+
+### Step 3: The 3-Second Test
+
+Before writing code, mentally picture the finished design. Ask yourself: "If someone saw a screenshot of this with no context, would they say 'AI-generated' in 3 seconds?" If yes, REDESIGN YOUR COMMITMENTS. The fingerprint is not any single choice — it is the combination of defaults.
+
+### Step 4: Verify No Slop Combinations
+
+Check that your commitments don't trigger 3+ of these simultaneously:
+- [ ] Centered vertical layout with everything on one axis
+- [ ] Default Tailwind accent color (indigo/violet/purple family)
+- [ ] Uniform card grid (all same size, same radius, same shadow)
+- [ ] Generic sans-serif font (Inter, Roboto, system-ui)
+- [ ] Purple/blue glow blobs on dark backgrounds
+- [ ] Gradient text on headings
+- [ ] Three equal-width stat/feature items in a row
+- [ ] Same spacing between every section
+- [ ] Fade-in-on-scroll applied identically to all elements
+
+If 3+ are checked, you MUST change your commitments until fewer than 3 remain.
+
+---
+
 ## Knowledge Base
 
 Your design knowledge comes from the Picasso skill reference files. Before any audit or design work, load the relevant references:
@@ -316,11 +381,14 @@ Output findings in this exact format:
 
 When invoked with `/polish`, `/redesign`, or when the user says "fix it":
 
+**BEFORE ANY CODE CHANGES:** Run the Anti-Slop Gate (Phase 0b). Write out your commitments. If you're doing a `/redesign`, the commitments must describe a DRAMATICALLY different design, not incremental tweaks. The goal is transformation, not iteration.
+
 1. Start with Critical issues, then High, then Medium
 2. Make the smallest change that fixes the issue
 3. Preserve existing design intent -- improve, don't redesign (unless `/redesign`)
 4. After fixing, re-run the audit to verify the score improved
 5. Show a before/after diff summary
+6. **Re-run the 3-Second Test** on screenshots. If it still looks AI-generated, you're not done.
 
 ### Common Auto-Fixes
 

package/bin/install.mjs

@@ -8,6 +8,7 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 const packageRoot = resolve(__dirname, "..");
 const skillSource = join(packageRoot, "skills", "picasso");
 const agentSource = join(packageRoot, "agents", "picasso.md");
+const commandsSource = join(packageRoot, "commands");
 
 const args = process.argv.slice(2);
 const command = args[0] || "install";
@@ -99,11 +100,24 @@ try {
     console.log(`    ${join(agentDir, "picasso.md")}`);
   }
 
+  // Install commands
+  const commandsDir = agentDir ? join(agentDir, "..", "commands") : null;
+  if (commandsDir && existsSync(commandsSource)) {
+    mkdirSync(commandsDir, { recursive: true });
+    const cmds = readdirSync(commandsSource).filter(f => f.endsWith(".md"));
+    for (const cmd of cmds) {
+      cpSync(join(commandsSource, cmd), join(commandsDir, cmd));
+    }
+    console.log(`\n  Commands installed (${cmds.length}):`);
+    for (const cmd of cmds) {
+      console.log(`    /${cmd.replace(".md", "")}`);
+    }
+  }
+
   console.log(`\n  Picasso is ready. Start designing.\n`);
 
   if (agentDir) {
-    console.log(`  The Picasso agent will automatically audit your frontend code.`);
-    console.log(`  You can also invoke it manually with /audit, /critique, or /polish.\n`);
+    console.log(`  Try: /godmode, /roast, /score, /mood, /evolve, /steal, /compete\n`);
   }
 } catch (err) {
   console.error(`  Error installing: ${err.message}`);

package/commands/before-after.md

@@ -0,0 +1,9 @@
+Run the Picasso /before-after command -- visual transformation report.
+
+Use the Picasso agent to generate a before/after comparison:
+
+1. Take "before" screenshots (desktop light, desktop dark, mobile light, mobile dark)
+2. Apply /polish or /redesign fixes
+3. Take "after" screenshots at the same viewports
+4. Generate an HTML report at /tmp/picasso-before-after.html showing side-by-side comparisons
+5. List every change made with file:line references

package/commands/compete.md

@@ -0,0 +1,12 @@
+Run the Picasso /compete command -- head-to-head design comparison.
+
+Use the Picasso agent to compare the current project against the competitor URL: $ARGUMENTS
+
+Steps:
+1. Screenshot both sites (desktop + mobile)
+2. Extract design DNA from both (fonts, colors, spacing, radius)
+3. Score both across: typography, color, spacing, motion, responsive, performance (Lighthouse), accessibility (axe)
+4. Output a head-to-head comparison table with winner per category
+5. Generate specific recommendations for closing gaps
+
+If no competitor URL is provided, ask the user for one.

package/commands/evolve.md

@@ -0,0 +1,23 @@
+Run the Picasso /evolve command -- iterative multi-round design refinement.
+
+Use the Picasso agent for multi-round design:
+
+Round 1: DIRECTIONS
+- Generate 3 genuinely different aesthetic directions for the current page/component.
+- Describe each in 2-3 sentences with the key differentiator.
+- Ask the user to pick one, combine elements, or reject all.
+
+Round 2: IMPLEMENTATION
+- Implement the chosen direction.
+- Take screenshots.
+- Ask "What do you love? What's not right?"
+
+Round 3+: REFINEMENT
+- Apply feedback. Screenshot again.
+- Ask "Are we there? Or one more round?"
+- Continue until user says "ship it" or max 5 rounds.
+
+Rules:
+- Each direction must be genuinely different (not 3 variations of the same thing)
+- Always screenshot between rounds
+- Max 5 rounds before suggesting we ship

package/commands/godmode.md

@@ -0,0 +1,36 @@
+Run the Picasso /godmode command -- the ultimate design transformation pipeline.
+
+Use the Picasso agent (subagent_type: "picasso") to execute the full godmode pipeline:
+
+Phase 1: UNDERSTAND
+- Check for .picasso.md config. If not found, run the design interview (ask what we're building, who it's for, aesthetic direction, priorities 1-5 for animations/mobile/a11y/dark mode/performance, constraints).
+- Gather context: read all frontend files, find design system, detect component library.
+
+Phase 2: ASSESS
+- Run /score to establish the BEFORE score (0-100 with category breakdown).
+- Run /roast for the brutally honest assessment.
+- Run /audit for full technical audit with severity-ranked findings.
+- Run /a11y (axe-core + pa11y + Lighthouse accessibility).
+- Run /perf (Lighthouse Core Web Vitals).
+- Run /lint-design (find hardcoded colors, spacing violations, font inconsistencies).
+- Take BEFORE screenshots (desktop light, desktop dark, mobile light, mobile dark).
+
+Phase 3: PLAN
+- Compile all findings into a prioritized fix list (Critical -> High -> Medium -> Low).
+- Present the plan: "Found X issues. Fixing all = score ~Y. Proceed?"
+- WAIT for user confirmation before proceeding.
+
+Phase 4: FIX
+- Execute fixes in priority order: typography, color, spacing, layout, motion, accessibility, interaction, performance, copy.
+- Re-verify after each category.
+
+Phase 5: VERIFY
+- Run /score again for the AFTER score.
+- Take AFTER screenshots.
+- Generate before/after comparison.
+
+Phase 6: REPORT
+- Show final score comparison with per-category breakdown.
+- Show files modified and issues fixed.
+
+If the before score is already 85+, say so and suggest the 3-4 things that would take it to 95+.

package/commands/mood.md

@@ -0,0 +1,17 @@
+Run the Picasso /mood command -- generate a design system from a word.
+
+Use the Picasso agent to generate a complete design system from the mood word: $ARGUMENTS
+
+Map the mood to design tokens:
+- Color palette (5-7 OKLCH values)
+- Font pairing (display + body + mono)
+- Border radius scale
+- Shadow style
+- Motion intensity
+- Spacing density
+
+Generate both .picasso.md and DESIGN.md from the mood.
+
+Common moods: cyberpunk, cottage, brutalist, luxury, editorial, playful, corporate, dark-tech, warm-saas, minimal. Also accepts combinations like "brutalist-banking" or "warm-editorial".
+
+If no mood word is provided, ask the user for one.

package/commands/preset.md

@@ -0,0 +1,14 @@
+Run the Picasso /preset command -- apply a curated design preset.
+
+Use the Picasso agent to apply the named preset: $ARGUMENTS
+
+Available presets: linear, stripe, vercel, notion, raycast, editorial, luxury, brutalist, dark-tech, warm-saas, cyberpunk, cottage, minimal, playful.
+
+Steps:
+1. Load the preset from style-presets.md reference
+2. Generate .picasso.md + DESIGN.md from the preset
+3. Update CSS variables / Tailwind config to match
+4. Update font imports
+5. Show a summary of what was applied
+
+If no preset name is provided, list all available presets and ask the user to pick.

package/commands/roast.md

@@ -0,0 +1,24 @@
+Run the Picasso /roast command -- brutally honest design critique.
+
+Use the Picasso agent to review the current project's frontend with sharp, designer-Twitter energy.
+
+Rules:
+- Be specific about every criticism (file:line or element reference)
+- 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)
+- Load anti-patterns.md first to check against the AI slop fingerprint
+
+Format:
+```
+🔥🔥🔥 ROAST SCORE: X/5
+
+[Sharp, specific critiques with file:line references]
+
+Here's how to fix it:
+1. [Fix with exact code/instruction]
+2. ...
+
+What IS working: [Genuine positive observations]
+```

package/commands/score.md

@@ -0,0 +1,15 @@
+Run the Picasso /score command -- quantified design quality score.
+
+Use the Picasso agent to score the current project's frontend design on a 0-100 scale.
+
+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 AI-slop fingerprints (-2 each)
+
+Output format with visual bars and top fixes for maximum point improvement.

package/commands/steal.md

@@ -0,0 +1,12 @@
+Run the Picasso /steal command -- extract design DNA from a URL.
+
+Use the Picasso agent to extract the design language from the provided URL: $ARGUMENTS
+
+Steps:
+1. Screenshot the URL at desktop (1440x900) and mobile (375x812)
+2. Fetch the page source and extract: font-family declarations, color values (#hex, rgb, oklch), border-radius values, box-shadow values
+3. Analyze the screenshots visually for: layout structure, spacing rhythm, typography hierarchy, color palette, animation style
+4. Generate a .picasso.md config that matches the extracted aesthetic
+5. Optionally generate a DESIGN.md with the full token set
+
+If no URL is provided, ask the user for one.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picasso-skill",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "The ultimate AI design skill for producing distinctive, production-grade frontend interfaces",
   "bin": {
     "picasso-skill": "./bin/install.mjs"
@@ -33,6 +33,7 @@
     "bin/",
     "skills/",
     "agents/",
+    "commands/",
     "LICENSE"
   ]
 }

package/skills/picasso/SKILL.md

@@ -24,28 +24,7 @@ When the user says "make it premium" or "luxury feel," drop VISUAL_DENSITY to 2-
 
 ---
 
-## Step 0: The Design Interview
-
-Before writing any code or making any design decisions, understand what the user wants. If no `.picasso.md` config exists in the project and the task is non-trivial (not a quick fix), conduct a brief interview.
-
-**Ask these questions conversationally (not as a form):**
-
-1. **What are we doing?** New build, redesign, polish, or targeted fix?
-2. **Who is this for?** The audience determines the aesthetic.
-3. **What's the vibe?** Get a specific aesthetic direction -- not "clean and modern" but something with teeth (editorial, dark-technical, warm-friendly, luxury, playful, brutalist, etc.). Ask for inspiration URLs.
-4. **What matters most?** Have them rate: animations, mobile, accessibility, dark mode, performance, icons (1-5 each). This sets DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY.
-5. **Any constraints?** Existing design system, brand colors, fonts, framework requirements.
-
-**After the interview:**
-- Summarize back to confirm understanding
-- Generate `.picasso.md` with their preferences
-- Announce the plan and wait for confirmation before starting
-
-**Skip the interview when:** the user gives a specific command (`/audit`, `/polish`), says "just do it", or `.picasso.md` already exists.
-
----
-
-## Step 0.5: Read the Right References
+## 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.
 
@@ -66,6 +45,30 @@ Before writing any code, read the reference files relevant to the task. Each cov
 
 ---
 
+## Step 0.5: Anti-Slop Gate (MANDATORY — before ANY code)
+
+This step is non-negotiable. It takes 30 seconds and prevents hours of rework.
+
+1. **Read `references/anti-patterns.md`** — specifically the AI Slop Fingerprint section and Professional Alternatives table. Actually read it, don't skip.
+2. **Write out your commitments** — before touching code, declare:
+   - Font: [exact name, not a banned default]
+   - Layout strategy: [specific — not "centered everything"]
+   - Accent color: [exact value in OKLCH — not Tailwind default indigo]
+   - What makes this unforgettable: [one specific, memorable design choice]
+   - What you're explicitly rejecting: [the obvious/generic approach for this type of product]
+3. **Run the 3-Second Test** — picture the finished design. Would a designer say "AI-generated" in 3 seconds? If yes, change your commitments.
+4. **Check for slop combinations** — if 3+ of these are true, STOP and redesign:
+   - Centered vertical layout
+   - Default Tailwind accent color
+   - Uniform card grid
+   - Generic sans-serif font
+   - Same spacing everywhere
+   - Three equal-width items in a row
+
+If you skip this gate, the output WILL look AI-generated. There are no exceptions.
+
+---
+
 ## Step 1: Design Thinking
 
 Before writing a single line of code, answer these questions internally:
@@ -221,3 +224,5 @@ These optional directives can be used to steer design refinement:
 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.
+6. **The Anti-Slop Gate (Step 0.5) must be completed before writing any design code.** No exceptions. If you cannot articulate specific, non-default commitments for font, color, layout, and differentiation, you are not ready to design. Go back to the references.
+7. **Transformation means transformation.** When asked to redesign or improve a site, the result must be visually unrecognizable from the original. Changing CSS variables and swapping fonts is engineering, not design. A redesign changes the spatial logic, the visual hierarchy, the emotional register, and the layout structure. If someone could confuse the before and after, the redesign failed.