Skip to main content
ClaudeWave
Skill743 repo starsupdated today

goose-graphics-create-format

This skill creates and publishes a new graphics format to the Gooseworks library by defining content rules, canvas mappings, and rendered examples. Use it when you need a named format for a specific graphic type (story cover, podcast cover, testimonial) that maps to one of seven built-in canvas sizes and inherits those dimensions, then publish via `npx gooseworks formats publish`.

Install in Claude Code
Copy
git clone --depth 1 https://github.com/gooseworks-ai/goose-skills /tmp/goose-graphics-create-format && cp -r /tmp/goose-graphics-create-format/skills/design/composites/goose-graphics-create-format ~/.claude/skills/goose-graphics-create-format
Then start a new Claude Code session; the skill loads automatically.

SKILL.md

# Create Goose Graphics Format

Authors a new graphics format and publishes it to the central Gooseworks library
via `npx gooseworks formats publish`. The output is a working directory with a
`gooseworks-format.json` manifest plus at least one rendered example PNG paired
with an existing style.

## When to use this skill

Use when the user wants a new named format with its own content rules —
a story cover, a podcast cover, a square testimonial — that maps to one
of the seven built-in canvas sizes (carousel, infographic, slides,
poster, story, chart, tweet). The new format defines new rules and a
new slug; it inherits dimensions from one of those canvases.

**Custom canvas dimensions are not supported.** If the user wants a
canvas size that isn't in the seven built-ins (e.g. LinkedIn banner
1584×396, US Letter 2550×3300), tell them honestly — that requires a
code change to the `goose-graphics` skill pack's `FORMAT_CONFIGS` and is
out of scope for this skill. Suggest the closest existing canvas
instead.

**Always check first:** run `npx gooseworks formats list` (or `formats search
"banner"` etc.) to see whether a community-published format already covers the
use case. 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 `goose-graphics/screenshot/screenshot.js` to render
  examples and pulls style specs via `npx gooseworks styles get <slug>`.
  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.

## Inputs

- A brief describing the canvas: dimensions, intended use (platform / surface),
  and content density rules.
- Optional: a reference image showing the desired layout.

## Outputs (in a working directory)

```
<working-dir>/
  gooseworks-format.json    # manifest (see "Manifest format" below)
  example-1.png             # at least one rendered example (REQUIRED)
  example-2.png             # optional; recommend 2–3 examples across styles
  example-3.png
```

The backend rejects publish with an empty `examples` array — at least one
rendered example is mandatory.

## Workflow

### Step 1 — Pick a canvas (from the fixed allow-list) and confirm intent

A new format is **a new slug + new content rules over one of the seven
built-in canvas sizes** — *not* a new canvas. Custom dimensions are not
supported: every renderer in the system (CLI screenshot tool, hub, other
agents) is locked to this allow-list, and creating a format with custom
`width`/`height` would produce something nobody can render.

Pick the canvas the new format should use:

| Canvas slug   | Dimensions | Best for                                   |
|---------------|------------|--------------------------------------------|
| `poster`      | 1080×1350  | Vertical hero composition, single panel    |
| `infographic` | 1080×var.  | Tall vertical scroll, multi-section        |
| `carousel`    | 1080×1080  | Square single panel / multi-slide          |
| `slides`      | 1920×1080  | Widescreen / presentation                  |
| `story`       | 1080×1920  | Vertical full-screen (IG/TikTok stories)   |
| `chart`       | 1080×1080  | Square data viz                            |
| `tweet`       | 1080×1080  | Square testimonial / social card           |

Then ask the user:

- Which canvas best fits the use case? (Pick from the table above.)
- What is this format for? (Surface, platform, audience.)
- What is the maximum content density? (Title length, body length, item
  counts, whether it's single-panel or multi-panel.)

The new format inherits the canvas's `width`/`height` exactly. Set the
manifest's `width`/`height` fields to the canvas's dimensions verbatim
(e.g. 1080/1350 for a poster-canvas format). Do not invent new
dimensions — the publish step will reject anything that doesn't match
one of the seven canvases.

If the user wants a canvas that isn't in the list (e.g. LinkedIn banner
1584×396), tell them honestly: that's a code change to the
`goose-graphics` skill pack's `FORMAT_CONFIGS` and is out of scope for
this skill. Suggest the closest existing canvas instead.

### Step 2 — Pick a name and slug

Suggest 2–3 descriptive names that lead with the platform / surface
(e.g., `linkedin-banner`, `story-cover`, `podcast-cover`, `event-flyer-letter`).
Slug must be lowercase-kebab-case (`[a-z0-9-]+`).

**Collision check:** run `npx gooseworks formats 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.)

### Step 3 — Draft `contentRulesMd`

This is the load-bearing field — it teaches future agents how to fill the
canvas. Cover, in this order:

- **When to use this format vs the alternatives.** One or two sentences.
- **Maximum content density.** Exact limits: title word count, body word count,
  number of items / panels / slides, whether images are required or optional.
- **Per-section content rules.** Header, body, CTA, footer — what goes where,
  what shape, what size. If the format is single-panel, list the elements
  (title, hero, byline, etc.) and their max sizes.
- **Typography signals.** Recommended display font sizes and hierarchy at this
  canvas size (e.g., "Display hero ~140–180px on a 1584×396 banner").
- **Spacing and rhythm.** Padding, margins, vertical rhythm.