Vibe Coding / Agentic Engineering

On this page (4)

§How the agent knows the system

The skill is one file - skills/defuss-shadcn/SKILL.md - with the install paths, the rules, a map of every documentation page and an index of every component skill. From there the agent reads the component skills it needs (structure, attributes, variants, ARIA) and copies the pattern - the same files you would read.

Vibe coding gets you a first draft fast; agentic engineering keeps it right. The system itself is built that way - every claim in these docs is checked by the verifier, see Verified Agentic Engineering (VAE).

§Install as an AI Agent Skill

defuss-shadcn can be installed directly into Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, Windsurf, and other Agent Skills-compatible coding agents.

Claude Code

Claude Code can install defuss-shadcn directly from its native plugin marketplace. Inside Claude Code:

/plugin marketplace add kyr0/defuss-shadcn

/plugin install defuss-shadcn@defuss-shadcn

Or from your shell:

claude plugin marketplace add kyr0/defuss-shadcn

claude plugin install defuss-shadcn@defuss-shadcn

Start a new Claude Code session after installation.

Codex, Cursor, Gemini CLI, Copilot, Windsurf, and others

The repository also exposes defuss-shadcn as a standard Agent Skill. The simplest cross-agent installation uses the open skills CLI:

npx skills add kyr0/defuss-shadcn --skill defuss-shadcn

The installer detects/selects supported coding agents interactively.

Install specifically for Codex:

npx skills add kyr0/defuss-shadcn \

  --skill defuss-shadcn \

  --agent codex

For Claude Code:

npx skills add kyr0/defuss-shadcn \

  --skill defuss-shadcn \

  --agent claude-code

For Cursor:

npx skills add kyr0/defuss-shadcn \

  --skill defuss-shadcn \

  --agent cursor

For Gemini CLI:

npx skills add kyr0/defuss-shadcn \

  --skill defuss-shadcn \

  --agent gemini-cli

For GitHub Copilot:

npx skills add kyr0/defuss-shadcn \

  --skill defuss-shadcn \

  --agent github-copilot

For Windsurf:

npx skills add kyr0/defuss-shadcn \

  --skill defuss-shadcn \

  --agent windsurf

Install for several agents at once:

npx skills add kyr0/defuss-shadcn \

  --skill defuss-shadcn \

  --agent claude-code \

  --agent codex \

  --agent cursor \

  --agent gemini-cli

Global installation

By default, skills installs into the current project. Use --global / -g to make defuss-shadcn available across projects:

npx skills add kyr0/defuss-shadcn \

  --skill defuss-shadcn \

  --agent codex \

  --global

Or interactively choose an agent and global scope:

npx skills add kyr0/defuss-shadcn

Non-interactive installation

Useful for bootstrap scripts and development environments:

npx skills add kyr0/defuss-shadcn \

  --skill defuss-shadcn \

  --agent codex \

  --global \

  --yes

Update installed skills

npx skills update

For Claude Code's native marketplace:

/plugin marketplace update defuss-shadcn

Using the skill

Once installed, simply ask the agent to build UI with defuss-shadcn. Codex can also invoke the skill explicitly:

$defuss-shadcn build a settings page with a sidebar, tabs and a form

§Task skills: plan, theme, review

The defuss-shadcn skill teaches the markup. Three task skills ship next to it, for three jobs. They add only what is specific to defuss-shadcn and leave the process - evidence, tests, gates - to the method a project already uses, such as defuss-vae. Their names carry a shadcn- prefix so they install next to defuss-vae's plan and review in harnesses that copy skills by folder name. Each folder is self-contained and generated from the release it ships with: the catalog, the token roles and the checkers' vocabulary cannot drift from the components.

Skill	What it does	What checks it
`shadcn-plan`	Plans a page, a whole frontend or a new component: it first finds the reusable units across the whole plan and composes the larger parts from them, prefers an existing component or one of its variants over a new one, and gives every unit a type (ATM to TPL), its tokens, states, APIs, boundaries, docs and examples.	A plan names a check for every invariant.
`shadcn-theme`	Creates or updates a theme from text, colours, a design guide or images (when the agent can read them): every token in light and dark, in the format the Theme Designer imports.	`scripts/theme-check.mjs`: unknown and missing tokens, one radius, WCAG contrast per pair - with the nearest lightness that passes.
`shadcn-review`	Reviews markup or a new component against the guides: native elements first, the data-attribute API, the State API, composition and boundaries, tokens, accessibility - and fixes what it confirms.	`scripts/markup-check.mjs`: modifier classes, parts and values a component does not have, invented tokens, loading order, globals, unnamed icon buttons.

