/goose-graphics-create-style

name: goose-graphics-create-style
description: >
  End-to-end skill that turns a single reference image into a published
  Gooseworks style — analyzes the image, drafts the slim style spec, renders
  a hero example plus 2-3 additional formats via Playwright, writes the
  `gooseworks-style.json` manifest, and publishes via
  `npx gooseworks styles publish` so other agents can discover it. Mirrors
  goose-graphics-create-format but for styles.

Create Goose Graphics Style

Authors a new graphics style and publishes it to the central Gooseworks library via `npx gooseworks styles publish`. The output is a working directory with a `gooseworks-style.json` manifest plus a hero rendered example and 2-3 additional examples that demonstrate the aesthetic flexing across formats.

When to use this skill

Use when the user has a reference image and wants the aesthetic available as a reusable, discoverable style — so any future `/goose-graphics --style <slug> --format <any>` call can render against it.

**Always check first:** run `npx gooseworks styles list` (or `npx gooseworks styles search "warm editorial"`) to see whether a community-published style already covers the look. If one fits, just use it via the regular `goose-graphics` flow.

Prerequisites

• The `goose-graphics` skill must be installed in the same workspace —

this skill uses its `screenshot/screenshot.js` to render examples. Install it by pasting this into your agent:

  Install gooseworks: https://gooseworks.ai/install.md including the goose-graphics skill

Or run it yourself: `npx gooseworks@latest install --all --mcp --with goose-graphics`.

• The screenshot tool's dependencies must be installed

(`goose-graphics/screenshot/node_modules/` must exist). If not:

  cd <path-to>/goose-graphics/screenshot && npm install && npx playwright install chromium

• The user must be signed in to Gooseworks (`npx gooseworks login`) for

`publish` to authenticate.

Invocation

/goose-graphics-create-style --ref <image-path> [--name <slug>] [--mood <mood-group>]

• `--ref <image-path>` (required) — path to the reference image

(PNG/JPG/WebP).

• `--name <slug>` (optional) — desired style slug in lowercase-kebab-case

(e.g., `pillow-block`, `neon-dashboard`). If omitted, propose 2-3 candidate names after analyzing the image and ask the user to pick.

• `--mood <mood-group>` (optional) — which `moodGroup` the style belongs

to. One of: `Dark & Moody`, `Light & Editorial`, `Organic & Warm`, `Bold & Energetic`, `Retro & Cinematic`, `Structural & Technical`, `Friendly Corporate`. If omitted, infer from the image and confirm.

If the user says "I want a new style for goose-graphics" without args, ask for the reference image path first, then proceed.

Outputs (in a working directory)

<working-dir>/
  gooseworks-style.json   # manifest (see "Manifest format" below)
  poster.png              # hero example (REQUIRED — exactly one with isHero: true)
  carousel.png            # additional examples (recommend 2-3 across formats)
  infographic.png
  ...

The backend rejects `publish` with an empty `examples` array or with no hero — exactly one example must be marked `isHero: true`.

Standard Brief

All examples are generated using the same brief used by the rest of the catalog, so users can compare styles apples-to-apples:

> **Brief:** `5 Tips for Building a Startup in 2026` > > **Tips (use these verbatim, adapt phrasing per style voice):** > 1. Ship fast, learn faster > 2. Build AI into the core > 3. Hire for leverage, not headcount > 4. Obsess over 10 users before 10,000 > 5. Revenue beats runway

Always use this brief. Do not invent your own — it makes the catalog inconsistent.

Workflow

Step 1 — Receive & analyze the image

1. Read the image with the `Read` tool (it supports PNG/JPG/WebP natively). 2. Work through this analysis checklist explicitly. **Write the analysis out in plain text before moving on** — do not skip ahead.

**Palette** — identify 3-6 dominant colors. For each, propose a hex value in the right family (you cannot extract exact hex; pick well-balanced values). Classify each by role: background/canvas, primary surface, accent, secondary accent, text, muted text, borders/dividers, any neon/highlight color.

**Typography** — heading face (serif / sans / slab / mono), body face (same or different family), weight range, tracking (negative / normal / positive), line-height (tight / generous), overall feel (geometric / humanist / elegant / technical / rounded / condensed). Map to a Google Fonts equivalent (Inter, Fraunces, Playfair Display, Space Grotesk, IBM Plex Mono, etc.).

**Layout & shape language** — corner radius (sharp / 12px / 28px squircle / pill / circle), borders (yes / no), shadows (yes / no / subtle), tile density, alignment, whether elements overlap.

**Signature visual moves** — what makes this style THIS style? Examples: "pillowy 28px squircle tiles with hero numerals bottom-right", "blush canvas + oversized black serif money stats", "dark jewel surfaces + neon pink pill labels". Lead with these — they differentiate the style across formats.

**Mood / category** — dark/light, calm/loud, premium/playful. Use this to pick the `moodGroup` if not provided.

3. **Critical separation of concerns:** A style is an aesthetic SYSTEM (palette + typography + signature visual moves) that flexes across all formats. It is NOT a fixed composition. If your analysis describes "5 cards in a bento grid" or "3 vertical insight cards," you are mixing format into style. Re-frame in terms of palette, typography, and signature visual moves that any format can adopt.

Step 2 — Pick name, slug, and moodGroup

If `--name` was provided, use it. Otherwise propose 2-3 candidates derived from the signature moves (e.g. `pillow-block`, `pastel-ledger`, `neon-dashboard`) and ask the user to p