picasso-skill 1.3.4 → 1.5.0

package/README.md

@@ -1,4 +1,5 @@
 <p align="center">
+  <img src="logo.png" alt="Picasso" width="200" /><br/><br/>
   <strong>PICASSO</strong><br/>
   The most comprehensive AI design skill ever built.
 </p>

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
 
@@ -428,6 +496,8 @@ When the user invokes these commands, execute the corresponding workflow:
 | `/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 |
+| `/quick-audit` | 5-minute fast audit: font, color, spacing, a11y, anti-slop — skip the deep dive |
+| `/autorefine` | Binary evaluation loop: define 6 criteria, mutate one thing at a time, iterate to 95%+ pass rate |
 
 ## /godmode -- The Ultimate Design Transformation
 
@@ -975,6 +1045,78 @@ failed.forEach(a => console.log('  FAIL: ' + a.id + ' - ' + a.title));
 
 Combine results from all three tools, deduplicate overlapping findings, and report with severity levels.
 
+## /quick-audit -- 5-Minute Fast Audit
+
+When time is short or you need a triage before committing to a full audit. Takes 5 minutes, not 30.
+
+Check exactly these 6 things and report pass/fail for each:
+
+1. **Font** -- Is it a banned default (Inter, Roboto, Arial, system-ui)? → FAIL/PASS
+2. **Color** -- Are neutrals pure gray (#808080, #ccc) or tinted? → FAIL/PASS
+3. **Layout** -- Is everything centered on one axis with no spatial variation? → FAIL/PASS
+4. **Spacing** -- Is spacing uniform everywhere or does it follow gestalt grouping? → FAIL/PASS
+5. **Accessibility** -- Does `outline: none` exist without `:focus-visible` replacement? → FAIL/PASS
+6. **Anti-Slop** -- Do 3+ AI-slop fingerprints appear simultaneously? → FAIL/PASS
+
+Output format:
+```
+## Quick Audit: [project name]
+
+Font:          PASS ✓  (Cabinet Grotesk + DM Sans)
+Color:         FAIL ✗  (pure #808080 in 4 places)
+Layout:        PASS ✓  (asymmetric grid with primary card dominant)
+Spacing:       FAIL ✗  (uniform 32px between all sections)
+Accessibility: PASS ✓  (focus-visible defined globally)
+Anti-Slop:     FAIL ✗  (4 fingerprints: centered layout + uniform cards + indigo accent + same spacing)
+
+Result: 3/6 — Needs work. Start with color and spacing.
+```
+
+## /autorefine -- Binary Evaluation Loop
+
+Iterative improvement using binary (pass/fail) criteria. Inspired by SkillForge's autoresearch pattern that improved one skill from 56% to 92%.
+
+### How It Works
+
+1. **Define 6 binary criteria** (exactly 6 -- fewer is insufficient signal, more is over-optimization):
+   ```
+   1. Typography: Non-default font used? (yes/no)
+   2. Color: OKLCH or tinted neutrals? (yes/no)
+   3. Spacing: Follows 4px scale with gestalt grouping? (yes/no)
+   4. Anti-slop: Fewer than 3 slop fingerprints? (yes/no)
+   5. Motion: prefers-reduced-motion respected? (yes/no)
+   6. Accessibility: No axe-core critical violations? (yes/no)
+   ```
+
+2. **Run baseline evaluation** -- check all 6 criteria against current state. Report pass rate (e.g., 3/6 = 50%).
+
+3. **Mutate one thing at a time.** Pick the highest-impact failing criterion. Make the smallest change that flips it from FAIL to PASS. Do NOT change multiple things simultaneously -- you need to know what worked.
+
+4. **Re-evaluate all 6 criteria** after each mutation. Sometimes fixing one thing breaks another.
+
+5. **Iterate until 95%+ pass rate** (at least 6/6) across 3 consecutive evaluations. If a criterion keeps flipping between PASS and FAIL, the fix is unstable -- investigate root cause.
+
+6. **Stop after 8 mutations maximum.** If you haven't hit 95% by then, the remaining issues are structural and need a `/redesign`, not incremental fixes.
+
+### Output format per iteration:
+```
+## Autorefine: Iteration 3
+
+Mutation: Replaced pure grays with blue-tinted OKLCH neutrals in globals.css
+
+  Typography:    PASS ✓
+  Color:         PASS ✓  ← flipped from FAIL
+  Spacing:       PASS ✓
+  Anti-slop:     PASS ✓
+  Motion:        FAIL ✗
+  Accessibility: PASS ✓
+
+Pass rate: 5/6 (83%) — up from 67%
+Next: Add prefers-reduced-motion guard to animations
+```
+
+---
+
 ## Rules
 
 1. Never suggest Inter, Roboto, Arial, Helvetica, or system-ui as primary fonts

package/commands/autorefine.md

@@ -0,0 +1,6 @@
+---
+name: autorefine
+description: "Binary evaluation loop: define 6 criteria, mutate one thing at a time, iterate to 95%+ pass rate"
+---
+
+Run the Picasso /autorefine command. Define 6 binary criteria, evaluate current state, then mutate one thing at a time until 95%+ pass rate. Max 8 iterations.

package/commands/quick-audit.md

@@ -0,0 +1,6 @@
+---
+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.

package/package.json

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

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:
@@ -214,6 +217,26 @@ These optional directives can be used to steer design refinement:
 
 ---
 
+## Gotchas (Real Failure Points)
+
+These are not best practices. These are things that actually break in production and that AI agents get wrong repeatedly. Each one has burned real time.
+
+1. **Font loading race condition.** Google Fonts `@import` in CSS blocks rendering. The page flashes in the system font, then shifts when the custom font loads. Fix: use `<link rel="preload" as="font">` in the `<head>`, add `font-display: swap`, and always declare a fallback stack with similar metrics. If you skip this, your type scale is wrong for the first 500ms.
+
+2. **Dark mode contrast passes WCAG but is unreadable.** OKLCH `0.55 0.02 230` on `0.11 0.02 230` passes the 4.5:1 ratio check but looks washed out on cheap laptop screens. Always test with a screenshot on an actual dark background, not just the contrast calculator. Text below `0.60` lightness in OKLCH needs extra chroma or a bump to `0.65+`.
+
+3. **`transition: all` causes invisible layout jank.** It transitions `width`, `height`, `padding` -- properties that trigger reflow. The page looks fine at 60fps on your M-series Mac but stutters on a 2019 Chromebook. Always specify exact properties: `transition: opacity 0.2s, transform 0.3s`.
+
+4. **Staggered animations fire on every re-render.** CSS `animation-delay` on child elements replays every time React re-renders the parent. Either use `animation-fill-mode: both` with a one-shot class that gets removed, or gate the animation behind a `data-entered` attribute set once on mount.
+
+5. **Responsive "works at breakpoints" but breaks between them.** Testing at 375px and 768px looks fine, but at 520px the layout collapses because you used fixed `grid-template-columns: repeat(2, 1fr)` instead of `repeat(auto-fill, minmax(280px, 1fr))`. Always test at 480px and 600px too -- these are the kill zones.
+
+6. **Tailwind class strings over 200 characters.** Once a class string hits 200+ characters the component is unmaintainable. Extract to a CSS class with `@apply`, or better yet, use a `cn()` utility with conditional objects. This isn't a style preference -- it's a readability threshold.
+
+7. **Icon SVGs without `aria-hidden="true"`.** Every inline SVG icon announces itself to screen readers as "image" with no label. Decorative icons need `aria-hidden="true"`. Icons that ARE the only content (icon-only buttons) need `aria-label` on the button instead.
+
+---
+
 ## The Non-Negotiables
 
 1. No design should ever look like "AI made this." No purple gradients on white. No Inter font. No centered everything. No cards nested in cards. No gray text on colored backgrounds.
@@ -221,3 +244,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.