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.

1. 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 the best fit from the seven moodGroup values (see §Invocation) and confirm.

Step 3 — Draft the slim style spec

This becomes the designMd field of the manifest in step 5. Hold it in memory; do not write it to disk until step 5 packages it into the manifest. Mirror the structure of canonical slim specs (e.g. dot-grid-stat, pillow-block, blush-annual, neon-dashboard) — fetch one as a reference if unsure of the shape:

npx gooseworks styles get dot-grid-stat

Required sections, in this order:

1. Title (h1) — display name (Title Case).
2. Tagline paragraph — 2-3 sentences describing the aesthetic and the

signature move. End with the vibe / brand analogy.

1. ## Palette — markdown table with Hex | Role columns. Include

semi-transparent variants (rgba(...)) where the style uses them.

1. ## Typography — Google Fonts <link> block, font CSS variable

lines, then a type table with columns Role | Font | Size | Weight | Line-height | Tracking. Include rows for hero, display, body, label, caption, brand. End with a Principles sub-list (3-5 bullets).

1. ## Layout — bullet list. Must include a "Format padding" line

listing per-format padding (carousel/infographic/slides/poster/story/chart/tweet). Then 4-6 aesthetic-principle bullets.

1. ## Do / Don't — two sub-lists, 5 bullets each.
2. ## CSS snippets — :root variables block, then 1-2

ready-to-paste HTML snippets demonstrating the signature move (e.g. a hero tile, a card, a CTA pill).

Keep it under ~200 lines / 8KB. Aesthetic-only — no fixed compositions. Minimum length is 50 chars (the manifest validator's floor); the sweet spot for the catalog is 2000-6000 chars.

Step 4 — Render hero + 2-3 additional examples

Pick a hero format (the one example that best showcases the aesthetic), plus 2-3 additional formats so the catalog tile shows variety. Hero priority order:

poster > carousel > infographic > slides