Agent setup

Agents pick the right Wisty UI component when they read its docs before writing code. The skill, the MCP server and the rules below each make that happen, and you need only one.

Install the skill

The skill has the agent read your project's components.json, find the right component, read its docs, install it and check the result. It works in Claude Code, Codex, Cursor, VS Code and the other agents the skills CLI supports.

npx skills add https://ui.wisty.ai --skill wisty-ui

The CLI asks which agents to install it for. To install it by hand, save ui.wisty.ai/skill.md as .agents/skills/wisty-ui/SKILL.md in your project, or as .claude/skills/wisty-ui/SKILL.md for Claude Code.

Connect an MCP server

Wisty UI's MCP server lets the agent search components by what they do and read their docs and install steps. shadcn's MCP server finds @wisty components too, once @wisty is in your components.json.

Start with a prompt

An agent that can read a web page can start from this one:

Read https://ui.wisty.ai/docs/agents.md, then add an account lookup to the new contact form with Wisty UI.

Docs as Markdown

Every page on this site has a Markdown version. Copy page copies the same text.

Page	Markdown
Every component and docs page	`https://ui.wisty.ai/llms.txt`
A component, for Radix projects	`https://ui.wisty.ai/button.md`
A component, for Base UI projects	`https://ui.wisty.ai/button.md?base=base`
A docs page	`https://ui.wisty.ai/docs/theming.md`

Rules for your project

For an agent without the skill, paste this into the instructions file it reads: AGENTS.md for Codex, Cursor, VS Code and most other agents, CLAUDE.md for Claude Code, or .github/copilot-instructions.md for GitHub Copilot. In a Cursor project rule, .cursor/rules/wisty-ui.mdc, put it under frontmatter with alwaysApply: true.

## Wisty UI

- Wisty UI is a shadcn registry, `"@wisty": "https://ui.wisty.ai/r/{style}/{name}.json"` in components.json. Install with `npx shadcn@latest add @wisty/<name>`, never with npm.
- Before using a component, read https://ui.wisty.ai/<name>.md, with `?base=base` in a Base UI project. Choose by its When to use and When not to use. Never invent a component, prop or part.
- The style in components.json picks the library. Radix components take `asChild`, Base UI components take `render`. Follow the examples for this project's library.
- Add the theme once with `npx shadcn@latest add @wisty/cosmos` (or `@wisty/lightning-blue`, `@wisty/neutral`). It writes the theme into the Tailwind stylesheet.
- Keep shadcn's names, props and variants. Style with the theme's tokens (`bg-primary`, `text-muted-foreground`), never literal colors.
- Put the `dark` class on `<html>`.
- Use Salesforce's icons from `@salesforce-ux/icons`, unaltered.
- Before calling it done, run the build, then check the keyboard and every theme the app uses.