picasso-skill 2.0.1 → 2.0.3
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.
- package/README.md +6 -37
- package/agents/picasso.md +49 -25
- package/bin/install.mjs +12 -13
- package/package.json +2 -2
- package/skills/picasso/SKILL.md +1 -1
- package/templates/picasso-config.md +53 -0
- package/checklists/pre-ship.md +0 -83
package/README.md
CHANGED
|
@@ -422,8 +422,7 @@ Picasso ships as both a **skill** (knowledge base) and an **agent** (autonomous
|
|
|
422
422
|
| `/polish` | Final pass before shipping: visual alignment, typography refinement, color/contrast, all 8 interaction states, micro-interactions, content/copy, edge cases |
|
|
423
423
|
| `/simplify` | Strip to essence: reduce scope, flatten structure, remove decorations, progressive disclosure, shorter copy, fewer variants |
|
|
424
424
|
| `/normalize` | Realign to design system standards: fix hardcoded colors, inconsistent tokens, broken dark mode, spacing violations |
|
|
425
|
-
| `/
|
|
426
|
-
| `/arrange` | Fix layout: establish spacing system, create visual rhythm, choose right layout tool (Flexbox vs Grid), break card grid monotony |
|
|
425
|
+
| `/harden` | Error handling and edge cases: text overflow, i18n, network errors, empty/loading/error states, browser compat |
|
|
427
426
|
|
|
428
427
|
### Amplification
|
|
429
428
|
|
|
@@ -432,8 +431,6 @@ Picasso ships as both a **skill** (knowledge base) and an **agent** (autonomous
|
|
|
432
431
|
| `/animate` | Add purposeful motion: page load choreography, micro-interactions, state transitions, scroll effects, loading delight |
|
|
433
432
|
| `/bolder` | Amplify timid designs: extreme type scale (3x-5x), vibrant color, spatial drama, dramatic shadows, custom elements |
|
|
434
433
|
| `/quieter` | Tone down aggressive designs: reduce saturation to 70-85%, soften weights, increase whitespace, shorter animation distances |
|
|
435
|
-
| `/colorize` | Introduce strategic color: semantic states, accent application, tinted backgrounds, data visualization, decorative elements |
|
|
436
|
-
| `/delight` | Add moments of joy: button feedback, loading delight, success celebrations, personality in copy, sound cues, easter eggs |
|
|
437
434
|
|
|
438
435
|
### Aesthetic Presets
|
|
439
436
|
|
|
@@ -453,15 +450,14 @@ Picasso ships as both a **skill** (knowledge base) and an **agent** (autonomous
|
|
|
453
450
|
| `/haptics` | Add mobile haptic feedback using web-haptics (4 presets + custom patterns) |
|
|
454
451
|
| `/redesign` | Full audit + identify problems + fix systematically + re-audit cycle |
|
|
455
452
|
|
|
456
|
-
###
|
|
453
|
+
### Design Debt
|
|
457
454
|
|
|
458
455
|
| Command | What It Does |
|
|
459
456
|
|---|---|
|
|
460
|
-
| `/
|
|
461
|
-
| `/
|
|
462
|
-
| `/
|
|
463
|
-
| `/
|
|
464
|
-
| `/onboard` | Design onboarding: signup friction reduction, first-run experience, progressive feature discovery, setup checklists |
|
|
457
|
+
| `/backlog` | Create persistent design debt backlog with impact-priority scoring in `.picasso-backlog.md` |
|
|
458
|
+
| `/variants` | Generate 2-3 distinct visual directions for A/B comparison with code previews |
|
|
459
|
+
| `/quick-audit` | 5-minute fast audit: 6 binary pass/fail checks (font, color, layout, spacing, a11y, anti-slop) |
|
|
460
|
+
| `/autorefine` | Binary evaluation loop: 6 criteria, mutate one thing at a time, iterate to 95%+ pass rate |
|
|
465
461
|
|
|
466
462
|
### `/godmode` -- The Nuclear Option
|
|
467
463
|
|
|
@@ -482,33 +478,6 @@ GODMODE Complete: 42 → 87 (+45 points), 47 files modified, 23 issues fixed
|
|
|
482
478
|
|
|
483
479
|
---
|
|
484
480
|
|
|
485
|
-
### Creative
|
|
486
|
-
|
|
487
|
-
| Command | What It Does |
|
|
488
|
-
|---|---|
|
|
489
|
-
| `/godmode` | The ultimate command: interview + audit + score + roast + fix everything + before/after report |
|
|
490
|
-
| `/picasso` | Run the design interview -- deep discovery conversation, generates `.picasso.md` config |
|
|
491
|
-
| `/roast` | Brutally honest critique with designer-Twitter energy. Every roast includes the fix. Rated 🔥-🔥🔥🔥🔥🔥. |
|
|
492
|
-
| `/score` | Quantified 0-100 design score with category breakdown (typography, color, spacing, a11y, motion, responsive, perf, anti-slop) |
|
|
493
|
-
| `/steal <url>` | Extract design DNA from any live website into a `.picasso.md` config |
|
|
494
|
-
| `/mood <word>` | Generate complete design system from a single evocative word (cyberpunk, cottage, luxury, etc.) |
|
|
495
|
-
| `/evolve` | Multi-round iterative refinement: 3 directions → pick → refine → ship |
|
|
496
|
-
| `/compete <url>` | Head-to-head design comparison against a competitor with per-category scoring |
|
|
497
|
-
| `/before-after` | Visual side-by-side comparison report after changes (HTML export) |
|
|
498
|
-
| `/mood-board` | Generate interactive HTML mood board from adjectives |
|
|
499
|
-
| `/design-system-sync` | Detect and auto-fix drift between DESIGN.md and actual code |
|
|
500
|
-
| `/preset <name>` | Apply a curated preset (linear, stripe, vercel, notion, brutalist, etc.) |
|
|
501
|
-
| `/quick-audit` | 5-minute fast audit: 6 binary pass/fail checks (font, color, layout, spacing, a11y, anti-slop) |
|
|
502
|
-
| `/autorefine` | Binary evaluation loop: 6 criteria, mutate one thing at a time, iterate to 95%+ pass rate |
|
|
503
|
-
| `/backlog` | Create persistent design debt backlog with impact-priority scoring in `.picasso-backlog.md` |
|
|
504
|
-
| `/variants` | Generate 2-3 distinct visual directions for A/B comparison with code previews |
|
|
505
|
-
|
|
506
|
-
### Advanced
|
|
507
|
-
|
|
508
|
-
| Command | What It Does |
|
|
509
|
-
|---|---|
|
|
510
|
-
| `/overdrive` | Technically extraordinary effects. View Transitions, scroll-driven animations, WebGL, @property gradients, Web Audio, spring physics. 60fps. Progressive enhancement. |
|
|
511
|
-
|
|
512
481
|
### Automation (Agent-Only)
|
|
513
482
|
|
|
514
483
|
| Command | What It Does |
|
package/agents/picasso.md
CHANGED
|
@@ -176,23 +176,44 @@ If 3+ are checked, you MUST change your commitments until fewer than 3 remain.
|
|
|
176
176
|
Your design knowledge comes from the Picasso skill reference files. Before any audit or design work, load the relevant references:
|
|
177
177
|
|
|
178
178
|
```
|
|
179
|
-
skills/picasso/SKILL.md
|
|
180
|
-
skills/picasso/references/anti-patterns.md
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
skills/picasso/references/
|
|
184
|
-
skills/picasso/references/
|
|
185
|
-
skills/picasso/references/
|
|
186
|
-
skills/picasso/references/
|
|
187
|
-
skills/picasso/references/
|
|
188
|
-
skills/picasso/references/
|
|
189
|
-
skills/picasso/references/
|
|
190
|
-
skills/picasso/references/design
|
|
191
|
-
skills/picasso/references/
|
|
192
|
-
skills/picasso/references/
|
|
179
|
+
skills/picasso/SKILL.md # Core rules and workflow (always load)
|
|
180
|
+
skills/picasso/references/anti-patterns.md # What NOT to do (always load)
|
|
181
|
+
|
|
182
|
+
# Load based on what the task involves:
|
|
183
|
+
skills/picasso/references/typography.md # Fonts, scales, pairing
|
|
184
|
+
skills/picasso/references/color-and-contrast.md # OKLCH, tinted neutrals
|
|
185
|
+
skills/picasso/references/spatial-design.md # Spacing, grids, hierarchy
|
|
186
|
+
skills/picasso/references/depth-and-elevation.md # Shadows, z-index, layering
|
|
187
|
+
skills/picasso/references/motion-and-animation.md # Easing, staggering, duration
|
|
188
|
+
skills/picasso/references/micro-interactions.md # Scroll animations, gestures, View Transitions
|
|
189
|
+
skills/picasso/references/animation-performance.md # Compositor props, will-change, contain
|
|
190
|
+
skills/picasso/references/interaction-design.md # Forms, focus, states, Popover API
|
|
191
|
+
skills/picasso/references/navigation-patterns.md # Breadcrumbs, sidebar, tabs, bottom bar
|
|
192
|
+
skills/picasso/references/tables-and-forms.md # Sortable tables, validation, multi-step
|
|
193
|
+
skills/picasso/references/loading-and-states.md # Skeletons, empty states, error boundaries
|
|
194
|
+
skills/picasso/references/responsive-design.md # Mobile-first, container queries
|
|
195
|
+
skills/picasso/references/dark-mode.md # Preference hierarchy, elevation, testing
|
|
196
|
+
skills/picasso/references/images-and-media.md # Formats, srcset, favicons, OG images
|
|
197
|
+
skills/picasso/references/brand-and-identity.md # Logo sizing, brand color usage
|
|
198
|
+
skills/picasso/references/i18n-visual-patterns.md # RTL, logical properties, CJK
|
|
199
|
+
skills/picasso/references/code-typography.md # Monospace, syntax highlighting, diffs
|
|
200
|
+
skills/picasso/references/sensory-design.md # Sound, haptics
|
|
201
|
+
skills/picasso/references/react-patterns.md # Server Components, Tailwind v4
|
|
202
|
+
skills/picasso/references/accessibility-wcag.md # ARIA, WCAG 2.2, keyboard nav
|
|
203
|
+
skills/picasso/references/design-system.md # DESIGN.md, theming, tokens
|
|
204
|
+
skills/picasso/references/generative-art.md # p5.js, SVG, canvas
|
|
205
|
+
skills/picasso/references/component-patterns.md # Naming, taxonomy, state matrix
|
|
206
|
+
skills/picasso/references/ux-psychology.md # Gestalt, Fitts's Law, heuristics
|
|
207
|
+
skills/picasso/references/ux-writing.md # Error messages, microcopy, CTAs
|
|
208
|
+
skills/picasso/references/data-visualization.md # Chart matrix, dashboards, Tufte
|
|
209
|
+
skills/picasso/references/conversion-design.md # Landing pages, CTAs, pricing
|
|
210
|
+
skills/picasso/references/modern-css-performance.md # Nesting, :has(), @layer, subgrid
|
|
211
|
+
skills/picasso/references/performance-optimization.md # 45 Vercel rules, Core Web Vitals
|
|
212
|
+
skills/picasso/references/style-presets.md # 22 curated presets with values
|
|
213
|
+
skills/picasso/references/tools-catalog.md # torph, soundcn, Lucide, Facehash
|
|
193
214
|
```
|
|
194
215
|
|
|
195
|
-
Find these files by searching
|
|
216
|
+
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.
|
|
196
217
|
|
|
197
218
|
## Phase 1: Gather Context
|
|
198
219
|
|
|
@@ -507,7 +528,7 @@ When the user invokes these commands, execute the corresponding workflow:
|
|
|
507
528
|
| `/preset <name>` | Apply a curated community design preset |
|
|
508
529
|
| `/godmode` | The ultimate command: interview + audit + score + roast + fix everything + before/after report |
|
|
509
530
|
| `/quick-audit` | 5-minute fast audit: font, color, spacing, a11y, anti-slop — skip the deep dive |
|
|
510
|
-
| `/autorefine` | Binary evaluation loop: define 6 criteria, mutate one thing at a time, iterate to
|
|
531
|
+
| `/autorefine` | Binary evaluation loop: define 6 criteria, mutate one thing at a time, iterate to 6/6 pass |
|
|
511
532
|
| `/backlog` | Create persistent design debt backlog with impact-priority scoring in .picasso-backlog.md |
|
|
512
533
|
| `/variants` | Generate 2-3 distinct visual directions for A/B comparison with previews |
|
|
513
534
|
|
|
@@ -521,10 +542,13 @@ When the user invokes these commands, execute the corresponding workflow:
|
|
|
521
542
|
1. Run the **design interview** (Section 1-4) if no `.picasso.md` exists. If it exists, load it.
|
|
522
543
|
2. **Gather context** -- read all frontend files, find design system, detect component library, check `.picasso.md`.
|
|
523
544
|
|
|
545
|
+
**Phase 1b: Anti-Slop Gate**
|
|
546
|
+
3. Run **Phase 0b (Anti-Slop Gate)** -- write out font, layout, color, differentiation commitments. This is mandatory even in godmode. No fixes until commitments are declared.
|
|
547
|
+
|
|
524
548
|
**Phase 2: Assess**
|
|
525
|
-
|
|
549
|
+
4. Run `/score` -- establish the **before score** (0-100). Save it.
|
|
526
550
|
4. Run `/roast` -- get the brutally honest assessment. Show it to the user.
|
|
527
|
-
5. Run `/audit` -- full
|
|
551
|
+
5. Run `/audit` -- full technical audit (Phase 1-4) with severity-ranked findings.
|
|
528
552
|
6. Run `/a11y` -- axe-core + pa11y + Lighthouse accessibility.
|
|
529
553
|
7. Run `/perf` -- Lighthouse performance with Core Web Vitals.
|
|
530
554
|
8. Run `/lint-design` -- find all design token violations.
|
|
@@ -635,9 +659,9 @@ Point at any live website and extract its design DNA:
|
|
|
635
659
|
2. Analyze the screenshot visually for: fonts, color palette, spacing rhythm, border-radius, animation style, layout structure
|
|
636
660
|
3. Use bash to fetch the page and extract CSS:
|
|
637
661
|
```bash
|
|
638
|
-
curl -s "<url>" | grep -
|
|
639
|
-
curl -s "<url>" | grep -
|
|
640
|
-
curl -s "<url>" | grep -
|
|
662
|
+
curl -s "<url>" | grep -oE 'font-family:[^;]+' | sort -u | head -10
|
|
663
|
+
curl -s "<url>" | grep -oE '#[0-9a-fA-F]{3,8}' | sort | uniq -c | sort -rn | head -15
|
|
664
|
+
curl -s "<url>" | grep -oE 'border-radius:[^;]+' | sort -u
|
|
641
665
|
```
|
|
642
666
|
4. Generate a `.picasso.md` config that matches the extracted aesthetic
|
|
643
667
|
5. Optionally generate a DESIGN.md based on the extraction
|
|
@@ -865,7 +889,7 @@ Run Stylelint + grep-based checks to find design system violations:
|
|
|
865
889
|
grep -rn '#[0-9a-fA-F]\{3,8\}' --include="*.tsx" --include="*.jsx" --include="*.css" | grep -v 'node_modules\|\.git\|\.next' | head -30
|
|
866
890
|
|
|
867
891
|
# 2. Find inconsistent spacing values (non-4px-multiple)
|
|
868
|
-
grep -rn 'padding\|margin\|gap' --include="*.css" --include="*.tsx" | grep -
|
|
892
|
+
grep -rn 'padding\|margin\|gap' --include="*.css" --include="*.tsx" | grep -oE '\d+px' | sort | uniq -c | sort -rn
|
|
869
893
|
|
|
870
894
|
# 3. Find non-standard font stacks
|
|
871
895
|
grep -rn 'font-family\|fontFamily' --include="*.css" --include="*.tsx" --include="*.jsx" | grep -v 'node_modules' | head -20
|
|
@@ -1057,7 +1081,7 @@ failed.forEach(a => console.log(' FAIL: ' + a.id + ' - ' + a.title));
|
|
|
1057
1081
|
|
|
1058
1082
|
Combine results from all three tools, deduplicate overlapping findings, and report with severity levels.
|
|
1059
1083
|
|
|
1060
|
-
|
|
1084
|
+
### /quick-audit -- 5-Minute Fast Audit
|
|
1061
1085
|
|
|
1062
1086
|
When time is short or you need a triage before committing to a full audit. Takes 5 minutes, not 30.
|
|
1063
1087
|
|
|
@@ -1084,7 +1108,7 @@ Anti-Slop: FAIL ✗ (4 fingerprints: centered layout + uniform cards + indi
|
|
|
1084
1108
|
Result: 3/6 — Needs work. Start with color and spacing.
|
|
1085
1109
|
```
|
|
1086
1110
|
|
|
1087
|
-
|
|
1111
|
+
### /autorefine -- Binary Evaluation Loop
|
|
1088
1112
|
|
|
1089
1113
|
Iterative improvement using binary (pass/fail) criteria. Inspired by SkillForge's autoresearch pattern that improved one skill from 56% to 92%.
|
|
1090
1114
|
|
|
@@ -1106,7 +1130,7 @@ Iterative improvement using binary (pass/fail) criteria. Inspired by SkillForge'
|
|
|
1106
1130
|
|
|
1107
1131
|
4. **Re-evaluate all 6 criteria** after each mutation. Sometimes fixing one thing breaks another.
|
|
1108
1132
|
|
|
1109
|
-
5. **Iterate until
|
|
1133
|
+
5. **Iterate until 6/6 pass** across 3 consecutive evaluations. If a criterion keeps flipping between PASS and FAIL, the fix is unstable -- investigate root cause.
|
|
1110
1134
|
|
|
1111
1135
|
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.
|
|
1112
1136
|
|
package/bin/install.mjs
CHANGED
|
@@ -29,7 +29,7 @@ if (command === "help" || command === "--help" || command === "-h") {
|
|
|
29
29
|
npx picasso-skill --path DIR Install to a custom directory
|
|
30
30
|
|
|
31
31
|
What gets installed:
|
|
32
|
-
.claude/skills/picasso/ Skill (knowledge base:
|
|
32
|
+
.claude/skills/picasso/ Skill (knowledge base: 32 reference files)
|
|
33
33
|
.claude/agents/picasso.md Agent (autonomous design auditor)
|
|
34
34
|
`);
|
|
35
35
|
process.exit(0);
|
|
@@ -42,24 +42,23 @@ const home = process.env.HOME || process.env.USERPROFILE;
|
|
|
42
42
|
let skillDir;
|
|
43
43
|
let agentDir;
|
|
44
44
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
45
|
+
// OpenClaw must be checked BEFORE generic isGlobal to handle --openclaw -g correctly
|
|
46
|
+
if (args.includes("--openclaw")) {
|
|
47
|
+
if (isGlobal) {
|
|
48
|
+
skillDir = join(home, ".openclaw", "skills", "picasso");
|
|
49
|
+
} else {
|
|
50
|
+
skillDir = join(process.cwd(), "skills", "picasso");
|
|
51
|
+
}
|
|
52
|
+
agentDir = null; // OpenClaw uses SOUL.md, not agents/
|
|
48
53
|
} else if (args.includes("--cursor")) {
|
|
49
54
|
skillDir = join(process.cwd(), ".cursor", "skills", "picasso");
|
|
50
55
|
agentDir = null; // Cursor doesn't support agents
|
|
51
56
|
} else if (args.includes("--codex")) {
|
|
52
57
|
skillDir = join(home, ".codex", "skills", "picasso");
|
|
53
58
|
agentDir = null;
|
|
54
|
-
} else if (
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
if (openclawGlobal) {
|
|
58
|
-
skillDir = join(home, ".openclaw", "skills", "picasso");
|
|
59
|
-
} else {
|
|
60
|
-
skillDir = join(process.cwd(), "skills", "picasso");
|
|
61
|
-
}
|
|
62
|
-
agentDir = null; // OpenClaw uses SOUL.md, not agents/
|
|
59
|
+
} else if (isGlobal) {
|
|
60
|
+
skillDir = join(home, ".claude", "skills", "picasso");
|
|
61
|
+
agentDir = join(home, ".claude", "agents");
|
|
63
62
|
} else if (args.includes("--agents")) {
|
|
64
63
|
skillDir = join(process.cwd(), ".agents", "skills", "picasso");
|
|
65
64
|
agentDir = null;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "picasso-skill",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.3",
|
|
4
4
|
"description": "The ultimate AI design skill for producing distinctive, production-grade frontend interfaces",
|
|
5
5
|
"bin": {
|
|
6
6
|
"picasso-skill": "./bin/install.mjs"
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"agents/",
|
|
36
36
|
"commands/",
|
|
37
37
|
"references/",
|
|
38
|
-
"
|
|
38
|
+
"templates/",
|
|
39
39
|
"LICENSE"
|
|
40
40
|
]
|
|
41
41
|
}
|
package/skills/picasso/SKILL.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: picasso
|
|
3
|
-
version: 2.0.
|
|
3
|
+
version: 2.0.2
|
|
4
4
|
description: >
|
|
5
5
|
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.
|
|
6
6
|
metadata:
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# .picasso.md -- Project Design Configuration
|
|
2
|
+
|
|
3
|
+
<!-- Drop this file in your project root. The Picasso agent reads it before every
|
|
4
|
+
audit to understand your project's design preferences. Any field left as the
|
|
5
|
+
default placeholder (brackets) will be ignored and Picasso defaults apply. -->
|
|
6
|
+
|
|
7
|
+
## Brand
|
|
8
|
+
<!-- Core identity. Guides tone-of-voice checks and overall aesthetic expectations. -->
|
|
9
|
+
- **Name:** [Your product name]
|
|
10
|
+
- **Tone:** [e.g., professional, playful, minimal, bold]
|
|
11
|
+
- **Industry:** [e.g., fintech, health, creative, education, developer tools]
|
|
12
|
+
|
|
13
|
+
## Typography
|
|
14
|
+
<!-- Picasso flags generic fonts (Inter, Roboto, Arial) as AI-slop by default.
|
|
15
|
+
If your project intentionally uses one of those, declare it here and it
|
|
16
|
+
will be treated as an approved choice. -->
|
|
17
|
+
- **Display Font:** [e.g., Satoshi, Cabinet Grotesk]
|
|
18
|
+
- **Body Font:** [e.g., DM Sans, Outfit]
|
|
19
|
+
- **Mono Font:** [e.g., Geist Mono, JetBrains Mono]
|
|
20
|
+
- **Type Scale Ratio:** [e.g., 1.25 (Major Third)]
|
|
21
|
+
|
|
22
|
+
## Color
|
|
23
|
+
<!-- Picasso uses OKLCH as its default color model.
|
|
24
|
+
Declaring your palette here prevents false positives when auditing
|
|
25
|
+
color usage across the codebase. -->
|
|
26
|
+
- **Primary Accent:** [e.g., oklch(0.55 0.25 250)]
|
|
27
|
+
- **Neutral Tint:** [e.g., cool (blue), warm (amber), neutral]
|
|
28
|
+
- **Dark Mode:** [yes/no/both]
|
|
29
|
+
|
|
30
|
+
## Component Library
|
|
31
|
+
<!-- Tells Picasso which component primitives and CSS framework to expect
|
|
32
|
+
so it can tailor advice and auto-fixes accordingly. -->
|
|
33
|
+
- **Framework:** [e.g., shadcn/ui + Radix, Chakra, custom]
|
|
34
|
+
- **CSS:** [e.g., Tailwind v4, CSS Modules, Panda CSS]
|
|
35
|
+
|
|
36
|
+
## Design Settings
|
|
37
|
+
<!-- These knobs control how aggressively Picasso suggests changes.
|
|
38
|
+
Scale is 1-10 for each. -->
|
|
39
|
+
- **DESIGN_VARIANCE:** [1-10, default 6]
|
|
40
|
+
<!-- How far Picasso can deviate from safe/conventional choices.
|
|
41
|
+
1 = strictly conservative, 10 = experimental and opinionated. -->
|
|
42
|
+
- **MOTION_INTENSITY:** [1-10, default 5]
|
|
43
|
+
<!-- Controls animation suggestions.
|
|
44
|
+
1 = almost no motion, 10 = rich choreographed animations. -->
|
|
45
|
+
- **VISUAL_DENSITY:** [1-10, default 5]
|
|
46
|
+
<!-- How packed the UI should feel.
|
|
47
|
+
1 = lots of whitespace, 10 = information-dense dashboard style. -->
|
|
48
|
+
|
|
49
|
+
## Constraints
|
|
50
|
+
<!-- Hard requirements that override all other Picasso recommendations.
|
|
51
|
+
Add one bullet per constraint. Remove the examples below and add your own. -->
|
|
52
|
+
- [e.g., "Must support IE11", "No animations", "508 compliance required"]
|
|
53
|
+
- [e.g., "Match existing app at app.example.com"]
|
package/checklists/pre-ship.md
DELETED
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
# Pre-Ship Design Checklist
|
|
2
|
-
|
|
3
|
-
Run through before shipping any frontend work. Each item is a concrete pass/fail check, not a guideline.
|
|
4
|
-
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
## Typography
|
|
8
|
-
- [ ] Primary font is NOT Inter, Roboto, Arial, Helvetica, or system-ui
|
|
9
|
-
- [ ] Heading hierarchy is correct (h1 > h2 > h3, no skipping)
|
|
10
|
-
- [ ] Body text line-height is 1.5-1.6
|
|
11
|
-
- [ ] Large headings have negative letter-spacing (-0.01 to -0.02em)
|
|
12
|
-
- [ ] Prose max-width is ~65ch or 640px
|
|
13
|
-
- [ ] `tabular-nums` on any data/numbers displayed
|
|
14
|
-
- [ ] Font loading is optimized (preload, font-display)
|
|
15
|
-
|
|
16
|
-
## Color & Contrast
|
|
17
|
-
- [ ] No pure black (#000) or pure gray -- neutrals are tinted
|
|
18
|
-
- [ ] Body text passes 4.5:1 contrast ratio
|
|
19
|
-
- [ ] Large text passes 3:1 contrast ratio
|
|
20
|
-
- [ ] UI components pass 3:1 contrast ratio
|
|
21
|
-
- [ ] Colors defined in OKLCH (not hex or HSL)
|
|
22
|
-
- [ ] Dark mode tested (if applicable)
|
|
23
|
-
- [ ] Accent color is not a Tailwind default
|
|
24
|
-
|
|
25
|
-
## Spatial Design
|
|
26
|
-
- [ ] Spacing follows 4px scale consistently
|
|
27
|
-
- [ ] Intra-group spacing < inter-group spacing (2:1 ratio)
|
|
28
|
-
- [ ] No uniform padding/margin everywhere
|
|
29
|
-
- [ ] Layout is NOT just centered columns
|
|
30
|
-
- [ ] Cards are not nested within cards
|
|
31
|
-
|
|
32
|
-
## Depth & Elevation
|
|
33
|
-
- [ ] Important elements are visually elevated
|
|
34
|
-
- [ ] Shadow hierarchy exists (not same shadow everywhere)
|
|
35
|
-
- [ ] Hover states show elevation change where appropriate
|
|
36
|
-
- [ ] Dark mode shadows are adjusted (more opacity or border-based)
|
|
37
|
-
|
|
38
|
-
## Motion & Animation
|
|
39
|
-
- [ ] `prefers-reduced-motion` is respected
|
|
40
|
-
- [ ] No `transition: all` (specific properties only)
|
|
41
|
-
- [ ] Easing is NOT linear or default `ease`
|
|
42
|
-
- [ ] Page load has some choreography (staggered reveals)
|
|
43
|
-
- [ ] Animations use `transform` and `opacity` only (GPU-composited)
|
|
44
|
-
|
|
45
|
-
## Interaction
|
|
46
|
-
- [ ] All interactive elements have hover, focus, active, disabled states
|
|
47
|
-
- [ ] Focus indicators are visible (`:focus-visible`, 2px outline)
|
|
48
|
-
- [ ] Touch targets are 44x44px minimum
|
|
49
|
-
- [ ] Forms have proper labels (not just placeholders)
|
|
50
|
-
- [ ] Error messages are inline and descriptive
|
|
51
|
-
- [ ] Destructive actions have confirmation or undo
|
|
52
|
-
- [ ] Loading states use skeletons (not just spinners)
|
|
53
|
-
|
|
54
|
-
## Accessibility
|
|
55
|
-
- [ ] Semantic HTML used (`<button>`, `<a>`, `<nav>`, `<main>`, etc.)
|
|
56
|
-
- [ ] All images have meaningful alt text (or `alt=""` for decorative)
|
|
57
|
-
- [ ] Keyboard navigation works throughout (Tab, Enter, Escape)
|
|
58
|
-
- [ ] Skip link exists for main content
|
|
59
|
-
- [ ] Page works at 200% zoom
|
|
60
|
-
- [ ] Color is not the only means of conveying information
|
|
61
|
-
|
|
62
|
-
## Responsive
|
|
63
|
-
- [ ] Mobile-first CSS (`min-width` queries)
|
|
64
|
-
- [ ] Tested on real mobile viewport (not just DevTools)
|
|
65
|
-
- [ ] `dvh` used with `vh` fallback for full-height sections
|
|
66
|
-
- [ ] Hover effects scoped with `@media (hover: hover)`
|
|
67
|
-
- [ ] Safe areas handled for notched devices
|
|
68
|
-
- [ ] Tables are scrollable or stacked on mobile
|
|
69
|
-
|
|
70
|
-
## Performance
|
|
71
|
-
- [ ] Hero image has `fetchpriority="high"`
|
|
72
|
-
- [ ] Below-fold images have `loading="lazy"`
|
|
73
|
-
- [ ] No barrel file imports (direct imports only)
|
|
74
|
-
- [ ] Critical CSS is inlined or prioritized
|
|
75
|
-
- [ ] Fonts are subsetted and self-hosted where possible
|
|
76
|
-
- [ ] SVGs are optimized (svgo)
|
|
77
|
-
|
|
78
|
-
## Anti-Slop Final Check
|
|
79
|
-
- [ ] The 3-Second Test: Would someone identify this as "AI-generated"?
|
|
80
|
-
- [ ] The Squint Test: Can you see hierarchy and groupings when blurred?
|
|
81
|
-
- [ ] No 3+ AI fingerprints present simultaneously
|
|
82
|
-
- [ ] At least ONE memorable design choice exists
|
|
83
|
-
- [ ] Design varies between projects (not converging on same look)
|