AI & Agents

A packaged skill so AI agents (Claude Code, Cursor, …) generate correct sve-ui code instead of hallucinating props.

Why a skill

LLMs guess component APIs. sve-ui ships an LLM-first skill that teaches an agent the real rules: the theme.css setup, single-vs-namespace imports, the Bits child snippet for overlay triggers, the body-class theming gotcha, and the --sve-* model. The result: generated code that compiles and matches the library.

Add the skill

The skill lives in the repo:

skills/
skills/sve-ui-usage/
├── SKILL.md              # runtime instruction contract
└── references/
    └── components.md     # full catalog + per-component snippets

Drop it into your agent's skills directory:

Terminal
# Claude Code: copy the skill into your project (or user) skills dir
cp -r sve-ui/skills/sve-ui-usage .claude/skills/

# Then just ask your agent to build UI with sve-ui — it will
# follow the real API instead of guessing props.

What it encodes

  • Import sve-ui/theme.css once; no Tailwind/config in the consumer.
  • Single (default) vs namespace (Dialog.*, Select.*) imports.
  • Overlays portal to <body> → mirror the theme class onto it.
  • Custom overlay triggers use the Bits child snippet.
  • Slider uses value + onValueChange (+ thumbLabel); controls need accessible names.
  • Theme via --sve-*; don't put Tailwind layout utilities on components.

llms.txt

Any agent (no skill install needed) can read sveui.org/llms.txt — a concise, always-current index of the usage rules, docs and full component catalog, generated from the component registry so it never drifts.

Status & the MCP question

Skill & llms.txt: available · MCP: not planned

The skill and llms.txt ship today. An MCP server is intentionally deferred.

An MCP server's headline value (browse + install components from a registry) doesn't apply here: sve-ui is a styled npm package, not a copy-paste registry — you pnpm add sve-ui once. The remaining need (feeding agents the real API) is already covered by the skill and llms.txt at zero hosting/config cost. We'll revisit an MCP only for agent actions a static file can't do.

Source: github.com/rodriabregu/sve-ui.