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`.
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-formatSKILL.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.
>
AI video conversations - create real-time video calls with AI personas
AI-powered web scraping - extract data using natural language prompts
Search Amazon products - find items, compare prices, read reviews
Test and document API endpoints - validate responses, check status, generate examples
>
>
Brand intelligence - logos, colors, fonts, styleguides, and company data from any domain