top of page

Penpot Agent Skills Docs

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.
 

CoreUI for Penpot

Design System

Product

Legal

© 2024 by CoreUI for Penpot All Rights Reserved.

bottom of page