Guide · Agent skill
How to use the Bold Pop Illustration agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
Bold Pop is an agent skill, a folder of instructions and helper scripts that teaches an AI agent one specific illustration style. This guide explains what the skill makes the agent produce, how to install it from the ZIP on our page, how to ask for artwork so the skill triggers, and what it needs to run. By the end you will be able to get a loud, navy-outlined SVG spot illustration for an empty state, error page, or feature card.
Bold Pop IllustrationMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the illustration-bold-pop ZIP from our page.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
- 3Or upload in the Claude apps. In the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.
- 4Check the requirements. Install Node.js. Add Playwright or playwright-core and Chromium only if you plan to use render.mjs.
- 5Ask with a trigger phrase. Name the style, such as bold pop or navy-outline, plus the placement and subject.
- 6Review the render. Let the agent render the SVG and critique it, then ask for changes.
What the skill makes the agent draw
The skill draws hand-authored SVG spot illustrations in a bold pop-geometric style for design and coding scenes. Every shape has a thick navy outline and a solid navy extrusion that always steps down and to the right. Fills are saturated and flat, in colours such as hot pink, lemon, aqua, violet, mint and lime, textured with navy hatching and dots.
Each card is a dense cluster of chunky props, such as browser windows, pinwheel tiles, iso cubes and lightning bolts, overlapping around one slim cartoon character. The skill also covers palette, line weights, extrusion and union-outline techniques, a JavaScript helper for repeated marks, characters and hands, composition, and a render-and-critique loop.
- Thick navy outline on every shape
- Solid navy extrusions stepped down-right
- Flat saturated fills with navy hatching and dots
- One slim cartoon character inside an overlapping prop cluster
Install the skill from the ZIP
Download the ZIP for illustration-bold-pop from our page. Unzip it into your personal skills folder, ~/.claude/skills/, so it is available in every project. To limit it to one project, unzip it into that project's .claude/skills/ folder instead.
If you use the Claude apps rather than a local setup, open Settings, go to Capabilities, and upload the skill under Skills.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into the project's .claude/skills/
- Claude apps: Settings → Capabilities → Skills, then upload
Ask for an illustration in a way that triggers the skill
The skill loads when your request matches its trigger wording. Name the style directly, using phrases such as bold pop, pop geometric, retro pop, memphis-style, navy-outline, chunky outlined or loud colourful illustrations. You can also describe the place it will go, such as an empty state, onboarding screen, 404 or error page, blog header, feature spot or marketing card.
Name the subject and the scene in plain words. The demo prompt in the skill's demo folder shows the pattern: name the skill with a dollar sign, then describe a 480x360 SVG card and its subject.
- Name the style: bold pop, memphis-style, navy-outline
- Name the placement: 404 page, empty state, blog header
- Name the subject: what the developer or person is doing
Use $illustration-bold-pop to draw a 480x360 SVG card called Merge Queue: a developer pushes a stack of pull-request blocks into a browser window.Know what the skill needs and what it runs
The skill runs scripts, so it needs Node.js because the scripts are .mjs ES modules. Playwright or playwright-core and a Chromium browser are needed only for the render script, which renders the SVG so the agent can review it. The skill does not use the network.
The render script needs a local Chromium install and modifies files on disk. Check the scripts folder before you run anything, and keep a copy of your work in version control if you care about the existing files in the folder.
- Node.js: required, scripts are .mjs modules
- Playwright or playwright-core plus Chromium: only for render.mjs
- Network use: none
- Scripts: yes, including pop.mjs, lint.mjs and render.mjs
Know what the folder contains
The skill folder holds SKILL.md, which is the main instruction file the agent reads. It also includes references/craft.md with rules for every illustration card, scripts/pop.mjs for repeated shapes, characters and hands, scripts/lint.mjs, scripts/render.mjs, a style.json file, an agents/openai.yaml file, and demo/PROMPT.md with sample prompts.
- SKILL.md: main instructions
- references/craft.md: craft rules
- scripts/pop.mjs, scripts/lint.mjs, scripts/render.mjs: helper scripts
- style.json, agents/openai.yaml, demo/PROMPT.md
Tips for better results
Ask for one subject per card. The style works best with one slim character and a tight cluster of props, so a crowded brief pulls the composition apart. Say when the image is for a light or white page, because the style leaves the card background transparent.
If the brief asks for flat artwork with no outlines, this is the wrong skill, and the skill points to illustration-flat instead. For thin near-black outlines, big heads or no extrusions, the skill points to illustration-outlined-cartoon. For a single hero object with a hard drop shadow and no people, it points to illustration-teal-spot.
- Keep one subject and one character per card
- Describe the placement so the right composition is chosen
- Use illustration-flat, illustration-outlined-cartoon, illustration-teal-spot or illustration-isometric-mono for other looks
What people use it for
- A loud 404 page card with a character next to a broken browser window
- An empty-state illustration for a project list with no items yet
- A blog header showing a developer pushing blocks into a browser window
- A feature card for a launch, security or onboarding screen
- A marketing card with a consistent Memphis-style look across a series
Frequently asked questions
Is the illustration-bold-pop agent skill free to use?
The skill is published under the MIT licence. Check the licence file in the skill's folder for the full terms before you reuse the artwork in a commercial product.
What do I need to install the Bold Pop skill?
Unzip the ZIP into ~/.claude/skills/ or a project's .claude/skills/ folder, or upload it in the Claude apps under Settings → Capabilities → Skills. You need Node.js to run the scripts, and Playwright or playwright-core with a Chromium browser only for the render script.
Does the skill need the internet?
No. The skill does not use the network. The render script does need a local Chromium install, and it modifies files on disk.
Why did the agent not use the bold pop style?
The skill loads when your request matches its trigger wording. Name the style, such as bold pop, pop geometric, memphis-style or navy-outline, and mention the placement, such as an empty state or 404 page.
How is this different from other illustration skills?
Bold Pop uses thick navy outlines and solid navy extrusions with saturated flat fills. Its boundary notes point to illustration-outlined-cartoon for thin near-black outlines, illustration-teal-spot for a single object with a hard shadow, illustration-isometric-mono for isometric scenes, and illustration-flat for flat artwork with no outlines.
What should I do if the agent outputs a flat or outline-free image?
Check that the request names the bold pop style and includes the navy outline and extrusion details. If the brief asks for flat, outline-free art, the skill is the wrong choice, so use illustration-flat instead.
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 loud, retro pop-art SVG spot illustrations with navy outlines for empty states, error pages, onboarding and feature cards. Pick a different skill if you need thin near-black outlines, big heads, flat outline-free art, or you cannot install Node.js and a local Chromium for the render script.
Download the skill