AI agents

Kanto is written down for the agents that write code with you — Claude Code, Cursor, GitHub Copilot, Codex — so the first screen they build is made of Kanto, used the right way.

Give your agent the instructions

The package ships AGENTS.md: what Kanto is, the rules that make code right the first time, the mistakes agents make and their fix, and every component in a line. Point your agent at it once.

Claude Code — add a line to CLAUDE.md at the root of your project:

Cursor — create .cursor/rules/kanto.mdc:

GitHub Copilot — add to .github/copilot-instructions.md:

Any agent — for Codex, and any agent that reads AGENTS.md, add to the one at your project’s root:

Every component page, where the agent looks

Each component's documentation is in the package, at node_modules/kanto-ds/dist/docs/<tag>.md — the properties, the events, what a screen reader hears and when not to use it. AGENTS.md tells the agent to read a component's page before using it, as you would.

Or ask the docs as it codes

kanto-mcp is Kanto's documentation as an MCP server: the agent lists the components, searches the docs, and reads a component's page and its whole API — attributes, properties, events, slots, CSS parts — at the version you install. In Claude Code:

In Cursor, Windsurf or VS Code, the same command in the MCP configuration: { "command": "npx", "args": ["-y", "kanto-mcp"] }.

For a chat that cannot read your project

Give it one of these, by link or pasted:

• llms.txt — what Kanto is, the rules, and a link to every page.
• llms-full.txt — the same, then every component page in full, in one file.
• agents.md — the instructions above, without a project.

Prompts that work

Ask for the screen and name the system; the agent finds the components.

Working in this repository

The SKILL.md at the repository's root is a Claude Code skill: the design guidelines, the tokens and the components, read before building in Kanto itself.