Prompt your way to CoreUI
Agent Skills are curated instruction sets that your AI tool follows to build faithful UI **with the CoreUI Penpot Kit** - either as a Penpot design or as CoreUI code - and to hand a Penpot design off to a developer without rework.
They work in Claude Code, Cursor, Codex, and OpenCode. For designers *and* developers who use the kit.
Seven skills, two paths:
In Penpot - assemble screens from the kit's real components, then convert them to code.
In code - build pages directly from CoreUI's coded (Pro) components, tokenised and light/dark ready.
Requires: the CoreUI Penpot Kit (for the Penpot path) and a CoreUI Pro license (for the code path - most of the kit's components are Pro).
The skills at a glance
`coreui-kit-setup`
Connect the kit - wire up the Penpot MCP (Path A) or install the CoreUI Pro components (Path B).
`coreui-kit-select`
Decide *which* kit component and variant fits a piece of UI. Used by both paths.
`coreui-kit-design`
Build screens **in Penpot** from the kit's components and tokens, verified in light and dark.
`coreui-kit-to-code`
Convert an existing Penpot design **into CoreUI code**, reading component identity - not the raw CSS export.
`coreui-kit-page`
Build pages **directly in code** from CoreUI's components (HTML/CSS, React, Vue, Angular). |
`coreui-kit-import-tokens`
Pull the kit's design tokens (colours, radii, fonts, spacing, light/dark) into your project.
`coreui-kit-brand`
Apply your brand to the kit as a new theme by repointing tokens - no per-component edits. |
Requirements
-
An AI coding tool that reads `SKILL.md`: Claude Code, Cursor, Codex, or OpenCode.
-
The CoreUI Penpot Kit open in Penpot (for the Penpot path).
-
A CoreUI Pro license (for the code path). Many of the kit's components - Smart Table, Range Slider, Multi Select, Date/Time pickers, Stepper, Rating, Calendar - are CoreUI Pro. Get your npm token from your CoreUI account.
Installation
Three steps to running skills
Install the skills once, then connect whichever path you're on - Penpot, code, or both.
Install the skills
Unzip the skills into your tool's skills directory. Each skill is self-contained - it bundles its references and code, so it works on its own.
Claude Code
# unzip every skill into your user skills folder unzip 'coreui-kit-*.zip' -d ~/.claude/skills/
Cursor, Codex and OpenCode: copy each coreui-kit-*/ folder into your tool's agent-skills location.
Connect the Penpot MCP - for the design path
Enable the MCP server in Penpot (Account → Integrations → MCP Server), add it to your editor with your MCP key, then File → MCP Server → Connect from the open kit file. The coreui-kit-setup skill has both the Remote and Local steps.
Your copy of the kit has its own file id — and that's fine. The skills recognise the kit by its token sets, never a hardcoded id, and pin the file you connected for the session. Nothing to configure. Just keep only the kit file open — the Penpot MCP works on one focused tab, so a second open file can make it drift.
Install CoreUI Pro - for the code path
CoreUI Pro is a licensed, private registry. Add your token, then install the flavour your project uses.
.npmrc
@coreui:registry=https://registry.npmjs.coreui.io/ //registry.npmjs.coreui.io/:_authToken=${CUI_TOKEN}
terminal
# keep the token in your environment - never commit it export CUI_TOKEN=your_coreui_pro_token npm i @coreui/coreui-pro # or @coreui/react-pro · vue-pro · angular-pro
Then run coreui-kit-import-tokens so your code uses the kit's tokens, not hardcoded values.
Design in Penpot
`coreui-kit-design`
Assembles a screen **inside Penpot** from the kit's real component instances with the correct tokens, and verifies it in light and dark. This is the reference workflow for the Penpot path.
```
/coreui-kit-design build a login screen with the CoreUI kit
```
`coreui-kit-to-code`
Converts a design you already built with the kit **into CoreUI / Bootstrap-5 code**. It reads each element's *component identity and variant props* from the Penpot file — it never traces the raw Inspect CSS export — so the output uses real classes, not brittle positioned `<div>`s.
```
/coreui-kit-to-code turn this Penpot screen into React with the CoreUI kit
```
Point it at the board or selection you want to convert. Emitted CoreUI Pro components carry their real props; a short note flags anything to confirm against your installed Pro version.
Build in code
`coreui-kit-page`
Builds a page or section directly in code from CoreUI's real components - HTML/CSS, React, Vue, or Angular - tokenised and responsive. Because it's real code with real components, it doubles as a developer handoff.
```
/coreui-kit-page build a dashboard in React with the CoreUI kit
```
Choosing components
`coreui-kit-select`
Decides which kit component and variant fits a given piece of interface, with matching rules and common screen recipes, so the agent reaches for a real kit component instead of inventing one. Used by both paths.
```
/coreui-kit-select what should I use for a filter bar with the CoreUI kit?
```
Theming
`coreui-kit-import-tokens`
A one-time job: pull the kit's tokens - colours, radii, fonts, spacing, sizing, and the light/dark modes - into your project as CSS custom properties (or your framework's theme config), so code matches the design.
```
/coreui-kit-import-tokens import the CoreUI kit tokens into my project
```
`coreui-kit-brand`
Applies your brand to the kit as a new theme by repointing the brand tokens - every component adopts it at once, with a contrast check on the primary colour. Works in Penpot or in the imported code tokens.
```
/coreui-kit-brand apply our brand colors to the CoreUI kit
```
How to prompt
Name the kit.
Say "…with the CoreUI kit" in your prompt. The skills are kit-specific, so naming the kit routes you to the right one every time; omitting it can hand the request to a generic design or Penpot skill.
Two skills, one word apart.
design` builds **in Penpot** · `page` builds **in code** from scratch · `to-code` **converts** an existing Penpot design to code. Name the destination and the right one fires.
Slash or natural.
Trigger a skill explicitly with `/coreui-kit-design …`, or just describe the task naturally and the agent picks the skill.
Using more than one kit
Skills are namespaced by kit (`coreui-kit-*`). A second Penpot kit ships its own set (e.g. `yourkit-kit-*`) and both install side by side - name the kit in your prompt and the right set responds.
Troubleshooting
-
- The wrong skill (or none) fires. Name the kit in the prompt. If it still misroutes, trigger it explicitly with its `/coreui-kit-…` slash command.
-
- Edits land in the wrong Penpot file. Close every other Penpot file . the MCP connection flips between open files. `coreui-kit-setup` covers this.
-
- A Pro component won't install. Confirm your CoreUI Pro token and the `.npmrc` registry line; the token is a license secret — keep it in your environment, not the repo.