picasso-skill 2.6.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.

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.6.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/visual-preview.md

@@ -10,19 +10,28 @@ Every time Picasso presents 2+ aesthetic options for the user to choose from, ge
 
 ### Standard Flow
 
-1. **Generate** a self-contained HTML file with inline styles and font imports
+1. **Generate** a self-contained HTML file with inline styles (NO external font imports -- use `system-ui` with font name labels)
 2. **Write** to `/tmp/picasso-preview-{name}.html`
-3. **Open** via Playwright MCP: `mcp__playwright__browser_navigate` to `file:///tmp/picasso-preview-{name}.html`
-4. **Screenshot** via `mcp__playwright__browser_take_screenshot`
-5. **View** the screenshot with `Read` tool (mandatory -- never skip this)
-6. **Present** to the user with the file path so they can also open it in their browser
+3. **Screenshot** via Bash: `npx playwright screenshot /tmp/picasso-preview-{name}.html /tmp/picasso-preview-{name}.png --viewport-size=1200,800`
+   - `npx playwright screenshot` accepts file paths directly (no `file://` prefix needed)
+   - Do NOT use `mcp__playwright__browser_navigate` + `mcp__playwright__browser_take_screenshot` -- these timeout on external font loading and block `file://` protocol
+4. **View** the screenshot with `Read /tmp/picasso-preview-{name}.png` (mandatory -- never skip this)
+5. **Present** to the user with both paths (HTML for full-res browser viewing, PNG for quick preview)
 
-### If Playwright MCP Is Unavailable
+### If npx playwright Is Unavailable
 
 1. Write the HTML file to `/tmp/`
 2. Tell the user: "I've generated a visual preview at `/tmp/picasso-preview-{name}.html` -- open it in your browser to see the options."
 3. Do NOT make visual claims about what the preview looks like without viewing it
 
+### Font Rule for Previews
+
+Do NOT import Google Fonts or Fontshare fonts via `<link>` or `@import` in preview HTML. External font loading causes screenshot timeouts. Instead:
+- Use `system-ui, -apple-system, sans-serif` for body text
+- Use `Georgia, serif` for serif directions
+- Use `ui-monospace, monospace` for mono directions
+- **Label the intended font** in each preview card: "Font: Satoshi + DM Sans" so the user knows what will be used in the real implementation
+
 ### File Naming
 
 - Interview aesthetics: `/tmp/picasso-interview-vibes.html`
@@ -48,9 +57,8 @@ Generate the full HTML dynamically. For each direction, substitute the actual fo
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Picasso: Choose a Direction</title>
 <!-- Import fonts for all directions shown -->
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family={FONT_1}&family={FONT_2}&family={FONT_3}&display=swap" rel="stylesheet">
+<!-- No external font imports -- use system fonts to avoid screenshot timeouts -->
+<!-- Label intended fonts in the .font-info footer of each card -->
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
   body {