Nine skills that teach your agent this kit.
Not generic prompts. Each one is a written workflow that names the kit's variant containers, its semantic tokens and the traps in the Penpot API, so the agent reaches for a real component instead of drawing a rectangle.
Claude Code
Cursor
CodexWork in the file, or work in the code. Either one hands off to the other.
The skills split down the middle, and you only ever load the half you need. Setup asks which one you are on.
The agent connects to the Penpot MCP server and assembles screens out of the kit's real component instances, bound to the kit's tokens. Nothing is drawn by hand, so what comes out is still editable as components.
The agent builds a live page from shadcn/ui plus the kit's tokens, without opening Penpot at all. Useful when you already know the screen and the design file would only slow you down.
The nine skills
Every bundle is self-contained. Install one on its own and it still resolves its own references, because the shared documents are copied inside it.
Identity, not pixels.
This is not a design system that resembles shadcn/ui. It is shadcn/ui rendered in Penpot, and the variant axes were named to match the real props while the kit was being built.
So the conversion is a lookup. Nothing is inferred, and nothing is guessed from a screenshot.
The model is still needed for the layout around it. It is not needed to work out what a button is.
Four stacks mapped properly, and three named honestly.
A mapped target means every component family has a written translation. The second tier is documented too, but with its losses spelled out rather than papered over, because those libraries do not carry the same variant model.
These have their own opinions about shape, elevation and state. The mapping says what survives and what does not, so you find out before you commit rather than halfway through.
Eight documents every skill reads from.
This is the part that makes the skills specific rather than generic. Every number in them was read from the live Penpot file, not transcribed from notes.
Installed in a minute.
One zip, nine folders, nothing compiled. Claude Code reads them from a skills directory. Codex and Cursor have none, so the same folders go anywhere stable and a routing table in AGENTS.md tells the agent when to open which - for those two that is the mechanism, not a fallback.
Read the install guideOr copy one folder. Each is self-contained, so a single skill still resolves its own references.
Then the routing table goes in ~/.codex/AGENTS.md for Codex, or the same AGENTS.md at a project root, which covers both. Cursor also takes .cursor/rules/shadcn-kit.mdc - note the extension, a plain .md there is ignored.
Designs are checked in light and dark before handover. Code is audited against the kit's own conventions. The run tells you what it could not resolve instead of quietly guessing.
Say the kit's name in your prompt.
The skills are brand-namespaced on purpose. Generic names collide the moment a second kit is installed, and then the router cannot tell them apart. Naming the kit is not a workaround for a defect, it is how a shared namespace should behave.
The kit and the skills
are one purchase.
There is no separate tier for the agent side. Buying the kit gets you all nine skills and every reference document in the package.