Skip to content

Guide · Agent skill

How to use the Grainy Gouache Animal Illustrations agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The illustration-grainy-gouache skill lets an AI agent draw original cosy animal scenes as hand-authored SVG cards, 480 by 360 pixels, in a grainy, risograph-like gouache style. This guide is for readers who have not used agent skills before. By the end you will know what the skill does, how to install it, how to ask for a card in a way that triggers it, and what it needs to run.

Grainy Gouache Animal IllustrationsMengTo/Skills · MIT

Quick start

  1. 1Download the ZIP. Download the illustration-grainy-gouache skill as a ZIP from this page.
  2. 2Unzip into a skills folder. Place the illustration-grainy-gouache folder in ~/.claude/skills/ for personal use, or in .claude/skills/ inside a project.
  3. 3Or upload it in the Claude apps. Open Settings, go to Capabilities, then Skills, and upload the ZIP.
  4. 4Write a natural request. Ask for one animal on a hot-pink card doing one design or coding action, using words like grainy, cosy or storybook.
  5. 5Add props and a use case. Name three to five props from the skill's vocabulary and the place the card will appear, such as an empty state or 404 page.
  6. 6Review the SVG. Open the 480 by 360 SVG and check the style. Optionally run the included scripts to lint or render a PNG.

What an agent skill is and what this one makes

An agent skill is a folder of instructions, reference files and optional scripts that an AI agent can load when a request matches its description. This one is named illustration-grainy-gouache and is MIT licensed.

When it is active, the agent draws one cute animal, such as a fox, otter or owl, doing a design or coding task on a saturated hot-pink card. The artwork is written as a single SVG file. Its identifying traits are flat shapes with no outlines, soft gradient shading on rounded forms, a fine dark grain along shape edges, a chalky purple-pink shadow under the group, and big glossy eyes with cream star highlights, framed by autumn leaves and cream sparkles.

  • Output: one SVG card, 480 by 360
  • Subjects: animals only, one animal per card, at a laptop, monitor, desk, window, mug or book stack
  • Best suited to: empty states, onboarding steps, 404 pages, blog headers, feature spots and marketing cards with a warm handmade feel

Install the skill from the ZIP

Download the ZIP of the skill from this page. Unzip it so the illustration-grainy-gouache folder sits in one of two places. For a personal setup, use ~/.claude/skills/. For a single project, use the .claude/skills/ folder inside that project.

You can also upload the skill in the Claude apps. Open Settings, then Capabilities, then Skills, and add the ZIP there.

  • Personal install: ~/.claude/skills/illustration-grainy-gouache
  • Project install: .claude/skills/illustration-grainy-gouache inside your project
  • Claude apps: Settings → Capabilities → Skills

Ask for a card with natural wording

You do not need a special command. The skill loads when your request uses words from its description, such as grainy, gouache, riso, risograph, textured, cosy, cozy, autumn, hygge, storybook or children's-book style animal art. It also loads for requests for an empty state, onboarding step, 404 page, blog header, feature spot or marketing card with a warm handmade feel.

Name the animal and one clear design or coding action. Adding three to five props helps, because the skill's style uses a set vocabulary of props. Here is a minimal prompt from the skill's demo:

  • Name one animal. The skill does not draw people.
  • Describe one action, such as fixing a bug or reviewing a commit.
  • Pick props from the scene types it covers: laptop, monitor, desk, window, mug, book stack.
Use $illustration-grainy-gouache to draw a 480x360 SVG card of a raccoon in a beanie fixing a bug on a laptop at a cosy desk.

Understand the style rules you will get

The skill keeps the artwork consistent. Shapes are filled, never outlined. Every large form uses a light-to-dark gradient rather than one flat colour, and a fine grain thickens at edges. The background is always the hot-pink card colour, and the palette is limited to the values listed in its style file.

These rules matter if you plan to change the look. The skill says that removing the edge grain makes the art plain flat vector, and that changing the pink takes it out of the set. Other styles exist for flat vector, hand-inked critters and outlined cartoon people, and the skill points you to them when a brief does not fit.

  • No outlines around shapes
  • No background other than hot pink
  • No human characters
  • Cream sparkles and autumn leaves as decor

Run the included scripts and render a PNG (optional)

The skill folder includes scripts/gouache.mjs, scripts/lint.mjs and scripts/render.mjs, plus a style.json file that lists the legitimate palette values. The lint script is meant to check artwork against the style rules, and the render script can turn the SVG into a PNG preview. The source does not give exact command lines, so check the script headers before running them.

Rendering a PNG needs Playwright or playwright-core and a Chromium browser. Those are only required for the preview step. The SVG itself does not need them.

  • Node.js is required to run the scripts
  • Playwright or playwright-core plus Chromium is required only for PNG rendering
  • The scripts do not use the network

Tips for better results

Keep each card to one animal and one coding moment. The skill's examples follow that pattern: a fox curled on a laptop with a commit graph, an otter on a rainy sill with a diff on its laptop, and an owl beside a monitor reading a clock time. Asking for several scenes in one card tends to work against the style.

If you need a person, a flat vector image, or a colour other than hot pink, pick a different style. The skill is not a fit for those briefs.

  • Use the examples in the skill's examples folder as a reference for what good output looks like.
  • Say which card use it is for, such as a 404 page or blog header, so the layout suits the purpose.
  • Ask the agent to check the SVG against the style rules before you use it.

What people use it for

  • A warm 'we're working on it' page with a fox at a laptop and autumn leaves
  • An onboarding step showing an otter with a mug beside a monitor
  • A seasonal blog header with an owl on a desk lamp and sticky notes
  • A 404 page where a rabbit reads a book stack beside an open laptop
  • A marketing feature card with a consistent storybook look across a series

Frequently asked questions

Is the Grainy Gouache skill free to use?

The skill is published under the MIT licence, as stated on this page. Check the licence file in the downloaded ZIP for the full terms before using the artwork commercially.

What do I need to install the illustration-grainy-gouache skill?

You need the skill ZIP from this page and a place to unzip it, either ~/.claude/skills/ or a project's .claude/skills/ folder. You can also upload the ZIP in the Claude apps under Settings → Capabilities → Skills.

Do I need Node.js or Playwright to use it?

Node.js is needed to run the included scripts. Playwright or playwright-core and a Chromium browser are only needed to render PNG previews, so the SVG output works without them.

Does the skill use the internet?

No. The skill is listed as not using the network, but it does run scripts, so review them before running.

Can it draw people or photorealistic images?

No. The style has no human characters and only draws animals such as fox, otter, owl, rabbit or hedgehog. For people, use the other illustration styles the skill points to.

How is this different from a flat vector illustration skill?

This style adds fine dark grain along shape edges, soft gradient shading and a hot-pink card. The skill notes that flat vector has no texture and no animals, so it is a different look for a different brief.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this skill if you need a warm, handmade-feeling animal illustration for an empty state, 404 page, onboarding step or seasonal header, and you are happy with a hot-pink card. Pick a different skill if you need people, photorealism, flat vector, or a brand colour other than pink.

Download the skill