Spotkit skill
A skill hand-writes SVG feature illustrations by one SPEC.md ruleset, with a single palette serving both light and dark themes.
- 104 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill writes SVG files and runs local Python check scripts.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/spotkitDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill writes SVG files and runs local Python check scripts.
This is third-party code. Review the repository files before installing.
What it does
Spotkit turns a feature description into an abstract product illustration as real SVG. The agent states what relationship is involved (grouping, access, sequence), picks a metaphor and one of twelve layouts, then writes the code by hand with no image generator. The illustration abstracts the interface, not the idea: recognisable parts stay and the rest is dropped. Twelve CSS variables handle theming, and one file serves both light and dark. The `check.py` script catches a second stroke width, an extra shadow, a background and text.
Who it is for. Product designers and developers who need uniform illustrations for empty states, documentation and feature pages.
Good fit when
- A feature page about an API gateway needs an illustration matching the rest.
- A set of twenty images has to look like one family.
- The illustration has to land in Figma as layers, not a raster.
- The site switches themes, and the picture must change colours without a second file.
Not a fit when
- Photorealism or a complex narrative illustration is wanted.
- The picture is embedded through `<img src>` and themes must work without flattened copies.
- A screenshot of the product itself is needed.
Example request
Create an illustration for API version management: pick a metaphor and layout and return a finished SVG.Limitations
The style is narrow: hairline strokes, one stroke width, one shadow and Phosphor icons, with no text inside the illustration. CSS variables do not work when the SVG is embedded through `<img>` or `<object>`: inline it or use the flat files in `examples/flat/`. If several illustrations share a page, make every `id` unique or masks and filters cross-apply. Figma discards SVG filters on import, so the shadow has to be re-applied.
How to disable. Delete the `~/.claude/skills/spotkit` folder (`~/.agents/skills/spotkit` for Codex) and restart the agent. SVGs already made stay in the project.
FAQ
Why SVG rather than a picture from an image model?
The style is geometry: hairline strokes, exact radii, one icon family. The model writes SVG directly, so the result is exact, editable and uniform across a set.
How do I enable the skill in Codex?
Clone the repository into `~/.agents/skills/spotkit` and restart Codex. Call it by name: `$spotkit an illustration for audit logs`.
How do I move an illustration into Figma?
Copy the contents of a file from `examples/flat/light/` and paste onto the canvas: the layers stay vector.
What dependencies are needed?
Only Python 3, and only to regenerate or run `check.py`.
How do I check a finished SVG?
With `python3 check.py my-feature.svg`: it catches a second stroke width, an extra shadow, a background, text and non-unique `id` values.
Discussion
No questions or reviews yet.
Related
SkillsA skill that draws interactive isometric illustrations in SVG, with WebGL shaders and React output, explaining an idea as a working machine
An image skill for science figures: 24 templates for diagrams and posters in biology, chemistry, physics and maths.
A skill that turns a raster logo into a clean SVG and builds a logo animation as standalone HTML with motion QA
A skill for scientific papers: vector schematics as SVG and PDF plus the code that draws them, so any element stays editable.
A skill that assembles ready image prompts in hand-drawn styles from a set of tested recipes: kids drawing, minimal line, crayon, Ghibli look and more
A skill that generates one-ink and two-ink editorial posters: paper substrate, halftone, negative space and restrained type
README in short
`examples/gallery.html` shows twelve illustrations in light and dark. The rules live in `SPEC.md`, and `AGENTS.md` tells other agents what to read.