picasso-skill 1.1.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/README.md +89 -49
  2. package/agents/picasso.md +629 -0
  3. package/bin/install.mjs +54 -24
  4. package/package.json +2 -1
  5. package/skills/picasso/references/accessibility-wcag.md +245 -0
  6. package/skills/picasso/references/anti-patterns.md +138 -49
  7. package/skills/picasso/references/color-and-contrast.md +251 -2
  8. package/skills/picasso/references/conversion-design.md +193 -0
  9. package/skills/picasso/references/data-visualization.md +226 -0
  10. package/skills/picasso/references/modern-css-performance.md +361 -0
  11. package/skills/picasso/references/performance-optimization.md +746 -0
  12. package/skills/picasso/references/style-presets.md +502 -0
  13. package/skills/picasso/references/typography.md +206 -2
  14. package/skills/picasso/references/ux-psychology.md +235 -0
  15. package/skills/picasso/references/ux-writing.md +513 -0
  16. package/skills/picasso/references/accessibility.md +0 -172
package/README.md CHANGED
@@ -1,31 +1,31 @@
1
1
  # Picasso
2
2
 
3
- The ultimate AI design skill for producing distinctive, production-grade frontend interfaces.
3
+ The ultimate AI design skill + agent for producing distinctive, production-grade frontend interfaces.
4
4
 
5
- Picasso consolidates best practices from 18+ sources into a single comprehensive skill that covers every dimension of frontend design: typography, color systems, spatial composition, motion, interaction patterns, responsive design, sound, haptics, icons, generative art, theming, React architecture, component taxonomy, configurable design intensity, and an exhaustive anti-patterns library.
5
+ Picasso is two things:
6
+ 1. **A skill** (knowledge base) -- 13 reference files covering every dimension of frontend design
7
+ 2. **An agent** (autonomous design engineer) -- proactively audits your frontend code, catches AI-slop aesthetics, validates accessibility, enforces design systems, and auto-fixes issues
6
8
 
7
9
  ## Install
8
10
 
9
11
  ### Option 1: npx (Recommended)
10
12
 
11
- Works with Claude Code, Cursor, Codex, and any agent that reads skill files:
12
-
13
13
  ```bash
14
- # Install to current project (Claude Code)
14
+ # Install skill + agent to current project
15
15
  npx picasso-skill
16
16
 
17
17
  # Install globally (all Claude Code projects)
18
18
  npx picasso-skill --global
19
19
 
20
+ # Skill only (no agent)
21
+ npx picasso-skill --skill-only
22
+
20
23
  # Install for Cursor
21
24
  npx picasso-skill --cursor
22
25
 
23
26
  # Install for Codex
24
27
  npx picasso-skill --codex
25
28
 
26
- # Install to .agents/skills/
27
- npx picasso-skill --agents
28
-
29
29
  # Custom path
30
30
  npx picasso-skill --path ./my-skills
31
31
  ```
@@ -33,11 +33,11 @@ npx picasso-skill --path ./my-skills
33
33
  ### Option 2: One-Liner (no npm needed)
34
34
 
35
35
  ```bash
36
- # Project-specific
37
- git clone https://github.com/viperrcrypto/picasso.git /tmp/picasso && mkdir -p .claude/skills && cp -r /tmp/picasso/skills/picasso .claude/skills/picasso && rm -rf /tmp/picasso
36
+ # Project-specific (skill + agent)
37
+ git clone https://github.com/viperrcrypto/picasso.git /tmp/picasso && mkdir -p .claude/skills .claude/agents && cp -r /tmp/picasso/skills/picasso .claude/skills/picasso && cp /tmp/picasso/agents/picasso.md .claude/agents/picasso.md && rm -rf /tmp/picasso
38
38
 
39
- # Global (all projects)
40
- git clone https://github.com/viperrcrypto/picasso.git /tmp/picasso && cp -r /tmp/picasso/skills/picasso ~/.claude/skills/picasso && rm -rf /tmp/picasso
39
+ # Global
40
+ git clone https://github.com/viperrcrypto/picasso.git /tmp/picasso && mkdir -p ~/.claude/skills ~/.claude/agents && cp -r /tmp/picasso/skills/picasso ~/.claude/skills/picasso && cp /tmp/picasso/agents/picasso.md ~/.claude/agents/picasso.md && rm -rf /tmp/picasso
41
41
  ```
42
42
 
43
43
  ### Option 3: Manual
@@ -45,33 +45,99 @@ git clone https://github.com/viperrcrypto/picasso.git /tmp/picasso && cp -r /tmp
45
45
  ```bash
46
46
  git clone https://github.com/viperrcrypto/picasso.git
47
47
  cp -r picasso/skills/picasso ~/.claude/skills/picasso
48
+ cp picasso/agents/picasso.md ~/.claude/agents/picasso.md
48
49
  ```
