Guide · Agent skill
How to use the Teal Spot Illustrations agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Teal Spot Illustrations skill (skill name illustration-teal-spot) lets an AI agent draw one original object as an SVG card in a fixed teal-on-white style. It is aimed at designers, developers and marketers who need empty-state, onboarding, error or feature art that looks like one set. This guide explains what an agent skill is, how to install this one, how to ask for artwork that triggers it, and what to check before you run its scripts.
Teal Spot IllustrationsMengTo/Skills · MIT Download the skill Quick start
- 1Download and unzip. Download the illustration-teal-spot ZIP from this page and unzip it.
- 2Place the folder. Move the folder to ~/.claude/skills/ for personal use or to .claude/skills/ inside a project. Or upload it under Settings → Capabilities → Skills in the Claude apps.
- 3Install Node.js. Install Node.js so the bundled .mjs scripts can run.
- 4Make a request. Ask for a teal spot card with one named object and its purpose, such as an empty state or onboarding step, at 480x360 SVG.
- 5Check the output. Confirm the card has a grey background, one object, teal only on the right sides and accents, and no people or text elements. Run lint.mjs if you want an automated check.
- 6Optional previews. If you need PNG previews, install Playwright or playwright-core and Chromium, then use render.mjs.
What an agent skill is and what this one makes the agent do
An agent skill is a folder of instructions and optional scripts that an AI agent loads when a request matches the skill's description. This skill's SKILL.md describes a single visual style. When it applies, the agent draws one hero object, such as a keyboard, database, git graph, inbox or device, as a 480x360 SVG card.
Each card follows the style's rules: a single object in a fixed oblique 3/4 view showing top, front and right faces, white main faces with teal only on the side faces and accents, thin dark-teal outlines, a hard unblurred deep-teal drop shadow pushed down-right, and two to four small floating extras such as coins, tilted UI cards or badges. There are 4-point sparkles and no people.
- Output: an SVG card with viewBox 0 0 480 360 on a light grey background.
- Subjects: one design or coding idea turned into one physical object.
- Not included: people, faces, hands, gradients, blur, opacity or text labels (letters are drawn as stroked paths).
Install the skill from the ZIP or the Claude apps
Download the ZIP for agent-skills/illustration/illustration-teal-spot from this page, then unzip it. For a personal install, place the folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder. The folder should contain SKILL.md along with the scripts and style files.
If you use the Claude apps instead, upload the skill under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/illustration-teal-spot/
- Project install: .claude/skills/illustration-teal-spot/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the skill
Check the requirements before you start
The core drawing works from the skill's instructions and bundled scripts. The bundled .mjs scripts need Node.js. Rendering PNG previews with render.mjs is optional and needs Playwright or playwright-core plus a Chromium browser. The skill does not use the network, but it does run scripts on your machine.
- Node.js, to run the .mjs scripts (lint.mjs, render.mjs, starter.mjs, teal3d.mjs).
- Playwright or playwright-core and a Chromium browser, only if you want PNG previews from render.mjs.
- Scripts run locally: yes. Network use: no.
Trigger the skill with natural requests
The agent loads the skill when your request matches its description. Name the look you want (teal spot, teal icon illustration, isometric spot object, empty-state art, onboarding step art, a 404 or error spot, a feature spot, a blog header object, a marketing card) and say what object it should show. Mention the purpose too, because the skill is written for empty states, feature spots and onboarding steps.
The demo prompt in the skill folder uses the explicit form, starting with the skill name. You can do the same.
- Example: a teal spot for an empty inbox state, 480x360 SVG.
- Example: a 404 error spot showing a broken database drum.
- Example: a feature spot of a keyboard with two keys popped out, for a product page.
Use $illustration-teal-spot to draw a 480x360 SVG card of a white password vault with its teal dial turned, for an empty state about saved passwords.Ask for one object, and name the part that lifts out
The style works best with one solid object. The skill's demo prompts name the object and the part that lifts out of it before drawing, such as a keyboard case with popped keys or a database drum. If you ask for a whole scene of many objects, the skill says that belongs to a different style, so ask for one hero object per card.
For a set of cards, describe the subject of each one and ask for them as a set. The skill recommends building each card with a generator based on its starter and teal3d scripts so the cards match.
- Good: one subject per card, with the object named.
- Good: ask for a set of cards that share one house style.
- Avoid: people, characters, multi-object isometric scenes or bold multi-colour art. Other styles in the set cover those.
Review scripts and render previews safely
Scripts run locally and can execute arbitrary code on your machine. Do not run them on untrusted inputs or in sensitive folders without reading them first. lint.mjs checks a card against the style rules, and render.mjs can produce PNG previews if Playwright and Chromium are installed.
Review the generated SVG before using it. The style rules forbid text elements, scripts, external references and filters, so a card that breaks those rules should be regenerated or checked with lint.mjs.
- Read scripts before running them, especially in folders with private files.
- Run lint.mjs on the output to check the style rules.
- Use render.mjs only if you installed Playwright or playwright-core and Chromium.
What people use it for
- Empty-state artwork for a saved-passwords or empty-inbox screen in a product app.
- Onboarding step art showing one device or tool per step, in a consistent teal set.
- 404 or error spot showing a single broken object such as a database drum.
- Feature spots on a product or docs page that need simple object illustrations as SVG.
- Blog header or marketing card art in one teal house style.
Frequently asked questions
Is the illustration-teal-spot skill free to use?
The source gives its licence as MIT. Check the LICENSE terms in the download before you use it in a commercial project.
What do I need to install to use the Teal Spot agent skill?
You need the skill folder placed in ~/.claude/skills/ or a project's .claude/skills/ folder, or uploaded under Settings → Capabilities → Skills in the Claude apps. Node.js is needed to run the .mjs scripts, and Playwright or playwright-core with Chromium is optional for PNG previews.
Does the skill send my files over the internet?
The source says the skill does not use the network. It does run scripts locally, so review them before running them on untrusted inputs or in sensitive folders.
Can the agent draw people or faces with this skill?
No. The style explicitly has no people, hands or faces. For people at work, the skill's boundary notes point to character styles such as illustration-framed-panel or illustration-outlined-cartoon.
Why does my card look different from the examples?
The style fixes its palette, line widths, shadow direction and camera. Ask for one object, name the lifting part, and run lint.mjs to check the style rules before accepting the card.
How does this compare with an isometric or bold illustration skill?
This skill draws one object with a hard deep-teal shadow and teal only on its side faces. The skill says a multi-object isometric scene with soft glows belongs to illustration-isometric-mono, and saturated multi-colour clusters belong to illustration-bold-pop.
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 consistent, people-free object cards in one teal-on-white style for empty states, onboarding, error pages or feature spots, and you are comfortable running local scripts. Pick a different style if you need people, a multi-object isometric scene or bold multi-colour art.
Download the skill