How to use the Line Interior Illustrations agent skill

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

An agent skill is a folder of instructions, reference files and optional scripts that an AI agent loads when a request matches the skill's description. This skill is for illustration work in one specific style.

When it is active, the agent creates a single SVG card at 480 by 360 units. The style uses one thin, uniform indigo outline at 1.4 px around white-filled shapes, with flat accents such as teal, sage, coral, mustard, lavender and peach wood covering under 7% of the card. Faint lavender background decor (brick clusters, pendant lamps, framed posters) sits behind the scene, and a long floor line with end dashes runs under it all.

• Palette, line weights, composition and character proportions are defined in the skill's reference material.
• A parts toolkit supplies heads, hands, torsos and furniture so the agent builds figures from shared pieces.
• Scripts let the agent lint the SVG and render it to check its own work in a render-critique loop.

Install the skill from the ZIP

Download the ZIP for this skill from this page. Unzip it into one of two locations, depending on how you want to use it.

For personal use across projects, unzip it into your user skills folder, ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder so it only loads there.

If you use the Claude apps instead of a local folder, open Settings, go to Capabilities, then Skills, and upload the skill there.

• Personal: ~/.claude/skills/
• Project only: .claude/skills/ inside the project
• Claude apps: Settings → Capabilities → Skills, then upload

Check the requirements before you start

The skill itself is written as ESM scripts for Node.js, and the toolkit has no npm dependencies. You only need more if you want previews.

Rendering and visual checks need Playwright or playwright-core and a Chromium browser installed locally. If you skip rendering, you can still ask for SVG output, but the agent cannot visually check it with the render script. The skill does not use the network.

• Node.js, for the ESM scripts
• Playwright or playwright-core plus a Chromium browser, only for rendering and visual checks
• The skill runs scripts, so review them before installing if that matters to you

Trigger the skill with natural requests

The skill loads when your request matches its description. Name the style or the kind of scene, and say what the artwork is for. The skill's description lists line-art, thin-line, outline, indigo line art, office, desk, home-workspace, remote-work and team scenes, plus spot illustrations for empty states, onboarding screens, 404 pages, blog headers, feature spots, landing sections and marketing cards.

You can also name the skill directly, as the skill's own prompt examples do. Describe the scene: who is in it, what they are doing and what they point at or hold.

• Ask for a scene with a clear subject, such as a developer at a desk or a team at a whiteboard.
• Say where it will go, such as an empty state or a blog header.
• Keep the request to one card per scene.

Know what good output looks like

Expect one self-contained SVG with a viewBox of 0 0 480 360. The style rules say the file should have no style element, no class attributes, no script, no image element and no background rectangle, so it can be pasted into a page without its colours breaking.

Check the result against the style rules before you use it. Figures should be slim, with one indigo outline weight throughout. Accents should be small and flat, with no shading, gradients, opacity or drop shadows.

• Single SVG with viewBox 0 0 480 360
• No style element, class, script, image or background rectangle
• One outline weight, flat accents, no gradients or shadows

Use the lint and render scripts to check the work

The skill includes scripts to lint the SVG and render it to an image so the agent can review the result and adjust it. The render script needs Playwright and Chromium, so set those up first if you want visual checks.

Use the render output to judge composition, figure proportion and whether the accents stay small. If a figure looks wrong, ask the agent to revise that part and render again.

• scripts/lint.mjs checks the SVG file
• scripts/render.mjs renders it for a visual check
• scripts/interior.mjs is part of the toolkit used to build scenes