Guide · Agent skill
How to use the Flat Vector Illustrations agent skill (illustration-flat)
Updated · written with AI from the project's own documentation and checked against our catalogue data
The illustration-flat skill teaches an AI agent to draw flat, outline-free vector illustrations as 480x360 SVG cards: a slim, long-limbed person working with one hero prop, surrounded by sparse confetti. It is for designers, front-end developers and marketers who need matching illustrations for empty states, 404 pages, onboarding screens or blog headers. After this guide you will know what the skill does, how to install it, how to phrase a request so it triggers, and what to check before you use the output.
Flat Vector IllustrationsMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the illustration-flat ZIP from our page.
- 2Unzip into a skills folder. Extract it into ~/.claude/skills/ for personal use or .claude/skills/ for one project.
- 3Or upload in the Claude apps. Go to Settings, then Capabilities, then Skills, and upload the ZIP.
- 4Make a request. Describe one person, one hero prop and the moment, and name the flat illustration style.
- 5Lint the output. Run the lint script on the generated SVG to check the card rules.
- 6Render a preview if needed. With Playwright and Chromium installed, render the card to check it visually.
What an agent skill is and what this one makes the agent do
An agent skill is a folder with a SKILL.md file and optional supporting files that an AI agent loads when a request matches the skill's description. This one holds a documented style guide for the flat look, a measured colour palette, stroke widths, character proportions and a set of helper scripts.
With the skill active, the agent produces a single self-contained SVG per card. The figure has tapered limbs, separated fingers and white sneakers, and the colours come from a fixed palette of lavender, indigo, sunshine yellow, coral and mint. Big shapes have no outline; depth comes from thin white fold strokes and a few navy hairlines.
- Output: one SVG per card, viewBox 0 0 480 360, no background rectangle.
- Style: flat fills, no gradients, opacity, filters, textures or shadows.
- Helpers: scripts/flat-kit.mjs builds the parts, scripts/lint.mjs checks the file, scripts/render.mjs renders previews.
Install the skill from the ZIP
Download the ZIP for illustration-flat from our page. Then choose one of two locations. For a personal install, unzip it into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder. The folder should contain SKILL.md at its top level.
If you use the Claude apps instead, open Settings, go to Capabilities, then Skills, and upload the ZIP there.
- Personal: ~/.claude/skills/
- Project only: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
Set up rendering only if you need previews
The scripts are dependency-free ES modules that run on Node.js, so generating and linting SVG files needs only Node.js. Rendering a card to an image for a visual check needs Playwright or playwright-core and a Chromium browser. Skip this step if you only need the SVG files.
The source does not give a specific install command for Playwright or Chromium, so follow the official instructions for those tools.
- Node.js: required for the scripts.
- Playwright or playwright-core plus Chromium: only for scripts/render.mjs and visual checks.
Trigger the skill with a natural request
The skill loads when your request matches its description. Name the look you want and the subject. Words from the description such as flat illustration, empty state, 404 page, onboarding screen, blog header or feature card are reliable triggers. You can also invoke it by name, as in the demo prompts.
Describe one person, one hero prop and one moment. The skill is built around a single figure, so a request for a crowd or a photographic scene falls outside it.
- "Draw a flat illustration of a person fixing a broken link for our 404 page, SVG 480x360."
- "Make a coming-soon card with one person pinning a poster to a wall, in the flat vector style."
- "Create a feature-spot illustration for the onboarding screen: someone holding a tablet."
Use $illustration-flat to draw a 480x360 SVG card titled "Offline": a woman in a mint tee kneels to plug a big yellow cable back into a browser window.Check the output before you ship it
The skill ships a lint script and a render script. Lint checks the SVG against the card rules, and render produces an image you can view in a browser. Ask the agent to run them, or run scripts/lint.mjs yourself on the generated file. The source does not list the exact command-line flags, so read the script's header before calling it.
Look at the figure in close-up. The guide says hands and thumbs are a common fault, so check that fingers are separated and the thumb is on the correct side.
- Check there are no outlines on large shapes and no shading.
- Check the palette matches the listed hex values.
- Check the card is one self-contained SVG with no style blocks or external references.
Safety notes: scripts and network
This skill runs scripts. The listed scripts are scripts/flat-kit.mjs, scripts/lint.mjs and scripts/render.mjs. Read them before you run anything from an untrusted source, and run the skill in a project you control.
The skill does not use the network, according to its listing. Rendering needs a local Chromium through Playwright, which is a separate installation.
- Runs scripts: yes. Review scripts/ before use.
- Uses network: no.
- Rendering requires Playwright or playwright-core and Chromium.
What people use it for
- A 404 page with a figure pulling a broken chain link.
- An empty-state card for a dashboard with no items yet.
- A coming-soon page with a person pinning a SOON poster to a wall.
- A blog header showing one person working with a laptop prop.
- A set of matching feature-spot cards for a marketing page.
Frequently asked questions
How do I install the illustration-flat agent skill?
Download the ZIP from our page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, go to Settings, then Capabilities, then Skills, and upload the ZIP.
What do I need to run it?
Node.js is needed because the scripts are dependency-free ES modules. Playwright or playwright-core and a Chromium browser are needed only for rendering and visual checks.
Is the illustration-flat skill free to use?
The item is licensed under MIT, according to our listing. Check the licence file in the repository for the full terms.
Does the skill need an internet connection?
The listing says it does not use the network. Rendering previews still needs a local Chromium installed through Playwright.
Why won't the skill trigger on my request?
Use wording from the skill's description, such as flat illustration, empty state, 404 page or onboarding screen, and describe one person with one prop. Requests for photographic or heavily shaded art fall outside this style.
How does it compare with other illustration skills?
This style has no outlines on big shapes and no shading. For black solid hair and shoes with a ground line, the guide points to illustration-flat-with-black. For thin ink outlines, it points to illustration-outlined-cartoon or illustration-line-interior.
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 consistent set of flat, outline-free SVG character cards for product screens, marketing or blog headers, and you can run Node.js scripts. Pick a different style if you need shaded, photographic or heavily detailed artwork, or outlined cartoon and black-silhouette looks, or if you cannot set up a browser for previews.
Download the skill