picasso-skill 2.0.1 → 2.0.2

package/README.md

@@ -422,8 +422,7 @@ Picasso ships as both a **skill** (knowledge base) and an **agent** (autonomous
 | `/polish` | Final pass before shipping: visual alignment, typography refinement, color/contrast, all 8 interaction states, micro-interactions, content/copy, edge cases |
 | `/simplify` | Strip to essence: reduce scope, flatten structure, remove decorations, progressive disclosure, shorter copy, fewer variants |
 | `/normalize` | Realign to design system standards: fix hardcoded colors, inconsistent tokens, broken dark mode, spacing violations |
-| `/typeset` | Fix typography: font choices, hierarchy clarity, sizing scale, readability (line length, line-height, contrast), OpenType features |
-| `/arrange` | Fix layout: establish spacing system, create visual rhythm, choose right layout tool (Flexbox vs Grid), break card grid monotony |
+| `/harden` | Error handling and edge cases: text overflow, i18n, network errors, empty/loading/error states, browser compat |
 
 ### Amplification
 
@@ -432,8 +431,6 @@ Picasso ships as both a **skill** (knowledge base) and an **agent** (autonomous
 | `/animate` | Add purposeful motion: page load choreography, micro-interactions, state transitions, scroll effects, loading delight |
 | `/bolder` | Amplify timid designs: extreme type scale (3x-5x), vibrant color, spatial drama, dramatic shadows, custom elements |
 | `/quieter` | Tone down aggressive designs: reduce saturation to 70-85%, soften weights, increase whitespace, shorter animation distances |
-| `/colorize` | Introduce strategic color: semantic states, accent application, tinted backgrounds, data visualization, decorative elements |
-| `/delight` | Add moments of joy: button feedback, loading delight, success celebrations, personality in copy, sound cues, easter eggs |
 
 ### Aesthetic Presets
 
@@ -453,15 +450,14 @@ Picasso ships as both a **skill** (knowledge base) and an **agent** (autonomous
 | `/haptics` | Add mobile haptic feedback using web-haptics (4 presets + custom patterns) |
 | `/redesign` | Full audit + identify problems + fix systematically + re-audit cycle |
 
-### Production
+### Design Debt
 
 | Command | What It Does |
 |---|---|
-| `/adapt` | Adapt for devices: mobile (thumb-zone), tablet (two-column), desktop (multi-column), print, email (600px, table-based) |
-| `/clarify` | Improve UX copy: error messages, form labels, button text, help text, empty states, confirmation dialogs |
-| `/optimize` | Performance: image optimization, JS bundle reduction, CSS critical path, font loading, animation 60fps, network efficiency |
-| `/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 |
+| `/backlog` | Create persistent design debt backlog with impact-priority scoring in `.picasso-backlog.md` |
+| `/variants` | Generate 2-3 distinct visual directions for A/B comparison with code previews |
+| `/quick-audit` | 5-minute fast audit: 6 binary pass/fail checks (font, color, layout, spacing, a11y, anti-slop) |
+| `/autorefine` | Binary evaluation loop: 6 criteria, mutate one thing at a time, iterate to 95%+ pass rate |
 
 ### `/godmode` -- The Nuclear Option
 
@@ -482,33 +478,6 @@ 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) |
-| `/steal <url>` | Extract design DNA from any live website into a `.picasso.md` config |
-| `/mood <word>` | Generate complete design system from a single evocative word (cyberpunk, cottage, luxury, etc.) |
-| `/evolve` | Multi-round iterative refinement: 3 directions → pick → refine → ship |
-| `/compete <url>` | Head-to-head design comparison against a competitor with per-category scoring |
-| `/before-after` | Visual side-by-side comparison report after changes (HTML export) |
-| `/mood-board` | Generate interactive HTML mood board from adjectives |
-| `/design-system-sync` | Detect and auto-fix drift between DESIGN.md and actual code |
-| `/preset <name>` | Apply a curated preset (linear, stripe, vercel, notion, brutalist, etc.) |
-| `/quick-audit` | 5-minute fast audit: 6 binary pass/fail checks (font, color, layout, spacing, a11y, anti-slop) |
-| `/autorefine` | Binary evaluation loop: 6 criteria, mutate one thing at a time, iterate to 95%+ pass rate |
-| `/backlog` | Create persistent design debt backlog with impact-priority scoring in `.picasso-backlog.md` |
-| `/variants` | Generate 2-3 distinct visual directions for A/B comparison with code previews |
-
-### Advanced
-
-| Command | What It Does |
-|---|---|
-| `/overdrive` | Technically extraordinary effects. View Transitions, scroll-driven animations, WebGL, @property gradients, Web Audio, spring physics. 60fps. Progressive enhancement. |
-
 ### Automation (Agent-Only)
 
 | Command | What It Does |

package/agents/picasso.md

@@ -176,23 +176,44 @@ If 3+ are checked, you MUST change your commitments until fewer than 3 remain.
 Your design knowledge comes from the Picasso skill reference files. Before any audit or design work, load the relevant references:
 
 ```
-skills/picasso/SKILL.md                          # Core rules and workflow
-skills/picasso/references/anti-patterns.md       # What NOT to do (always load this)
-skills/picasso/references/typography.md           # Font selection, scales, pairing
-skills/picasso/references/color-and-contrast.md   # OKLCH, tinted neutrals, dark mode
-skills/picasso/references/spatial-design.md       # Spacing, grids, hierarchy
-skills/picasso/references/motion-and-animation.md # Easing, staggering, reduced motion
-skills/picasso/references/interaction-design.md   # Forms, focus, loading, errors
-skills/picasso/references/responsive-design.md    # Mobile-first, container queries
-skills/picasso/references/sensory-design.md       # Sound, haptics
-skills/picasso/references/react-patterns.md       # React 19, Tailwind v4, dark mode
-skills/picasso/references/accessibility.md        # ARIA, WCAG 2.2, keyboard nav
-skills/picasso/references/design-system.md        # DESIGN.md, theming, tokens
-skills/picasso/references/generative-art.md       # p5.js, SVG, canvas
-skills/picasso/references/component-patterns.md   # Naming, taxonomy, state matrix
+skills/picasso/SKILL.md                              # Core rules and workflow (always load)
+skills/picasso/references/anti-patterns.md           # What NOT to do (always load)
+
+# Load based on what the task involves:
+skills/picasso/references/typography.md              # Fonts, scales, pairing
+skills/picasso/references/color-and-contrast.md      # OKLCH, tinted neutrals
+skills/picasso/references/spatial-design.md          # Spacing, grids, hierarchy
+skills/picasso/references/depth-and-elevation.md     # Shadows, z-index, layering
+skills/picasso/references/motion-and-animation.md    # Easing, staggering, duration
+skills/picasso/references/micro-interactions.md      # Scroll animations, gestures, View Transitions
+skills/picasso/references/animation-performance.md   # Compositor props, will-change, contain
+skills/picasso/references/interaction-design.md      # Forms, focus, states, Popover API
+skills/picasso/references/navigation-patterns.md     # Breadcrumbs, sidebar, tabs, bottom bar
+skills/picasso/references/tables-and-forms.md        # Sortable tables, validation, multi-step
+skills/picasso/references/loading-and-states.md      # Skeletons, empty states, error boundaries
+skills/picasso/references/responsive-design.md       # Mobile-first, container queries
+skills/picasso/references/dark-mode.md               # Preference hierarchy, elevation, testing
+skills/picasso/references/images-and-media.md        # Formats, srcset, favicons, OG images
+skills/picasso/references/brand-and-identity.md      # Logo sizing, brand color usage
+skills/picasso/references/i18n-visual-patterns.md    # RTL, logical properties, CJK
+skills/picasso/references/code-typography.md         # Monospace, syntax highlighting, diffs
+skills/picasso/references/sensory-design.md          # Sound, haptics
+skills/picasso/references/react-patterns.md          # Server Components, Tailwind v4
+skills/picasso/references/accessibility-wcag.md      # ARIA, WCAG 2.2, keyboard nav
+skills/picasso/references/design-system.md           # DESIGN.md, theming, tokens
+skills/picasso/references/generative-art.md          # p5.js, SVG, canvas
+skills/picasso/references/component-patterns.md      # Naming, taxonomy, state matrix
+skills/picasso/references/ux-psychology.md           # Gestalt, Fitts's Law, heuristics
+skills/picasso/references/ux-writing.md              # Error messages, microcopy, CTAs
+skills/picasso/references/data-visualization.md      # Chart matrix, dashboards, Tufte
+skills/picasso/references/conversion-design.md       # Landing pages, CTAs, pricing
+skills/picasso/references/modern-css-performance.md  # Nesting, :has(), @layer, subgrid
+skills/picasso/references/performance-optimization.md # 45 Vercel rules, Core Web Vitals
+skills/picasso/references/style-presets.md           # 22 curated presets with values
+skills/picasso/references/tools-catalog.md           # torph, soundcn, Lucide, Facehash
 ```
 
-Find these files by searching the project's `.claude/skills/picasso/`, `~/.claude/skills/picasso/`, or by locating `SKILL.md` with a glob search for `**/picasso/SKILL.md`. Load `anti-patterns.md` on every invocation. Load other references based on what you find in the code.
+Find these files by searching `.claude/skills/picasso/`, `~/.claude/skills/picasso/`, or by globbing `**/picasso/SKILL.md`. Load `anti-patterns.md` on every invocation. Load other references based on what you find in the code.
 
 ## Phase 1: Gather Context
 

package/bin/install.mjs

@@ -29,7 +29,7 @@ if (command === "help" || command === "--help" || command === "-h") {
     npx picasso-skill --path DIR   Install to a custom directory
 
   What gets installed:
-    .claude/skills/picasso/        Skill (knowledge base: 13 reference files)
+    .claude/skills/picasso/        Skill (knowledge base: 32 reference files)
     .claude/agents/picasso.md      Agent (autonomous design auditor)
   `);
   process.exit(0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picasso-skill",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "The ultimate AI design skill for producing distinctive, production-grade frontend interfaces",
   "bin": {
     "picasso-skill": "./bin/install.mjs"
@@ -35,7 +35,7 @@
     "agents/",
     "commands/",
     "references/",
-    "checklists/",
+    "templates/",
     "LICENSE"
   ]
 }

package/skills/picasso/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: picasso
-version: 2.0.0
+version: 2.0.1
 description: >
   The ultimate frontend design and UI engineering skill. Use this whenever the user asks to build, design, style, or improve any web interface, component, page, application, dashboard, landing page, artifact, poster, or visual output. Covers typography, color systems, spatial design, motion/animation, interaction design, responsive layouts, sound design, haptic feedback, icon systems, generative art, theming, React best practices, and DESIGN.md system generation. Also use when the user asks to audit, critique, polish, simplify, animate, or normalize a frontend. Triggers on any mention of "make it look good," "fix the design," "UI," "UX," "frontend," "component," "landing page," "dashboard," "artifact," "poster," "design system," "theme," "animation," "responsive," or any request to improve visual quality. Use this skill even when the user does not explicitly ask for design help but the task involves producing a visual interface.
 metadata:

package/templates/picasso-config.md

@@ -0,0 +1,53 @@
+# .picasso.md -- Project Design Configuration
+
+<!-- Drop this file in your project root. The Picasso agent reads it before every
+     audit to understand your project's design preferences. Any field left as the
+     default placeholder (brackets) will be ignored and Picasso defaults apply. -->
+
+## Brand
+<!-- Core identity. Guides tone-of-voice checks and overall aesthetic expectations. -->
+- **Name:** [Your product name]
+- **Tone:** [e.g., professional, playful, minimal, bold]
+- **Industry:** [e.g., fintech, health, creative, education, developer tools]
+
+## Typography
+<!-- Picasso flags generic fonts (Inter, Roboto, Arial) as AI-slop by default.
+     If your project intentionally uses one of those, declare it here and it
+     will be treated as an approved choice. -->
+- **Display Font:** [e.g., Satoshi, Cabinet Grotesk]
+- **Body Font:** [e.g., DM Sans, Outfit]
+- **Mono Font:** [e.g., Geist Mono, JetBrains Mono]
+- **Type Scale Ratio:** [e.g., 1.25 (Major Third)]
+
+## Color
+<!-- Picasso uses OKLCH as its default color model.
+     Declaring your palette here prevents false positives when auditing
+     color usage across the codebase. -->
+- **Primary Accent:** [e.g., oklch(0.55 0.25 250)]
+- **Neutral Tint:** [e.g., cool (blue), warm (amber), neutral]
+- **Dark Mode:** [yes/no/both]
+
+## Component Library
+<!-- Tells Picasso which component primitives and CSS framework to expect
+     so it can tailor advice and auto-fixes accordingly. -->
+- **Framework:** [e.g., shadcn/ui + Radix, Chakra, custom]
+- **CSS:** [e.g., Tailwind v4, CSS Modules, Panda CSS]
+
+## Design Settings
+<!-- These knobs control how aggressively Picasso suggests changes.
+     Scale is 1-10 for each. -->
+- **DESIGN_VARIANCE:** [1-10, default 6]
+  <!-- How far Picasso can deviate from safe/conventional choices.
+       1 = strictly conservative, 10 = experimental and opinionated. -->
+- **MOTION_INTENSITY:** [1-10, default 5]
+  <!-- Controls animation suggestions.
+       1 = almost no motion, 10 = rich choreographed animations. -->
+- **VISUAL_DENSITY:** [1-10, default 5]
+  <!-- How packed the UI should feel.
+       1 = lots of whitespace, 10 = information-dense dashboard style. -->
+
+## Constraints
+<!-- Hard requirements that override all other Picasso recommendations.
+     Add one bullet per constraint. Remove the examples below and add your own. -->
+- [e.g., "Must support IE11", "No animations", "508 compliance required"]
+- [e.g., "Match existing app at app.example.com"]

package/checklists/pre-ship.md

@@ -1,83 +0,0 @@
-# Pre-Ship Design Checklist
-
-Run through before shipping any frontend work. Each item is a concrete pass/fail check, not a guideline.
-
----
-
-## Typography
-- [ ] Primary font is NOT Inter, Roboto, Arial, Helvetica, or system-ui
-- [ ] Heading hierarchy is correct (h1 > h2 > h3, no skipping)
-- [ ] Body text line-height is 1.5-1.6
-- [ ] Large headings have negative letter-spacing (-0.01 to -0.02em)
-- [ ] Prose max-width is ~65ch or 640px
-- [ ] `tabular-nums` on any data/numbers displayed
-- [ ] Font loading is optimized (preload, font-display)
-
-## Color & Contrast
-- [ ] No pure black (#000) or pure gray -- neutrals are tinted
-- [ ] Body text passes 4.5:1 contrast ratio
-- [ ] Large text passes 3:1 contrast ratio
-- [ ] UI components pass 3:1 contrast ratio
-- [ ] Colors defined in OKLCH (not hex or HSL)
-- [ ] Dark mode tested (if applicable)
-- [ ] Accent color is not a Tailwind default
-
-## Spatial Design
-- [ ] Spacing follows 4px scale consistently
-- [ ] Intra-group spacing < inter-group spacing (2:1 ratio)
-- [ ] No uniform padding/margin everywhere
-- [ ] Layout is NOT just centered columns
-- [ ] Cards are not nested within cards
-
-## Depth & Elevation
-- [ ] Important elements are visually elevated
-- [ ] Shadow hierarchy exists (not same shadow everywhere)
-- [ ] Hover states show elevation change where appropriate
-- [ ] Dark mode shadows are adjusted (more opacity or border-based)
-
-## Motion & Animation
-- [ ] `prefers-reduced-motion` is respected
-- [ ] No `transition: all` (specific properties only)
-- [ ] Easing is NOT linear or default `ease`
-- [ ] Page load has some choreography (staggered reveals)
-- [ ] Animations use `transform` and `opacity` only (GPU-composited)
-
-## Interaction
-- [ ] All interactive elements have hover, focus, active, disabled states
-- [ ] Focus indicators are visible (`:focus-visible`, 2px outline)
-- [ ] Touch targets are 44x44px minimum
-- [ ] Forms have proper labels (not just placeholders)
-- [ ] Error messages are inline and descriptive
-- [ ] Destructive actions have confirmation or undo
-- [ ] Loading states use skeletons (not just spinners)
-
-## Accessibility
-- [ ] Semantic HTML used (`<button>`, `<a>`, `<nav>`, `<main>`, etc.)
-- [ ] All images have meaningful alt text (or `alt=""` for decorative)
-- [ ] Keyboard navigation works throughout (Tab, Enter, Escape)
-- [ ] Skip link exists for main content
-- [ ] Page works at 200% zoom
-- [ ] Color is not the only means of conveying information
-
-## Responsive
-- [ ] Mobile-first CSS (`min-width` queries)
-- [ ] Tested on real mobile viewport (not just DevTools)
-- [ ] `dvh` used with `vh` fallback for full-height sections
-- [ ] Hover effects scoped with `@media (hover: hover)`
-- [ ] Safe areas handled for notched devices
-- [ ] Tables are scrollable or stacked on mobile
-
-## Performance
-- [ ] Hero image has `fetchpriority="high"`
-- [ ] Below-fold images have `loading="lazy"`
-- [ ] No barrel file imports (direct imports only)
-- [ ] Critical CSS is inlined or prioritized
-- [ ] Fonts are subsetted and self-hosted where possible
-- [ ] SVGs are optimized (svgo)
-
-## Anti-Slop Final Check
-- [ ] The 3-Second Test: Would someone identify this as "AI-generated"?
-- [ ] The Squint Test: Can you see hierarchy and groupings when blurred?
-- [ ] No 3+ AI fingerprints present simultaneously
-- [ ] At least ONE memorable design choice exists
-- [ ] Design varies between projects (not converging on same look)