picasso-skill 2.5.0 → 2.6.1

package/agents/picasso.md

@@ -83,7 +83,7 @@ This is what makes Picasso different from every other design tool. Generate a ga
 
 5. Also generate a single `/tmp/picasso-gallery/index.html` that shows a thumbnail grid of all samples -- each as a small card (200px wide) with the sample number and the key differentiator (font name + primary color + one-word mood).
 
-6. Open the index page with Playwright MCP, screenshot at 1440x900, view with Read.
+6. Screenshot via Bash: `npx playwright screenshot /tmp/picasso-gallery/index.html /tmp/picasso-gallery.png --viewport-size=1200,800`. View: `Read /tmp/picasso-gallery.png`.
 
 7. Present: "Here are {N} directions for your app. React to what you see -- which ones do you like? Which do you hate? Anything close but needs tweaking? You can also open `/tmp/picasso-gallery/index.html` in your browser to browse them all."
 
@@ -158,7 +158,7 @@ Do NOT jump to code. Present a **Design Brief** -- a short, opinionated creative
    - Generate a self-contained HTML page showing a representative layout in the committed design tokens (nav + hero + card + buttons + input)
    - Use the Full Page Mood Preview structure from `references/visual-preview.md`
    - Write to `/tmp/picasso-brief-preview.html`
-   - Open with Playwright MCP, screenshot, view with Read
+   - Screenshot via Bash: `npx playwright screenshot /tmp/picasso-brief-preview.html /tmp/picasso-brief-preview.png --viewport-size=1200,800`. View with `Read`.
    - Present alongside the text brief: "Here's what I'm proposing -- the reasoning and a visual preview."
 
 4. **Generate `.picasso.md`** from the answers and save to project root.
@@ -169,7 +169,7 @@ Do NOT jump to code. Present a **Design Brief** -- a short, opinionated creative
 
 After the user confirms the brief, load the SPECIFIC reference files for what they selected. Do not load all 30+ references. Load only what's relevant:
 
-- Selected motion Tier 2+? Load `motion-and-animation.md` + `micro-interactions.md` + `animation-performance.md`
+- Selected motion Tier 2+? Load `motion-and-animation.md` + `micro-interactions.md`
 - Selected sounds? Load `sensory-design.md` (Section 1: UI Sound Design)
 - Selected haptics? Load `sensory-design.md` (Section 2: Haptic Feedback)
 - Selected animated icons? Load `micro-interactions.md` (Section 5: Toggle and Switch Animations)
@@ -288,10 +288,8 @@ 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/motion-and-animation.md    # Easing, staggering, duration, performance (compositor props, will-change, contain)
 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

package/commands/mood.md

@@ -35,7 +35,8 @@ If no mood word is provided, ask the user for one.
      - Footer with muted text
    - Load fonts using the Font Mapping table from `references/visual-preview.md`
    - Write to `/tmp/picasso-mood-{word}.html`
-   - Open via Playwright MCP, screenshot at 1440x900, view with Read tool
+   - Screenshot via Bash: `npx playwright screenshot /tmp/picasso-mood-{word}.html /tmp/picasso-mood-{word}.png --viewport-size=1200,800`
+   - View: `Read /tmp/picasso-mood-{word}.png`
    - Present to user: "This is what '{word}' looks like as a design system. Does this feel right, or should I adjust?"
 
 3. **Wait for confirmation.** Do not write `.picasso.md` or `DESIGN.md` until the user approves the visual direction.
@@ -48,4 +49,4 @@ If no mood word is provided, ask the user for one.
 
 - Never write config files before showing the visual preview
 - If the user says "adjust" or "not quite", iterate on the tokens and regenerate the preview
-- If Playwright MCP is unavailable, write the HTML and tell user the path to open manually
+- If npx playwright is unavailable, write the HTML and tell user the path to open manually

package/commands/preset.md

@@ -21,7 +21,7 @@ The preset name: `$ARGUMENTS`
    - Each card: preset name (in its heading font), 5-swatch color palette strip, one-line mood description, a sample button in the preset's primary color and radius
    - Card backgrounds use the preset's surface color, text uses its text color
 3. Write to `/tmp/picasso-preset-browser.html`
-4. Open with Playwright MCP, screenshot at 1440x900, view with Read
+4. Screenshot via Bash: `npx playwright screenshot /tmp/picasso-preset-browser.html /tmp/picasso-preset-browser.png --viewport-size=1200,800`, then view with `Read`
 5. Present: "Here are all 22 presets. Which one catches your eye?"
 6. Wait for the user to pick
 
@@ -41,4 +41,4 @@ The preset name: `$ARGUMENTS`
 ## Rules
 
 - Never apply a preset without showing a visual preview first