49
50
 
50
51
  ### Option 4: Claude.ai (Consumer)
51
52
 
52
53
  Upload `skills/picasso/SKILL.md` as a Custom Skill in Claude.ai settings. Upload the reference files alongside it for full coverage.
53
54
 
55
+ ## Skill + Agent: What's the Difference?
56
+
57
+ | | Skill | Agent |
58
+ |---|---|---|
59
+ | **What it is** | Static knowledge base (20 reference files) | Autonomous design engineer |
60
+ | **How it works** | Loaded into context when designing | Runs as a sub-process with its own tools |
61
+ | **When it runs** | When you ask for design help | Proactively after any frontend code change |
62
+ | **Can audit code** | Only when you ask | Automatically |
63
+ | **Can run axe-core** | No | Yes |
64
+ | **Can screenshot pages** | No | Yes (via Playwright) |
65
+ | **Can auto-fix issues** | No | Yes |
66
+ | **Can enforce design system** | No | Yes (greps for token violations) |
67
+
54
68
  ## What's Inside
55
69
 
56
70
  ```
57
71
  skills/picasso/
58
- SKILL.md # Main skill file
72
+ SKILL.md # Main skill file (knowledge base)
59
73
  references/
60
- typography.md # Type systems, font pairing, scales, OpenType
61
- color-and-contrast.md # OKLCH, tinted neutrals, dark mode, a11y
74
+ anti-patterns.md # AI slop fingerprint + what NOT to do
75
+ typography.md # Font pairing, type scales, variable fonts, 12 curated pairings
76
+ color-and-contrast.md # OKLCH, 10 curated palettes, P3 wide gamut, dark mode
62
77
  spatial-design.md # Spacing scales, grids, visual hierarchy
63
78
  motion-and-animation.md # Easing, staggering, text morphing, reduced motion
64
79
  interaction-design.md # Forms, focus, loading, empty states, errors
65
- responsive-design.md # Mobile-first, fluid, container queries
66
- sensory-design.md # UI sounds, haptic feedback
67
- react-patterns.md # Server/client components, state, performance
68
- anti-patterns.md # What NOT to do (the most important file)
69
- design-system.md # DESIGN.md generation, theming, tokens
70
- generative-art.md # Algorithmic art, p5.js, SVG, canvas, seeded randomness
80
+ responsive-design.md # Mobile-first, dvh/svh, container queries, print
81
+ sensory-design.md # UI sounds, haptic feedback, multi-sensory
82
+ react-patterns.md # React 19, Tailwind v4, Server Actions, dark mode
83
+ accessibility-wcag.md # Full ARIA patterns, WCAG 2.2, SPA focus management
84
+ modern-css-performance.md # :has(), scroll animations, view transitions, @layer
85
+ performance-optimization.md # Core Web Vitals, 45 React/Next.js perf patterns
86
+ ux-writing.md # Button labels, error templates, microcopy, banned words
87
+ ux-psychology.md # Gestalt, cognitive laws, scanning patterns
88
+ conversion-design.md # Landing pages, CTAs, pricing, onboarding
89
+ data-visualization.md # Charts, dashboards, data palettes, Tufte principles
90
+ style-presets.md # 22 curated visual presets with colors + fonts
91
+ design-system.md # DESIGN.md generation, theming, tokens (OKLCH)
92
+ generative-art.md # p5.js, SVG, Canvas 2D, noise, seeded randomness
71
93
  component-patterns.md # Standard naming, taxonomy, state matrix
72
- accessibility.md # ARIA, keyboard nav, screen readers, WCAG 2.2
94
+
95
+ agents/
96
+ picasso.md # Autonomous design auditor agent
97
+
98
+ templates/
99
+ picasso-config.md # .picasso.md project config template
73
100
  ```
74
101
 
