Skip to content
Get packs

Guide · Agent skill

How to use the Outlined Cartoon Illustrations agent skill

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

This guide explains how to install and use the illustration-outlined-cartoon agent skill, which teaches an AI agent to draw one specific cartoon style: a big-headed character with a thick near-black ink outline and flat colour fills, delivered as a hand-written SVG file. You will learn what the skill changes, how to add it to Claude, how to ask for art so the skill triggers, and what the bundled scripts do. No prior experience with agent skills is needed.

Outlined Cartoon IllustrationsMengTo/Skills · MIT

Quick start

  1. 1Download the ZIP. Get the illustration-outlined-cartoon ZIP from this skill's page on the directory.
  2. 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
  3. 3Or upload it in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the ZIP.
  4. 4Ask for a cartoon with a clear purpose. Describe the character, the prop and the screen it supports, such as a 404 page or onboarding step.
  5. 5Check the result. Run the bundled lint script on the SVG and, if you have Node.js and Chromium set up, render a PNG preview.

What an agent skill is and what this one makes the agent do

An agent skill is a folder of instructions and optional helper files that an AI agent loads when a request matches it. This skill, named illustration-outlined-cartoon, covers original SVG spot illustrations in an outlined cartoon style for design and coding subjects.

Without the skill, a request for a cartoon mascot tends to produce generic clip art. With it, the agent follows the style rules: every flat fill sits inside a warm near-black ink line in three weights (2.5, 2 and 1.5 px), folds and brows are tapered ink slivers, characters have huge white eyes, thick brows, open smiles and pink blush, and each card has one character with one large hero prop.

  • Good fit: empty states, onboarding, 404 or error pages, success states, blog headers, feature spots and marketing cards.
  • Poor fit: photorealistic images, detailed artwork, thin line art, or copying a real person or brand mascot.

Install the skill in Claude

Download the ZIP from the skill's page on this site and unzip it. The skill folder must contain SKILL.md along with the scripts, references and style.json files.

For a personal install, unzip the folder into ~/.claude/skills/. To limit it to one project, unzip it into that project's .claude/skills/ folder instead. Alternatively, in the Claude apps, upload the ZIP under Settings → Capabilities → Skills.

  • Personal: ~/.claude/skills/
  • Single project: the project's .claude/skills/ folder
  • Claude apps: Settings → Capabilities → Skills, then upload the ZIP

Trigger the skill with natural requests

The skill loads when your request matches its description. Name the style in plain words, such as outlined, inked, comic, sticker or doodle-style cartoon, or ask for a friendly character or mascot or a spot illustration for a specific screen.

You can also name the skill directly with a dollar sign, as the project's demo prompt does. Say what the card shows and what it is for, since the skill covers one character with one hero prop.

  • Make an inked cartoon of a developer celebrating a green build for our success screen.
  • Draw a friendly mascot for an empty inbox state.
  • Create a 404 page illustration: a character looking confused next to a broken link prop.
  • Use $illustration-outlined-cartoon to draw a 480 × 360 SVG card of a developer celebrating a green build.

Understand the output and the bundled scripts

The agent writes one self-contained SVG file with a 480 × 360 viewBox and a transparent background. The file contains no style blocks, class attributes, scripts or embedded images, so it can be pasted into a page without picking up outside CSS.

The skill ships helper scripts. scripts/lint.mjs checks that the SVG meets the style rules, and it can be run with a palette check. scripts/render.mjs renders the SVG to a PNG preview. scripts/outline-kit.mjs is the drawing library the agent uses to build outlines, folds and hands consistently. Examples of the shipped cards are in the examples/ folder.

  • scripts/lint.mjs: checks the style rules; warns on off-palette colours with the palette option.
  • scripts/render.mjs: renders the SVG to PNG for a visual check.
  • scripts/outline-kit.mjs: shared drawing helpers.
  • style.json and references/craft.md: the palette and craft rules.

Know what the skill needs and its safety notes

The scripts need Node.js. PNG renders are optional and additionally need Playwright or playwright-core plus a Chromium browser. The skill runs scripts, but according to its description it does not use the network.

Because it runs scripts, read the bundled files before installing if you work in a sensitive environment. Use the skill only to make generic styled art; the source states it does not cover copying a specific real person or brand mascot.

  • Requires Node.js to run the bundled scripts.
  • PNG previews also need Playwright or playwright-core and a Chromium browser.
  • Runs scripts: yes. Uses network: no.
  • Do not use it to copy a real person or brand mascot.

Tips for better results

Say the context. The skill chooses poses and props to fit the message, so 'success state after upload' gives better output than 'a person'. Ask for one character and one hero prop per card, because the style is built around a single large prop.

For a set of matching illustrations, ask for them one at a time in the same request style, as the demo prompt does. Ask for a PNG preview when you want to check the drawing before using the SVG.

  • Name the screen or message the art supports.
  • Ask for one character and one hero prop.
  • Request each card separately to keep a consistent set.
  • Ask for a PNG preview to check the result.

What people use it for

  • Empty-state illustrations for a product's inbox, search or project list screens.
  • Friendly 404 or error page art with a character and a broken-link or warning prop.
  • Success and onboarding cards for a sign-up flow or first-run tutorial.
  • Blog headers and marketing cards that need a consistent mascot across several pages.

Frequently asked questions

Is the illustration-outlined-cartoon skill free to use?

The source lists the licence as MIT. Check the licence file in the downloaded ZIP for the full terms before you use the art in a commercial product.

What do I need to install this agent skill?

You need an agent that supports skills, such as Claude, to load the files. The bundled scripts need Node.js. PNG previews are optional and also need Playwright or playwright-core plus a Chromium browser.

Where do I put the skill folder in Claude?

Unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. You can also upload the ZIP in the Claude apps under Settings → Capabilities → Skills.

Why doesn't the skill trigger when I ask for an illustration?

The skill loads when your request matches its description. Use words like outlined, inked, comic, sticker, doodle-style cartoon, mascot or spot illustration, and say what the screen is for. Check that the folder is in the right location and that it contains SKILL.md.

Does the skill need an internet connection?

The source says the skill does not use the network. It does run scripts, so you should still review the bundled files before installing.

How does this skill compare with other illustration styles?

The skill points to sibling styles for other looks: illustration-bold-pop for dense, saturated object clusters with navy extrusions and hatching; illustration-flat for no outlines; and illustration-line-interior for thin single-weight line art with mostly white fills.

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 friendly, consistent cartoon spot illustrations for product screens, pages or marketing and want an agent to produce them as SVG. Pick a sibling style or a different tool if you need photorealistic images, detailed artwork, thin line art, or no outlines at all.

Download the skill