-- If Playwright MCP is unavailable, write the HTML and give the user the file path
+- If npx playwright is unavailable, write the HTML and give the user the file path

package/commands/preview.md

@@ -24,8 +24,8 @@ Generate and display visual previews of design options.
    - Nav bar, hero section, card grid, form, footer
    - All styled with the project's committed tokens
 5. Write to `/tmp/picasso-preview.html`
-6. Open via Playwright MCP (`mcp__playwright__browser_navigate` to `file:///tmp/picasso-preview.html`)
-7. Screenshot at 1440x900, view with Read tool
+6. Screenshot via Bash: `npx playwright screenshot /tmp/picasso-preview.html /tmp/picasso-preview.png --viewport-size=1200,800`
+7. View: `Read /tmp/picasso-preview.png`
 8. Present to user: "Here's what your current design tokens look like rendered. Open `/tmp/picasso-preview.html` in your browser for full resolution."
 
 ### `/preview <preset-name>`
@@ -47,6 +47,6 @@ Generate and display visual previews of design options.
 ## Rules
 
 - Always load font URLs from the Font Mapping table in `references/visual-preview.md`
-- If Playwright MCP is unavailable, write the file and tell the user the path to open manually
+- If npx playwright is unavailable, write the file and tell the user the path to open manually
 - Never describe what the preview looks like without viewing the screenshot first
 - The HTML must be fully self-contained (inline styles, external font imports only)

package/commands/variants.md

@@ -21,9 +21,8 @@ Generate 2-3 genuinely different aesthetic directions and show them as a side-by
    - For each direction, render a preview card showing: color palette strip, nav bar, heading, body text, sample card, primary/secondary buttons, input field -- all in that direction's tokens
    - Load fonts using the Font Mapping table from `references/visual-preview.md`
    - Write the comparison HTML to `/tmp/picasso-variants.html`
-   - Open via Playwright MCP: `mcp__playwright__browser_navigate` to `file:///tmp/picasso-variants.html`
-   - Screenshot at 1440x900 viewport
-   - View the screenshot with the Read tool
+   - Screenshot via Bash: `npx playwright screenshot /tmp/picasso-variants.html /tmp/picasso-variants.png --viewport-size=1200,800`
+   - View the screenshot: `Read /tmp/picasso-variants.png`
 6. Present the visual comparison to the user: "Here are the directions. Which speaks to you? Pick one, combine elements, or reject all."
 7. Also tell the user: "Open `/tmp/picasso-variants.html` in your browser for full resolution."
 
@@ -33,5 +32,5 @@ Generate 2-3 genuinely different aesthetic directions and show them as a side-by
 - No two directions can share the same heading font
 - At least one direction must be surprising or unconventional
 - Always include one "safe" option and one "bold" option
