picasso-skill 1.3.4 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picasso-skill",
-  "version": "1.3.4",
+  "version": "1.4.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:
@@ -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.