v0.9.4defuss-shadcn
Theme

defuss-shadcn / Introduction / vibe-coding

Vibe Coding / Agentic Engineering

defuss-shadcn is written for agents as much as for people: every component documents its exact HTML in a component skill, and one Agent Skill ties them together. Install it into your coding agent, describe the UI you want, and the agent composes it from the real components - no framework, no build step.

On this page (2)

§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

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