How the two skill families divide - defuss-shadcn's tell the agent what to build, defuss-vae's how to work:

§How the skills divide

defuss-shadcn's skills tell the agent what to build - the components as their documented markup, a plan from reusable units, a checked theme, a review - and lead to a consistent UI. defuss-vae's skills tell it how to work - plan, implement, the gate, finalize - and lead to quality that scales. Play the steps, or click a node.

<figure class="diagram" id="skills-map" aria-label="How the skills divide: defuss-shadcn's skills tell the agent what to build - the components, their guidelines, a plan, a theme, a review - and lead to a consistent UI; defuss-vae's skills tell it how to work - plan, implement, gate, finalize - and lead to quality that scales" style="--diagram-node-w:8rem"><script type="application/json" class="diagram-spec">{"type":"flow","steps":true,"interactive":true,"cols":6,"nodes":[{"id":"agent","name":"Your agent","meta":"Claude Code · Codex · Cursor · Gemini CLI · Copilot · Windsurf","col":1,"row":2,"step":1,"tone":"accent"},{"id":"ref","name":"defuss-shadcn","eyebrow":"defuss-shadcn","meta":"every component as its documented markup; the rules","col":2,"row":1,"step":2},{"id":"plan","name":"shadcn-plan","eyebrow":"defuss-shadcn","meta":"reusable units first, then compose","col":3,"row":1,"step":3},{"id":"theme","name":"shadcn-theme","eyebrow":"defuss-shadcn","meta":"a theme from a brief, checked","col":4,"row":1,"step":4},{"id":"review","name":"shadcn-review","eyebrow":"defuss-shadcn","meta":"the checker, then judgment","col":5,"row":1,"step":5},{"id":"ui","name":"A consistent UI","meta":"no invented classes, no slop","col":6,"row":1,"step":6,"shape":"pill","tone":"ok"},{"id":"vplan","name":"plan","eyebrow":"defuss-vae","meta":"trace · probe · the smallest plan","col":2,"row":3,"step":7},{"id":"vimpl","name":"implement","eyebrow":"defuss-vae","meta":"fully agentic","col":3,"row":3,"step":8},{"id":"vgate","name":"gate","eyebrow":"defuss-vae","meta":"verify → review → docs","col":4,"row":3,"step":9,"tone":"warn"},{"id":"vfinal","name":"finalize","eyebrow":"defuss-vae","meta":"commits · changelog · memory","col":5,"row":3,"step":10},{"id":"quality","name":"Quality that scales","meta":"failure modes fixed, docs that hold","col":6,"row":3,"step":11,"shape":"pill","tone":"ok"}],"edges":[{"from":"agent","to":"ref","label":"what to build"},{"from":"ref","to":"plan"},{"from":"plan","to":"theme"},{"from":"theme","to":"review"},{"from":"review","to":"ui"},{"from":"agent","to":"vplan","label":"how to work"},{"from":"vplan","to":"vimpl"},{"from":"vimpl","to":"vgate"},{"from":"vgate","to":"vimpl","label":"fix","tone":"warn"},{"from":"vgate","to":"vfinal"},{"from":"vfinal","to":"quality"}]}</script></figure>

The checkers run with Node 18 or later (or Bun) and have no dependencies. In Claude Code the plugin installs all four skills; plan and review run when you ask for them:

/defuss-shadcn:shadcn-theme a calm Nordic theme: slate blues, a teal brand, soft corners

/defuss-shadcn:shadcn-plan an issue tracker with a board, a list and a detail sheet

/defuss-shadcn:shadcn-review src/pages/settings.html

With the skills CLI, add all four, or one by name:

npx skills add kyr0/defuss-shadcn --skill '*'

npx skills add kyr0/defuss-shadcn --skill shadcn-theme

Comments, ideas or improvements? Edit this page's source on GitHub