picasso-skill 1.3.3 → 1.3.4

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.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"
   ]
 }