goose-graphics-create-style

# 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 via:
  ```bash
  npx gooseworks install --claude --with goose-graphics
  ```
  (Swap `--claude` for `--cursor` or `--codex` as needed.) See the install
  page on the hub for the canonical command:
  https://skills.gooseworks.ai/skills/goose-graphics
- The screenshot tool's dependencies must be installed
  (`goose-graphics/screenshot/node_modules/` must exist). If not:
  ```bash
  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 pick. Slug must be
lowercase-kebab-case (`[a-z0-9-]+`).

**Collision check:** run `npx gooseworks styles get <slug>` — if the
catalog returns a hit, the slug is taken. Suggest an alternative.

(The user may omit `slug` from the manifest; the backend auto-generates
one. On 409 the CLI prompts you to accept the server's suggested slug;
pass `--yes` at publish time to auto-accept.)

If `--mood` was provided, use it. Otherwise pick