picasso-skill 1.4.0 → 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

@@ -496,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
 
@@ -1043,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.4.0",
+  "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

@@ -217,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.