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 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
- | `/typeset` | Fix typography: font choices, hierarchy clarity, sizing scale, readability (line length, line-height, contrast), OpenType features |
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
- ### Production
453
+ ### Design Debt
457
454
 
458
455
  | Command | What It Does |
459
456
  |---|---|
460
- | `/adapt` | Adapt for devices: mobile (thumb-zone), tablet (two-column), desktop (multi-column), print, email (600px, table-based) |
461
- | `/clarify` | Improve UX copy: error messages, form labels, button text, help text, empty states, confirmation dialogs |
462
- | `/optimize` | Performance: image optimization, JS bundle reduction, CSS critical path, font loading, animation 60fps, network efficiency |
463
- | `/harden` | Error handling and edge cases: text overflow, i18n (RTL, expansion), network errors, empty/loading/error states, browser compat |
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 # Core rules and workflow
180
- skills/picasso/references/anti-patterns.md # What NOT to do (always load this)
181
- skills/picasso/references/typography.md # Font selection, scales, pairing
182
- skills/picasso/references/color-and-contrast.md # OKLCH, tinted neutrals, dark mode
183
- skills/picasso/references/spatial-design.md # Spacing, grids, hierarchy
184
- skills/picasso/references/motion-and-animation.md # Easing, staggering, reduced motion
185
- skills/picasso/references/interaction-design.md # Forms, focus, loading, errors
186
- skills/picasso/references/responsive-design.md # Mobile-first, container queries
187
- skills/picasso/references/sensory-design.md # Sound, haptics
188
- skills/picasso/references/react-patterns.md # React 19, Tailwind v4, dark mode
189
- skills/picasso/references/accessibility.md # ARIA, WCAG 2.2, keyboard nav
190
- skills/picasso/references/design-system.md # DESIGN.md, theming, tokens
191
- skills/picasso/references/generative-art.md # p5.js, SVG, canvas
192
- skills/picasso/references/component-patterns.md # Naming, taxonomy, state matrix
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 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.
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 95%+ pass rate |
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
- 3. Run `/score` -- establish the **before score** (0-100). Save it.
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 5-phase technical audit with severity-ranked findings.
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 -oP 'font-family:[^;]+' | sort -u | head -10
639
- curl -s "<url>" | grep -oP '#[0-9a-fA-F]{3,8}' | sort | uniq -c | sort -rn | head -15
640
- curl -s "<url>" | grep -oP 'border-radius:[^;]+' | sort -u
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 -oP '\d+px' | sort | uniq -c | sort -rn
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
- ## /quick-audit -- 5-Minute Fast Audit
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
- ## /autorefine -- Binary Evaluation Loop
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 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.
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: 13 reference files)
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
- if (isGlobal) {
46
- skillDir = join(home, ".claude", "skills", "picasso");
47
- agentDir = join(home, ".claude", "agents");
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 (args.includes("--openclaw")) {
55
- // OpenClaw: skills live in workspace skills/ dir or ~/.openclaw/skills/
56
- const openclawGlobal = args.includes("--global") || args.includes("-g");
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.1",
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
- "checklists/",
38
+ "templates/",
39
39
  "LICENSE"
40
40
  ]
41
41
  }
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: picasso
3
- version: 2.0.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"]
@@ -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)