Guide · Agent skill
How to use the Ink Sketch Illustrations agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The illustration-ink-sketch skill teaches an AI agent to draw hand-inked cartoon critters and living objects as 480 by 360 pixel SVG cards, each one acting out a coding or design idea. This guide explains what an agent skill is, how to install this one, how to trigger it with plain requests, and what to check before you rely on the scripts it ships. By the end you will be able to ask for a card and know what the output should look like.
Ink Sketch IllustrationsMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the skill ZIP from our page. The skill is MIT licensed.
- 2Unzip into the skills folder. Place the folder in ~/.claude/skills/ for personal use, or in .claude/skills/ inside your project.
- 3Or upload in the Claude apps. Go to Settings → Capabilities → Skills and upload the skill there.
- 4Install Node.js. The bundled .mjs scripts need Node.js to run.
- 5Ask for a card. Describe the critter, its metaphor, the context and the 480 by 360 size in one request.
- 6Lint and preview. Run the lint script on the SVG, and render a PNG only if you have Playwright or playwright-core and Chromium set up.
What is an agent skill, and what does this one make the agent do?
An agent skill is a folder of instructions and files that an AI agent can load when a task matches it. This skill is named illustration-ink-sketch and lives in the agent-skills/illustration/illustration-ink-sketch folder of the MengTo/Skills repository. Its licence is MIT.
Once the skill is active, the agent draws a single SVG card per request. The hero is a critter or object, such as a snail, a pair of worms, a cactus or a mug, whose body carries the idea. A snail's shell can act as a loading spinner, and a worm's thin tail can act as a git branch with commit dots.
- Thick black brush-pen outlines that swell, taper and break into separate strokes
- Loose marker and watercolour fills that slip slightly past the line
- Diagonal hatching in place of solid shadows
- Huge googly eyes with two white specular dots
- Stray ink hairs and small flecks
- Colours: tomato red, leaf green, sunflower yellow, sky blue and teal on white
Install the ink sketch skill in Claude
Download the ZIP of the skill from our page, then choose one of the two install routes below.
For a personal install, unzip the folder into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder. You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.
- Personal: unzip into ~/.claude/skills/
- Project only: unzip into .claude/skills/ inside the project
- Claude apps: Settings → Capabilities → Skills, then upload the skill
Check what the skill needs before you run it
The core drawing needs only the agent itself and the skill's files. The skill ships scripts that the agent runs, and these need Node.js because they are .mjs files.
Rendering a preview to PNG is optional. It needs Playwright or playwright-core plus a Chromium browser, because the renderer launches a headless Chromium. Skip this part if you only want the SVG.
- Node.js, to run the .mjs scripts
- Playwright or playwright-core and a Chromium browser, only if you want PNG previews
- The skill runs scripts: yes
- The skill uses network: no
Trigger the skill with natural requests
The skill loads when your request matches its description. Use words like ink sketch, hand-drawn, brush pen, sketchy, doodle, marker or watercolour-cartoon, googly-eyed mascot, or critter. Name the context too, such as an empty state, onboarding, a 404 or error page, a loading state, a blog header, a feature spot or a marketing card.
The demo prompt in the skill's demo folder names the skill with a dollar sign. You can do the same to be explicit.
- Make a 404 page card: a sleepy snail on a grass patch with a sign reading page not found.
- Draw a hand-drawn blog header of two googly-eyed worms, one red and one teal.
- Create a loading state card where a slow creature sits on a progress bar.
Use $illustration-ink-sketch to draw a 480x360 SVG card titled "Bug Report": a googly-eyed ladybird holding up a tiny clipboard on a grass patch.Understand the examples and what each card should look like
The skill's demo prompt recreates three cards in one set. Slow Build shows a slow creature on a progress bar with a spinner on its body. Merge Conflict shows two branch-coloured critters clashing where their lines meet. Hello World shows a friendly object or plant greeting the viewer with hand-lettered text.
Each card should be one self-contained SVG with a viewBox of 0 0 480 360, no background rectangle, and ids prefixed to avoid clashes on a page. The output should contain no style blocks, class attributes or scripts, so it can be pasted into a page safely.
- Slow Build: loading spinner on a creature's body
- Merge Conflict: two critters where their branch lines meet
- Hello World: a friendly object or plant saying hello, world
Use the bundled scripts to lint and preview
The skill includes scripts/lint.mjs to check a card and scripts/render.mjs to preview it. The shared drawing helpers live in scripts/ink-kit.mjs, which is a seeded brush kit, so the same seed gives the same drawing. The palette and brush settings are documented in style.json and references/craft.md.
Because the scripts run on your machine, read them before you run them, especially if you work in a sensitive environment. Keep the rendering step separate if you do not want a headless browser launched.
- scripts/ink-kit.mjs: seeded brush kit used to draw each card
- scripts/lint.mjs: checks the generated card
- scripts/render.mjs: renders a PNG preview (needs Chromium)
- references/craft.md and style.json: palette, line and fill rules
Know the limits of this style
This style is deliberately sketchy and cartoonish. It is not a good fit for photographic or realistic imagery. The skill also covers only this one look. For clean outlines on people, the README points to other illustration skills in the same set, such as illustration-outlined-cartoon, illustration-two-colour-brush and illustration-grainy-gouache.
- Not for photographic or realistic images
- Not for teams that cannot run bundled scripts or a headless browser
- Pick a sibling illustration skill for people or soft, unoutlined animals
What people use it for
- Playful empty states for a product, such as an inbox with nothing in it
- Error and 404 pages with a googly-eyed mascot
- Loading screens where the critter's body shows progress
- Onboarding cards that explain a feature with a character
- Blog headers and marketing feature cards with a consistent hand-drawn look
Frequently asked questions
How do I install the illustration-ink-sketch skill?
Download the ZIP from our page and unzip it into ~/.claude/skills/ for personal use, or into .claude/skills/ in a project. In the Claude apps, you can instead upload it under Settings → Capabilities → Skills.
Is the ink sketch illustration skill free?
The skill is released under the MIT licence, as stated on its page. Check the licence file in the download for the full terms.
What do I need to run the ink sketch skill?
You need Node.js to run the .mjs scripts. Playwright or playwright-core plus a Chromium browser are needed only if you want to render PNG previews. The skill does not use the network.
Does the skill run code on my computer?
Yes. The skill ships scripts that the agent executes, and the renderer launches a headless Chromium browser. Read the scripts first if you work in a sensitive environment.
Why does my card look different from the examples?
The drawing is generated from a seeded brush kit, and the agent writes the card from your request. Ask for the palette and the 480 by 360 size explicitly, and use lint and render to check the result.
How does this compare with other illustration skills?
This skill makes thick brush-pen, googly-eyed critters with loose marker colour. The same set includes illustration-outlined-cartoon for clean outlines on people, illustration-two-colour-brush for black brush with one mint colour, and illustration-grainy-gouache for soft animals.
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 want a playful, hand-drawn look for empty states, error pages, loading screens, onboarding or blog headers, and you are comfortable running its bundled Node.js scripts. Pick a different skill if you need photographic or realistic imagery, or if your environment does not allow scripts or a headless browser.
Download the skill