Agent skills
Teach your coding agent (Claude Code, Cursor, Codex and more) how to install, theme and use Edmi UI.
Edmi UI ships an installable agent skill: a small folder of instructions that your coding agent loads when you build UI. With it the agent installs Edmi items with the right CLI instead of inventing components, themes with tokens, uses elevation (flat, layered, raised) where it belongs and composes AI chat screens correctly.
Install
Section titled “Install”The skill lives in the Edmi UI repository. Install it with the skills CLI,
which copies it into the skill folder of every agent it finds (Claude Code, Cursor, Codex, Windsurf, Cline, GitHub
Copilot and many more):
npx skills add viandwi24/edmi-uipnpm dlx skills add viandwi24/edmi-uiyarn dlx skills add viandwi24/edmi-uibunx skills add viandwi24/edmi-uiUseful flags:
| Flag | Effect |
|---|---|
--list (-l) |
list the skills in the repository without installing |
--skill edmi-ui |
install only this skill |
-a claude-code |
target one agent (repeat for several) |
-g |
install globally for your user instead of the current project |
-y |
skip confirmation prompts |
Without -g the skill is added to the current project, so teammates get it with the repository.
What it covers
Section titled “What it covers”- Install: React (shadcn/ui), Vue (shadcn-vue) and Svelte (shadcn-svelte) flows, entry items (
theme,all,patterns,ai-all), pinned CDN versions, icons. - Theming: tokens, Stone / Slate bases, Green / Ocean accents, radius, dark mode, runtime switching and custom accents.
- Elevation: the philosophy, roles, when to use layered mode and when to stay flat, with do and don’t examples.
- Components: every item with a “use when” line, including Patterns and the AI pack.
- AI interfaces: composing chat, agent, code, voice and workflow screens with the Vercel AI SDK.
- Design rules and framework differences (Base UI, Reka UI, Bits UI).
- Upgrading to a newer release.
Try it
Section titled “Try it”After installing, ask your agent things like:
- “Add Edmi UI to this Vite React project with the Slate and Ocean theme.”
- “Build a pricing section with Edmi pricing plans. Raise only the featured plan’s button.”
- “Make this form use Edmi fields and keep it flat, with one raised submit button, or wrap the page in a layered ElevationProvider.”
- “Build a chat page with the Edmi AI components and the AI SDK
useChat.” - “Switch this app to dark mode support and let users choose Stone or Slate.”
- “Upgrade the Edmi components in this project to the latest release.”
Update
Section titled “Update”npx skills updatepnpm dlx skills updateyarn dlx skills updatebunx skills updateThe skill is versioned with the repository; update it when you upgrade Edmi UI so its component list matches.