Prompt your way to CoreUI
Curated instruction sets that teach your AI tool to build faithful interfaces
with the CoreUI Penpot Kit — in Penpot, or straight to code.
Works in: Claude Code, Cursor, Codex, OpenCode.
Audience: CoreUI Pro licensees. The code path assumes CoreUI Pro.
EIGHT SKILLS, TWO PATHS
Design in Penpot from the kit's real components, or build straight to CoreUI code — and hand a Penpot design to a developer without the rework.
- coreui-kit-setup ......... Connect the kit — wire up the Penpot MCP, or install
the CoreUI Pro components.
- coreui-kit-select ........ Decide which kit component and variant fits a piece of
UI. Used by both paths.
- coreui-kit-design ........ Assemble screens IN PENPOT from real components and tokens, verified in light and dark.
- coreui-kit-to-code ....... Convert an existing Penpot design INTO CODE — by
component identity, not the CSS export.
- coreui-kit-page .......... Build a page directly IN CODE from CoreUI's coded
components — tokenised and light/dark ready.
- coreui-kit-import-tokens . Pull the kit's colours, radii, fonts, spacing and
light/dark modes into your project.
- coreui-kit-brand ......... Apply your brand as a new theme by repointing tokens — every component adopts it at once.
- coreui-kit-audit ......... Check an existing file — unbound colours, WCAG contrast in light AND dark, legacy leftovers. Reports; fixes only on approval.
REQUIREMENTS
- An AI tool that reads SKILL.md — Claude Code, Cursor, Codex, or OpenCode.
- The CoreUI Penpot Kit, open in Penpot (for the design path).
- A CoreUI Pro license (for the code path).
INSTALLATION — THREE STEPS
1) Install the skills (once)
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 'coreui-kit-*.zip' -d ~/.claude/skills/
Cursor, Codex, OpenCode: copy each coreui-kit-*/ folder into your tool's
agent-skills location (or use the router block from INSTALL.md).
2) 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 or the session. Keep only the kit file open — the Penpot MCP works on one focused tab, so a second open file can make it drift.
3) 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.
THE SKILLS IN DETAIL
Trigger a skill explicitly with its slash command, or just describe the task and
your agent picks the right one.
Design in Penpot
coreui-kit-design
Assembles a screen inside Penpot from the kit's real component instances with
the correct tokens, then verifies it in light and dark — and runs an
accessibility gate (WCAG AA contrast in both themes, target size, structure)
before it calls the screen done.
› /coreui-kit-design build a login screen with the CoreUI kit
coreui-kit-to-code
Converts a design you built with the kit into CoreUI / Bootstrap-5 code. It reads each element's component identity and variant props from the file — never the raw
Inspect CSS export — so the output uses real classes, not brittle positioned divs.
› /coreui-kit-to-code turn this Penpot screen into React with the CoreUI kit
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, with the same a11y
gate before done. 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 component instead of inventing one.
› /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 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
Maintenance
coreui-kit-audit
Checks an existing CoreUI file over the Penpot MCP and reports — it does not change anything unless you approve it. Four sweeps: unbound colours (that won't
follow the theme), WCAG contrast in light AND dark, legacy leftovers (orphaned copies and unused legacy mains), and kit hygiene.
› /coreui-kit-audit audit my CoreUI file and check contrast in dark mode
HOW TO PROMPT
- Name the kit. Say "…with the CoreUI kit". The skills are kit-specific, so naming
the kit routes you to the right one every time; omit it and a generic design or Penpot skill may answer instead.
- Design vs page vs to-code. design builds IN PENPOT · page builds IN CODE from
scratch · to-code CONVERTS an existing Penpot design. Name the destination and the right one fires.
- Slash or natural. Trigger a skill explicitly with /coreui-kit-…, or just describe
the task naturally and the agent picks the skill for you.
- Run more than one kit. Skills are namespaced by kit (coreui-kit-*). A second Penpot kit ships its own set and both install side by side — name the kit 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.
- A write aborts with "not the CoreUI kit" or "different file".
The connection drifted to another open file, or a second copy of the kit is open.
Close every other Penpot file and reconnect — the skill re-checks the kit's token sets and re-pins your file. It never checks a hardcoded id, so your own copy is always accepted.
- 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.