goose-graphics

---

name: goose-graphics description: Portable visual skill pack for the Agent Skills ecosystem (Claude Code, Claude Desktop, Claude Cowork, Claude Design, Goose, Cursor, Codex). Discovers community-published styles + formats via the gooseworks CLI, runs an extract-style workflow on reference images, and exports rendered PNGs via Playwright.

1. Overview

goose-graphics is a portable visual skill pack for the Agent Skills ecosystem. Styles and formats live in the central Gooseworks library — fetched on demand via npx gooseworks instead of bundled into this repo. The skill pairs that catalog with an extract-style workflow for reference images, an Unsplash + ASCII art image-sourcing layer, and a Playwright-based HTML-to-PNG export pipeline.

It loads in any host that reads SKILL.md — Claude Code agents calling it for automated render, Goose pipelines wiring it into content generation, Cursor/Codex projects picking it up via .cursor/rules/ or ~/.codex/skills/. Each style ships a slim DESIGN.md spec via npx gooseworks styles get <slug>, which can also be uploaded directly into Claude Design as a design-system scaffold.

Format templates, image-sourcing helpers, and the screenshot pipeline live in this skill pack. Styles, formats, and example renders are fetched on demand from the central library — no slugs are baked in.

2. Invocation

This skill supports three invocation modes — all-args, partial-args, and interactive. Pick the fastest path for the ask.

2.1 Full-args invocation (fastest path)

/goose-graphics --style <slug> --format <format> [--brief "..."] [--ref <image-path>]

• --style <slug> — any community-published style slug. Discover with npx gooseworks styles list / search. Required for style-selected generation. Omit to let the user pick interactively.
• --format <format> — any community-published format slug (e.g., carousel, story, infographic, slides, poster, chart, tweet, plus any community additions). Discover with npx gooseworks formats list. Required for format-selected generation.
• --brief "..." — the topic / content description. Replaces the Content Discovery phase.
• --ref <image-path> — if present, extract an ad-hoc style from the reference image for this single render instead of using a preset. When --ref is provided, --style is ignored. For creating a persistent published style that other agents can discover, use the dedicated /goose-graphics-create-style skill instead.

Three branches:

1. All required args present (--style + --format + --brief OR --ref + --format + --brief) → skip discovery, skip style selection, proceed directly to §7 (Set Output Path) and §8 (Generate HTML).
2. Partial args → ask only for the missing pieces. If --style is set but --format is not, ask only for format. If --brief is missing, ask only for the topic/content.
3. No args → run the interactive flow from §3 onward.

2.2 Examples

# Full args — one-shot generate
/goose-graphics --style matt-gray --format carousel --brief "How founders find their first 100 customers in 2026"

# Reference-driven — extract a one-off style from an image and build with it
/goose-graphics --ref ~/Desktop/mood.png --format poster --brief "Summer studio open house, August 14"

# Partial — Claude asks for the missing brief
/goose-graphics --style deep-ocean --format slides

# No args — full interactive flow
/goose-graphics

To create a persistent published style (slim spec + hero render + a few additional examples, pushed to the central library so other agents can discover it), use the dedicated /goose-graphics-create-style skill instead.

2.3 Defaults when args are partial but unambiguous

• If --brief is missing but clearly inferable from subsequent user text, don't block — proceed.
• If --format is missing, default to asking (there is no safe default across formats).
• If --style is missing and --ref is missing, ask — style is load-bearing.

3. Discovering styles and formats

Styles and formats live in the central Gooseworks library, not in this skill pack. Always list or search before assuming a slug exists — the catalog is community-driven and changes over time.

# List or search styles
npx gooseworks styles list
npx gooseworks styles search "warm editorial"
npx gooseworks styles list --mood "Organic & Warm" --tag warm

# Fetch a specific style's DESIGN.md (the slim spec) — pipe into Claude Design,
# or include in the agent context for HTML generation
npx gooseworks styles get <slug>

# Same shape for formats
npx gooseworks formats list
npx gooseworks formats search "vertical"
npx gooseworks formats get <slug>

When the user names a style or format, run list / search first, then get the spec for the chosen slug. Never assume a slug exists from memory — slugs come and go as the community publishes and retires entries.

4. Publishing your style

When the user creates a new aesthetic via extract-style.md (or via the dedicated /goose-graphics-create-style skill) and is happy with it, publish it to the community library so other agents and users can discover it:

cd <directory-with-rendered-examples>
npx gooseworks styles publish

The CLI expects a gooseworks-style.json manifest in the working directory plus the referenced PNG files. See §13 Manifest format for the exact shape.

4.1 Description-writing guidelines (load-bearing)

The description is what makes the style discoverable by AI agents searching the catalog. Treat it as a search index, not flavor text.

• 50–200 words, keyword-dense.
• Lead with mood + use case. "Bold magazine-cover energy for product launches and event posters."
• Mention typography signals. "Massive condensed sans-serif headlines paired with a delicate body serif."
• Mention palette signals. "Rust orange + cream + near-black."
• Mention industry / audience fit if relevant. "DTC beauty, indie publishing, event flyers."
• Avoid generic adjectives alone. "Beautiful," "modern," "clean" mean nothing without concrete signals — pair them with palette, typography, or industry context.

