picasso-skill 1.3.2 → 1.3.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 +20 -0
- package/agents/picasso.md +82 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -445,10 +445,30 @@ Picasso ships as both a **skill** (knowledge base) and an **agent** (autonomous
|
|
|
445
445
|
| `/harden` | Error handling and edge cases: text overflow, i18n (RTL, expansion), network errors, empty/loading/error states, browser compat |
|
|
446
446
|
| `/onboard` | Design onboarding: signup friction reduction, first-run experience, progressive feature discovery, setup checklists |
|
|
447
447
|
|
|
448
|
+
### `/godmode` -- The Nuclear Option
|
|
449
|
+
|
|
450
|
+
One command. Full transformation. Interview, audit, score, roast, fix everything, verify, before/after report.
|
|
451
|
+
|
|
452
|
+
```
|
|
453
|
+
/godmode
|
|
454
|
+
|
|
455
|
+
Phase 1: Understanding your project...
|
|
456
|
+
Phase 2: Scoring... 42/100. Roasting... 🔥🔥🔥🔥
|
|
457
|
+
Phase 3: Found 23 issues. Fixing all = score ~85. Proceed? [y]
|
|
458
|
+
Phase 4: Fixing... typography ✓ color ✓ spacing ✓ a11y ✓ motion ✓ responsive ✓ perf ✓
|
|
459
|
+
Phase 5: Re-scoring... 87/100 (+45 points)
|
|
460
|
+
Phase 6: Before/after report generated.
|
|
461
|
+
|
|
462
|
+
GODMODE Complete: 42 → 87 (+45 points), 47 files modified, 23 issues fixed
|
|
463
|
+
```
|
|
464
|
+
|
|
465
|
+
---
|
|
466
|
+
|
|
448
467
|
### Creative
|
|
449
468
|
|
|
450
469
|
| Command | What It Does |
|
|
451
470
|
|---|---|
|
|
471
|
+
| `/godmode` | The ultimate command: interview + audit + score + roast + fix everything + before/after report |
|
|
452
472
|
| `/picasso` | Run the design interview -- deep discovery conversation, generates `.picasso.md` config |
|
|
453
473
|
| `/roast` | Brutally honest critique with designer-Twitter energy. Every roast includes the fix. Rated 🔥-🔥🔥🔥🔥🔥. |
|
|
454
474
|
| `/score` | Quantified 0-100 design score with category breakdown (typography, color, spacing, a11y, motion, responsive, perf, anti-slop) |
|
package/agents/picasso.md
CHANGED
|
@@ -427,6 +427,88 @@ When the user invokes these commands, execute the corresponding workflow:
|
|
|
427
427
|
| `/mood-board` | Generate visual inspiration HTML from adjectives |
|
|
428
428
|
| `/design-system-sync` | Detect and fix drift between DESIGN.md and code |
|
|
429
429
|
| `/preset <name>` | Apply a curated community design preset |
|
|
430
|
+
| `/godmode` | The ultimate command: interview + audit + score + roast + fix everything + before/after report |
|
|
431
|
+
|
|
432
|
+
## /godmode -- The Ultimate Design Transformation
|
|
433
|
+
|
|
434
|
+
`/godmode` is the nuclear option. It chains every major Picasso capability into a single end-to-end pipeline that takes a project from whatever state it's in to production-grade design quality. No shortcuts, no skipping steps.
|
|
435
|
+
|
|
436
|
+
### The Pipeline (executed in order)
|
|
437
|
+
|
|
438
|
+
**Phase 1: Understand**
|
|
439
|
+
1. Run the **design interview** (Section 1-4) if no `.picasso.md` exists. If it exists, load it.
|
|
440
|
+
2. **Gather context** -- read all frontend files, find design system, detect component library, check `.picasso.md`.
|
|
441
|
+
|
|
442
|
+
**Phase 2: Assess**
|
|
443
|
+
3. Run `/score` -- establish the **before score** (0-100). Save it.
|
|
444
|
+
4. Run `/roast` -- get the brutally honest assessment. Show it to the user.
|
|
445
|
+
5. Run `/audit` -- full 5-phase technical audit with severity-ranked findings.
|
|
446
|
+
6. Run `/a11y` -- axe-core + pa11y + Lighthouse accessibility.
|
|
447
|
+
7. Run `/perf` -- Lighthouse performance with Core Web Vitals.
|
|
448
|
+
8. Run `/lint-design` -- find all design token violations.
|
|
449
|
+
9. Run `/consistency` -- check all pages match each other.
|
|
450
|
+
10. Take **before screenshots** (desktop light, desktop dark, mobile light, mobile dark).
|
|
451
|
+
|
|
452
|
+
**Phase 3: Plan**
|
|
453
|
+
11. Compile all findings into a prioritized fix list, grouped by impact:
|
|
454
|
+
- **Critical** (score impact: +10-20): a11y violations, anti-slop fingerprints, broken responsive
|
|
455
|
+
- **High** (score impact: +5-10): typography issues, color problems, spacing inconsistencies
|
|
456
|
+
- **Medium** (score impact: +2-5): motion improvements, interaction state gaps, performance
|
|
457
|
+
- **Low** (score impact: +1-2): polish items, micro-interactions, copy improvements
|
|
458
|
+
12. Present the plan to the user: "Here are 23 issues. Fixing all of them will take your score from 42 to ~85. Shall I proceed?"
|
|
459
|
+
13. **Wait for confirmation.** Never proceed without a "go."
|
|
460
|
+
|
|
461
|
+
**Phase 4: Fix**
|
|
462
|
+
14. Execute fixes in priority order (Critical -> High -> Medium -> Low):
|
|
463
|
+
- Typography: replace banned fonts, fix type scale, set max-width, correct line-heights
|
|
464
|
+
- Color: replace pure black/gray, tint neutrals, fix contrast ratios, apply 60-30-10
|
|
465
|
+
- Spacing: normalize to 4px scale, fix Gestalt grouping, add breathing room
|
|
466
|
+
- Layout: break uniform card grids, add spatial surprises, vary section rhythm
|
|
467
|
+
- Motion: add staggered entrance, fix transition:all, add reduced-motion support
|
|
468
|
+
- Accessibility: fix axe violations, add focus-visible, add ARIA, fix semantic HTML
|
|
469
|
+
- Interaction: add all 8 states, fix form labels, add loading/empty/error states
|
|
470
|
+
- Performance: add lazy loading, set image dimensions, optimize font loading
|
|
471
|
+
- Copy: replace generic headlines, fix button labels, improve error messages
|
|
472
|
+
15. After each category, re-run the relevant checks to verify the fix worked.
|
|
473
|
+
|
|
474
|
+
**Phase 5: Verify**
|
|
475
|
+
16. Run `/score` again -- establish the **after score**.
|
|
476
|
+
17. Take **after screenshots** (same 4 viewports).
|
|
477
|
+
18. Run `/before-after` -- generate the visual comparison report.
|
|
478
|
+
19. Run `/a11y` and `/perf` again to confirm improvements.
|
|
479
|
+
|
|
480
|
+
**Phase 6: Report**
|
|
481
|
+
20. Present the final report:
|
|
482
|
+
|
|
483
|
+
```
|
|
484
|
+
## GODMODE Complete
|
|
485
|
+
|
|
486
|
+
Before: 42/100 → After: 87/100 (+45 points)
|
|
487
|
+
|
|
488
|
+
Typography: 6/15 → 14/15 (+8)
|
|
489
|
+
Color: 5/15 → 13/15 (+8)
|
|
490
|
+
Spacing: 4/10 → 9/10 (+5)
|
|
491
|
+
Accessibility: 8/20 → 19/20 (+11)
|
|
492
|
+
Motion: 3/10 → 8/10 (+5)
|
|
493
|
+
Responsive: 6/10 → 9/10 (+3)
|
|
494
|
+
Performance: 5/10 → 8/10 (+3)
|
|
495
|
+
Anti-Slop: 5/10 → 7/10 (+2)
|
|
496
|
+
|
|
497
|
+
Changes made: 47 files modified
|
|
498
|
+
Issues fixed: 23 (8 critical, 7 high, 5 medium, 3 low)
|
|
499
|
+
Time: ~12 minutes
|
|
500
|
+
|
|
501
|
+
Before/after report: /tmp/picasso-before-after.html
|
|
502
|
+
```
|
|
503
|
+
|
|
504
|
+
### Godmode Rules
|
|
505
|
+
|
|
506
|
+
- **Always ask before proceeding.** Show the plan, get confirmation.
|
|
507
|
+
- **Fix in priority order.** Critical first, low last. If the user says "stop" at any point, stop and report what was done so far.
|
|
508
|
+
- **Never break working functionality.** If a fix might break something, flag it and ask.
|
|
509
|
+
- **Re-verify after every category.** Don't stack fixes without checking they work.
|
|
510
|
+
- **The before/after report is mandatory.** The user must be able to see and share the transformation.
|
|
511
|
+
- **If the before score is already 85+**, say so: "This is already in great shape. Here are the 3-4 things that would take it to 95+." Don't force a full pipeline on a polished project.
|
|
430
512
|
|
|
431
513
|
## Creative Commands
|
|
432
514
|
|