102
+ ## Agent Commands
103
+
104
+ The Picasso agent responds to these commands:
105
+
106
+ | Command | What the agent does |
107
+ |---|---|
108
+ | `/audit` | Full 5-phase design audit with severity scoring (report only) |
109
+ | `/critique` | UX-focused review: hierarchy, clarity, emotional resonance |
110
+ | `/polish` | Auto-fix all issues found in audit (smallest safe changes) |
111
+ | `/redesign` | Aggressive audit + fix + re-audit cycle |
112
+ | `/simplify` | Strip unnecessary complexity |
113
+ | `/animate` | Add purposeful motion (staggered reveals, hover states) |
114
+ | `/bolder` | Amplify timid designs (contrast, type size, hierarchy) |
115
+ | `/quieter` | Tone down aggressive designs (saturation, shadows, whitespace) |
116
+ | `/normalize` | Replace hardcoded values with design system tokens |
117
+ | `/theme` | Generate or apply a theme |
118
+ | `/stitch` | Generate a complete DESIGN.md from the current codebase |
119
+ | `/harden` | Add error handling, loading states, empty states |
120
+ | `/a11y` | Accessibility audit: axe-core + pa11y + Lighthouse |
121
+ | `/perf` | Lighthouse performance audit with Core Web Vitals thresholds |
122
+ | `/visual-diff` | Screenshot desktop + mobile in light/dark, analyze visually |
123
+ | `/consistency` | Multi-page consistency check across all routes |
124
+ | `/lint-design` | Find hardcoded colors, spacing, fonts, z-index chaos |
125
+ | `/install-hooks` | Generate git pre-commit hook for design checks |
126
+ | `/ci-setup` | Generate GitHub Actions workflow for PR design review |
127
+
128
+ ## Agent Audit Checklist
129
+
130
+ The agent checks for:
131
+
132
+ - **AI-Slop Detection** -- Inter/Roboto fonts, purple gradients, centered everything, uniform card grids, pure black/gray
133
+ - **Typography** -- Font choice, type scale, max-width, line height, weight
134
+ - **Color** -- OKLCH usage, tinted neutrals, 60-30-10 rule, semantic colors
135
+ - **Spacing** -- Consistent scale, Gestalt grouping, breathing room
136
+ - **Accessibility** -- axe-core checks, focus indicators, ARIA, contrast ratios, semantic HTML
137
+ - **Motion** -- No transition:all, no bounce easing, reduced-motion support
138
+ - **Responsive** -- Mobile-first, 375px readability, touch targets, lazy loading
139
+ - **Interaction** -- Labels, descriptive buttons, loading states, error handling
140
+
75
141
  ## Configurable Settings
76
142
 
77
143
  Three dials (1-10) control the design output:
@@ -82,35 +148,9 @@ Three dials (1-10) control the design output:
82
148
  | **MOTION_INTENSITY** | Hover states and fades only | Staggered reveals, scroll-triggered | Magnetic cursors, parallax, complex choreography |
83
149
  | **VISUAL_DENSITY** | Spacious, luxury | Balanced whitespace | Dense dashboards, data-heavy |
84
150
 
85
- ## 21 Commands
86
-
87
- | Command | Effect |
88
- |---|---|
89
- | `/audit` | Technical quality check: a11y, performance, responsive |
90
- | `/critique` | UX design review: hierarchy, clarity, resonance |
91
- | `/polish` | Final pass: spacing, transitions, copy refinement |
92
- | `/simplify` | Strip to essence |
93
- | `/animate` | Add purposeful motion |
94
- | `/bolder` | Amplify timid designs |
95
- | `/quieter` | Tone down aggressive designs |
96
- | `/normalize` | Align with design system standards |
97
- | `/theme` | Generate or apply a theme |
98
- | `/sound` | Add UI sound effects |
99
- | `/haptics` | Add haptic feedback |
100
- | `/redesign` | Audit existing project, fix systematically |
101
- | `/soft` | Premium soft aesthetic preset |
102
- | `/minimalist` | Editorial minimalism preset |
103
- | `/brutalist` | Raw mechanical aesthetic preset |
104
- | `/stitch` | Generate Google Stitch DESIGN.md |
105
- | `/clarify` | Improve unclear UX copy |
106
- | `/harden` | Error handling, i18n, edge cases |
107
- | `/colorize` | Introduce strategic color |
108
- | `/delight` | Add moments of joy |
109
- | `/extract` | Pull into reusable components |
110
-
111
151
  ## Sources
112
152
 
113
- Built on 18+ sources including [Anthropic's official skills](https://github.com/anthropics/skills), [Impeccable](https://github.com/pbakaus/impeccable), [Taste Skill](https://github.com/Leonxlnx/taste-skill), [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md), [Component Gallery](https://component.gallery/), [Torph](https://torph.lochie.me/), [Soundcn](https://github.com/kapishdima/soundcn), [Vercel agent-skills](https://github.com/vercel-labs/agent-skills), and more. See the full attribution list in the skill file.
153
+ Built on 18+ sources including [Anthropic's official skills](https://github.com/anthropics/skills), [Impeccable](https://github.com/pbakaus/impeccable), [Taste Skill](https://github.com/Leonxlnx/taste-skill), [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md), [Component Gallery](https://component.gallery/), [Torph](https://torph.lochie.me/), [Soundcn](https://github.com/kapishdima/soundcn), [Vercel agent-skills](https://github.com/vercel-labs/agent-skills), and more.
114
154
 
115
155
  ## The Non-Negotiables
116
156