4.2 Tag-writing guidelines

• 3–10 lowercase tags.
• Cover: mood (warm, dark, energetic), density (sparse, dense), formality (corporate, editorial, playful), era (mid-century, y2k, retro), industry-fit (saas, dtc, beauty, finance).
• Skip tags that just restate the name.

4.3 Example count guidance

• Hero is mandatory — exactly one example marked isHero: true. Pick the format that best showcases the style.
• 2–3 additional formats recommended so the directory tile shows variety.
• Hero priority order if you can render multiple: poster > carousel > infographic > slides > chart > story > tweet.

5. Publishing your format

When the existing community-published formats don't fit the user's canvas (e.g., LinkedIn banner 1584×396, story cover 1080×1920, event flyer 8.5×11in), use the sibling /goose-graphics-create-format skill to produce a format spec and at least one rendered example, then publish:

cd <directory-with-format-bundle>
npx gooseworks formats publish

Format publishing requires at least one rendered example — the backend rejects an empty examples array. See §13 Manifest format for the exact shape of gooseworks-format.json.

Description and tag guidelines for formats follow the same rules as styles (§4.1, §4.2), but lead with dimensions + content density instead of mood:

"1080×1920 vertical canvas for Instagram and TikTok stories. Single-panel composition, 5-word title max, large hero image or stat. Use for quick announcements and engagement posts where the viewer scrolls past in 2 seconds."

6. Host compatibility

SKILL.md (this file) auto-loads on most Agent Skills hosts once the pack is installed at the right path. Claude Design is the one host that does not auto-load skill packs — instead, it consumes individual style files (DESIGN.md) one at a time via manual upload, fetched on demand via npx gooseworks styles get <slug>.

| Host | Install | Notes | |---|---|---| | Claude Code | npx gooseworks@latest install --claude --with goose-graphics | Installs with the GooseWorks skills | | Claude Desktop | (same install as above) | Desktop reads the same Claude skills | | Claude Cowork | (same install as above) | Built on Claude Desktop | | Cursor | npx gooseworks@latest install --cursor --with goose-graphics | | | Codex (OpenAI) | npx gooseworks@latest install --codex --with goose-graphics | | | Claude Design | npx gooseworks styles get <slug> → upload the resulting DESIGN.md via CD's "Create new design system" | Per-style DESIGN.md upload; no CLI sync |

7. First-Run Setup

Before first use, check whether the screenshot tool's dependencies are installed. Look for a node_modules/ directory inside the screenshot/ folder (relative to this skill file).

If node_modules/ does not exist, run:

cd [skill-pack-dir]/screenshot && npm install && npx playwright install chromium

Replace [skill-pack-dir] with the absolute path to the directory containing this SKILL.md file.

8. Interactive Workflow

1. Discover Intent   --> What format? What content?
2. Select Style      --> Pick from the catalog or extract from reference image
3. Select Sources    --> Unsplash photos? ASCII art? None?
4. Set Output Path   --> Where to save exports
5. Generate HTML     --> Using format spec + style spec + sources
6. Screenshot        --> Playwright PNG export
7. Deliver           --> Present results with file listing

9. Step 1: Discover Intent

Ask the user what they want to create. Run npx gooseworks formats list to see the current catalog. The seven baseline formats are:

| Format | Dimensions | Best For | |--------|-----------|----------| | Carousel | 1080x1080px per slide | LinkedIn, Instagram multi-slide posts | | Story | 1080x1920px per slide | Instagram/LinkedIn Stories, TikTok, Snapchat | | Infographic | 1080px wide, variable height | Social media, blog embeds | | Slides | 1920x1080px per slide | Presentations, webinars | | Poster | 1080x1350px | Instagram posts, event flyers | | Chart | 1080x1080px | Single data chart graphic | | Tweet | 1080x1080px | Tweet-sized square screenshot |

The community library may publish additional formats (story covers, podcast covers, square testimonials, etc.) — always run list first rather than assuming only the seven baseline slugs exist. Note that every community format must use one of the seven canvas sizes above (the renderer is locked to that allow-list); they differ from the baselines only in name, intent, and content rules. If no published format fits the user's needs, suggest the /goose-graphics-create-format skill.

Once the user chooses a format, fetch its full spec:

npx gooseworks formats get <format-slug>

The returned spec.md (or content rules) describes layout, content density, and per-section content rules. Follow its Content Discovery phase to gather the topic, content, and any other format-specific inputs from the user.

10. Step 2: Select Style

If the user hasn't specified a style, point them at the full catalog so they can browse visually:

Browse the style catalog at https://skills.gooseworks.ai/styles to see every published style with rendered examples.

Then run npx gooseworks styles list (or search "..." / list --mood "..." --tag ...) to surface relevant options inline. Present the candidates in groups by mood with their taglines so the user can pick.

The user may also say: "I have a reference image" — in that case, read extract-style.md (in this skill pack) and follow its workflow to derive a custom style from the provided image. That workflow ends in a publishable bundle (gooseworks-style.json + rendered PNGs) the user c