picasso-skill 1.3.2 → 1.3.4

package/README.md

@@ -445,10 +445,30 @@ Picasso ships as both a **skill** (knowledge base) and an **agent** (autonomous
 | `/harden` | Error handling and edge cases: text overflow, i18n (RTL, expansion), network errors, empty/loading/error states, browser compat |
 | `/onboard` | Design onboarding: signup friction reduction, first-run experience, progressive feature discovery, setup checklists |
 
+### `/godmode` -- The Nuclear Option
+
+One command. Full transformation. Interview, audit, score, roast, fix everything, verify, before/after report.
+
+```
+/godmode
+
+Phase 1: Understanding your project...
+Phase 2: Scoring... 42/100. Roasting... 🔥🔥🔥🔥
+Phase 3: Found 23 issues. Fixing all = score ~85. Proceed? [y]
+Phase 4: Fixing... typography ✓ color ✓ spacing ✓ a11y ✓ motion ✓ responsive ✓ perf ✓
+Phase 5: Re-scoring... 87/100 (+45 points)
+Phase 6: Before/after report generated.
+
+GODMODE Complete: 42 → 87 (+45 points), 47 files modified, 23 issues fixed
+```
+
+---
+
 ### Creative
 
 | Command | What It Does |
 |---|---|
+| `/godmode` | The ultimate command: interview + audit + score + roast + fix everything + before/after report |
 | `/picasso` | Run the design interview -- deep discovery conversation, generates `.picasso.md` config |
 | `/roast` | Brutally honest critique with designer-Twitter energy. Every roast includes the fix. Rated 🔥-🔥🔥🔥🔥🔥. |
 | `/score` | Quantified 0-100 design score with category breakdown (typography, color, spacing, a11y, motion, responsive, perf, anti-slop) |

package/agents/picasso.md

@@ -427,6 +427,88 @@ When the user invokes these commands, execute the corresponding workflow:
 | `/mood-board` | Generate visual inspiration HTML from adjectives |
 | `/design-system-sync` | Detect and fix drift between DESIGN.md and code |
 | `/preset <name>` | Apply a curated community design preset |
+| `/godmode` | The ultimate command: interview + audit + score + roast + fix everything + before/after report |
+
+## /godmode -- The Ultimate Design Transformation
+
+`/godmode` is the nuclear option. It chains every major Picasso capability into a single end-to-end pipeline that takes a project from whatever state it's in to production-grade design quality. No shortcuts, no skipping steps.
+
+### The Pipeline (executed in order)
+
+**Phase 1: Understand**
+1. Run the **design interview** (Section 1-4) if no `.picasso.md` exists. If it exists, load it.
+2. **Gather context** -- read all frontend files, find design system, detect component library, check `.picasso.md`.
+
+**Phase 2: Assess**
+3. Run `/score` -- establish the **before score** (0-100). Save it.
+4. Run `/roast` -- get the brutally honest assessment. Show it to the user.
+5. Run `/audit` -- full 5-phase technical audit with severity-ranked findings.
+6. Run `/a11y` -- axe-core + pa11y + Lighthouse accessibility.
+7. Run `/perf` -- Lighthouse performance with Core Web Vitals.
+8. Run `/lint-design` -- find all design token violations.
+9. Run `/consistency` -- check all pages match each other.
+10. Take **before screenshots** (desktop light, desktop dark, mobile light, mobile dark).
+
+**Phase 3: Plan**
+11. Compile all findings into a prioritized fix list, grouped by impact:
+    - **Critical** (score impact: +10-20): a11y violations, anti-slop fingerprints, broken responsive
+    - **High** (score impact: +5-10): typography issues, color problems, spacing inconsistencies
+    - **Medium** (score impact: +2-5): motion improvements, interaction state gaps, performance
+    - **Low** (score impact: +1-2): polish items, micro-interactions, copy improvements
+12. Present the plan to the user: "Here are 23 issues. Fixing all of them will take your score from 42 to ~85. Shall I proceed?"
+13. **Wait for confirmation.** Never proceed without a "go."
+
+**Phase 4: Fix**
+14. Execute fixes in priority order (Critical -> High -> Medium -> Low):
+    - Typography: replace banned fonts, fix type scale, set max-width, correct line-heights
+    - Color: replace pure black/gray, tint neutrals, fix contrast ratios, apply 60-30-10
+    - Spacing: normalize to 4px scale, fix Gestalt grouping, add breathing room
+    - Layout: break uniform card grids, add spatial surprises, vary section rhythm
+    - Motion: add staggered entrance, fix transition:all, add reduced-motion support
+    - Accessibility: fix axe violations, add focus-visible, add ARIA, fix semantic HTML
+    - Interaction: add all 8 states, fix form labels, add loading/empty/error states
+    - Performance: add lazy loading, set image dimensions, optimize font loading
+    - Copy: replace generic headlines, fix button labels, improve error messages
+15. After each category, re-run the relevant checks to verify the fix worked.
+
+**Phase 5: Verify**
+16. Run `/score` again -- establish the **after score**.
+17. Take **after screenshots** (same 4 viewports).
+18. Run `/before-after` -- generate the visual comparison report.
+19. Run `/a11y` and `/perf` again to confirm improvements.
+
+**Phase 6: Report**
+20. Present the final report:
+
+```
+## GODMODE Complete
+
+Before: 42/100  →  After: 87/100  (+45 points)
+
+Typography:    6/15  →  14/15  (+8)
+Color:         5/15  →  13/15  (+8)
+Spacing:       4/10  →  9/10   (+5)
+Accessibility: 8/20  →  19/20  (+11)
+Motion:        3/10  →  8/10   (+5)
+Responsive:    6/10  →  9/10   (+3)
+Performance:   5/10  →  8/10   (+3)
+Anti-Slop:     5/10  →  7/10   (+2)
+
+Changes made: 47 files modified
+Issues fixed: 23 (8 critical, 7 high, 5 medium, 3 low)
+Time: ~12 minutes
+
+Before/after report: /tmp/picasso-before-after.html
+```
+
+### Godmode Rules
+
+- **Always ask before proceeding.** Show the plan, get confirmation.
+- **Fix in priority order.** Critical first, low last. If the user says "stop" at any point, stop and report what was done so far.
+- **Never break working functionality.** If a fix might break something, flag it and ask.
+- **Re-verify after every category.** Don't stack fixes without checking they work.
+- **The before/after report is mandatory.** The user must be able to see and share the transformation.
+- **If the before score is already 85+**, say so: "This is already in great shape. Here are the 3-4 things that would take it to 95+." Don't force a full pipeline on a polished project.
 
 ## Creative Commands
 

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.2",
+  "version": "1.3.4",
   "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"
   ]
 }