-- Visual preview is MANDATORY, not optional. If Playwright MCP is unavailable, write the HTML file and tell the user the path to open manually.
+- Visual preview is MANDATORY, not optional. If npx playwright is unavailable, write the HTML file and tell the user the path to open manually.
 - Never describe what the directions look like without viewing the screenshot first

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picasso-skill",
-  "version": "2.5.0",
+  "version": "2.6.1",
   "description": "The ultimate AI design skill for producing distinctive, production-grade frontend interfaces",
   "bin": {
     "picasso-skill": "./bin/install.mjs"

package/references/accessibility-wcag.md

@@ -86,6 +86,9 @@ Move focus to `<h1>` of new view (add `tabindex="-1"`) or main content landmark.
 <main id="main" tabindex="-1">...</main>
 ```
 
+### Focus Indicator Rule
+Never remove focus outlines without replacement. Use `:focus-visible` (not `:focus`) to show focus rings only for keyboard navigation, not mouse clicks.
+
 ### Focus Trapping
 Contain Tab/Shift+Tab within overlays. Use `inert` attribute on background content (modern browsers) or manage via JS. On last focusable element, Tab wraps to first.
 

package/references/code-typography.md

@@ -1,16 +1,5 @@
 # Code Typography Reference
 
-## Table of Contents
-1. Monospace Font Selection
-2. Code Block Design
-3. Syntax Highlighting Accessibility
-4. Copy-to-Clipboard
-5. Responsive Code Blocks
-6. Inline Code Styling
-7. Diff Views
-8. Terminal Output
-9. Common Mistakes
-
 ---
 
 ## 1. Monospace Font Selection
@@ -19,204 +8,85 @@
 |---|---|---|---|
 | JetBrains Mono | Yes | Clean, geometric | General purpose, IDEs |
 | Fira Code | Yes | Slightly rounded | Tutorials, docs |
-| Source Code Pro | No | Adobe, professional | Enterprise, clean look |
+| Source Code Pro | No | Adobe, professional | Enterprise |
 | IBM Plex Mono | No | Corporate, legible | Documentation |
 | Geist Mono | No | Vercel, modern | Next.js projects |
 | Cascadia Code | Yes | Microsoft, playful | Terminals |
 
-```css
-code, pre, .mono {
-  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
-  font-feature-settings: 'liga' 1, 'calt' 1; /* enable ligatures */
-  font-variant-ligatures: common-ligatures;
-}
-```
-
-Ligatures: `=>` becomes ⇒, `!==` becomes ≢, `>=` becomes ≥. Enable for display, disable for editing if users copy code.
+Always specify a modern monospace font first, then fallback to `monospace`. Enable ligatures with `font-feature-settings: 'liga' 1, 'calt' 1` for display; disable for editing if users copy code.
 
 ---
 
 ## 2. Code Block Design
 
-```css
-pre {
-  background: var(--surface-1);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 1rem 1.25rem;
-  font-size: 0.875rem;    /* 14px — slightly smaller than body */
-  line-height: 1.65;       /* Looser than body text for readability */
-  overflow-x: auto;
-  tab-size: 2;
-  -moz-tab-size: 2;
-}
-
-/* Dark mode code blocks on light sites */
-[data-theme="light"] pre {
-  background: oklch(0.14 0.02 230);
-  color: oklch(0.90 0.01 230);
-}
-```
-
-Line numbers (optional):
-```css
-pre.line-numbers {
-  counter-reset: line;
-  padding-left: 3.5rem;
-  position: relative;
-}
-pre.line-numbers .line::before {
-  counter-increment: line;
-  content: counter(line);
-  position: absolute;
-  left: 1rem;
-  color: var(--text-muted);
-  font-size: 0.75rem;
-  user-select: none; /* don't copy line numbers */
-}
-```
+- Background: `var(--surface-1)` with 1px border, 8px radius
+- Font size: 0.875rem (14px), line-height: 1.65 (looser than body for readability)
+- `overflow-x: auto; tab-size: 2`
+- Dark code blocks on light sites: `oklch(0.14 0.02 230)` background
+- Line numbers: use CSS counters with `user-select: none` so they don't get copied
 
 ---
 
 ## 3. Syntax Highlighting Accessibility
 
-Every token color must have **minimum 3:1 contrast** against the code block background. Don't rely on color alone — use font-weight or font-style for emphasis.
+Every token color must have **minimum 3:1 contrast** against the code block background. Don't rely on color alone; use font-weight or font-style for emphasis.
 
-| Token Type | Suggested OKLCH (dark bg) | Purpose |
+| Token Type | Suggested OKLCH (dark bg) | Style |
 |---|---|---|
-| Keywords | `oklch(0.75 0.15 300)` | purple-ish, bold |
-| Strings | `oklch(0.72 0.14 150)` | green |
-| Numbers | `oklch(0.75 0.12 60)` | amber |
-| Comments | `oklch(0.50 0.01 230)` | muted, italic |
-| Functions | `oklch(0.78 0.10 230)` | blue |
-| Variables | `oklch(0.85 0.01 230)` | near-white |
-
-```css
-.token-keyword { color: oklch(0.75 0.15 300); font-weight: 600; }
-.token-string { color: oklch(0.72 0.14 150); }
-.token-comment { color: oklch(0.50 0.01 230); font-style: italic; }
-```
+| Keywords | `oklch(0.75 0.15 300)` | bold |
+| Strings | `oklch(0.72 0.14 150)` | normal |
+| Numbers | `oklch(0.75 0.12 60)` | normal |
+| Comments | `oklch(0.50 0.01 230)` | italic |
+| Functions | `oklch(0.78 0.10 230)` | normal |
+| Variables | `oklch(0.85 0.01 230)` | normal |
 
 ---
 
 ## 4. Copy-to-Clipboard
 
-Position: top-right corner of the code block. Show on hover. Provide visual feedback.
-
-```jsx
-function CopyButton({ code }) {
-  const [copied, setCopied] = useState(false);
-
-  return (
-    <button
-      onClick={() => {
-        navigator.clipboard.writeText(code);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
-      }}
-      className="absolute top-2 right-2 p-1.5 rounded-md bg-white/5 hover:bg-white/10 text-xs text-muted"
-      aria-label="Copy code"
-    >
-      {copied ? 'Copied' : 'Copy'}
-    </button>
-  );
-}
-```
+Position top-right, show on hover, visual feedback ("Copied" for 2s). Use `navigator.clipboard.writeText()`. Add `aria-label="Copy code"`.
 
 ---
 
 ## 5. Responsive Code Blocks
 
-Code blocks should **scroll horizontally** on mobile, never wrap. Terminal output CAN wrap.
-
-```css
-pre {
-  overflow-x: auto;
-  white-space: pre;         /* code: no wrap */
-  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
-}
-
-pre.terminal {
-  white-space: pre-wrap;    /* terminal: wrap is OK */
-  word-break: break-all;
-}
-
-/* Hide scrollbar but keep functionality */
-pre::-webkit-scrollbar { height: 4px; }
-pre::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
-```
-
-On very small screens (< 375px), consider reducing code font-size to 12px.
+- Code: `white-space: pre; overflow-x: auto` (never wrap)
+- Terminal output: `white-space: pre-wrap` (wrapping OK)
+- Thin scrollbar: 4px height, subtle thumb color
+- Below 375px, consider reducing to 12px font size
 
 ---
 
 ## 6. Inline Code Styling
 
-Inline code needs subtle visual distinction from body text:
-
-```css
-code:not(pre code) {
-  background: var(--surface-2);
-  padding: 0.15em 0.4em;
-  border-radius: 4px;
-  font-size: 0.9em;        /* slightly smaller than surrounding text */
-  font-weight: 500;
-  border: 1px solid var(--border);
-}
-```
-
-Never use inline code for emphasis. It's for code references (`useState`, `border-radius`, `GET /api/users`), not for highlighting words.
+Subtle distinction from body text: light background, 0.15em/0.4em padding, 4px radius, 0.9em font-size, 1px border. Never use inline code for emphasis; it's for code references (`useState`, `GET /api/users`).
 
 ---
 
 ## 7. Diff Views
 
-Use color + icon, not color alone (colorblind users):
-
-```css
-.diff-add {
-  background: oklch(0.62 0.19 150 / 0.1);
-  border-left: 3px solid oklch(0.62 0.19 150);
-}
-.diff-add::before { content: '+'; color: oklch(0.62 0.19 150); }
-
-.diff-remove {
-  background: oklch(0.55 0.22 25 / 0.1);
-  border-left: 3px solid oklch(0.55 0.22 25);
-  text-decoration: line-through;
-  opacity: 0.7;
-}
-.diff-remove::before { content: '-'; color: oklch(0.55 0.22 25); }
-```
+Use color + icon (not color alone, for colorblind users):
+- Added: green-tinted background + left border + `+` prefix
+- Removed: red-tinted background + left border + `-` prefix + `line-through` + reduced opacity
 
 ---
 
 ## 8. Terminal Output
 
-Terminal/console styling should feel distinct from code:
-
-```css
-.terminal {
-  background: oklch(0.08 0.01 230);
-  color: oklch(0.80 0.01 150); /* slight green tint for terminal feel */
-  font-family: 'JetBrains Mono', monospace;
-  padding: 1rem;
-  border-radius: 8px;
-}
-.terminal .prompt { color: oklch(0.65 0.10 230); } /* blue prompt */
-.terminal .output { color: oklch(0.75 0.01 230); } /* neutral output */
-.terminal .error { color: oklch(0.65 0.22 25); }   /* red errors */
-```
+Terminal styling should feel distinct from code blocks:
+- Darker background: `oklch(0.08 0.01 230)`
+- Slight green tint for text: `oklch(0.80 0.01 150)`
+- Blue prompt, neutral output, red errors
 
 ---
 
 ## 9. Common Mistakes
 
-- **Code font too large.** 14px for blocks, 0.9em for inline. Larger fights with body text.
-- **No horizontal scroll on code blocks.** Wrapping code breaks readability. Always `overflow-x: auto`.
-- **Syntax colors with < 3:1 contrast.** Comments especially — they tend to be too faint.
-- **Color-only diff indication.** Always add + / - markers or icons alongside color.
-- **Copying includes line numbers.** Use `user-select: none` on line number elements.
-- **Same styling for code blocks and terminal.** They serve different purposes. Terminal gets darker bg, green tint.
-- **`font-family: monospace` without named fonts.** Browsers default to Courier New which looks dated. Always specify a modern monospace font first.
-- **No copy button.** Users shouldn't have to triple-click and drag to copy code.
+- Code font too large (14px for blocks, 0.9em for inline)
+- No horizontal scroll on code blocks
+- Syntax colors with < 3:1 contrast (especially comments)
+- Color-only diff indication (add +/- markers)
+- Copying includes line numbers (use `user-select: none`)
+- Same styling for code blocks and terminal (different purposes)
+- `font-family: monospace` without named fonts (defaults to Courier New)
+- No copy button