Koala UIAI and agents
Koala's docs are built for coding agents too: every page as markdown, an llms.txt index, the whole docs in one file, and a skill that teaches an agent Koala's rules. How to use each.
What there is#
| What | Where | What it is for |
|---|---|---|
| Markdown pages | Any docs URL plus .md, like /docs/components/button.md | One page as clean markdown: its prose, tables and every code sample, without the demo markup. |
| Copy page | The top right of every docs page | Copies the page as markdown, opens the markdown, or starts a ChatGPT or Claude chat that reads it. |
| llms.txt | /llms.txt | The index: conventions, install and CLI commands, what is free and what is Pro, and every page with its summary. |
| llms-full.txt | /llms-full.txt | Every free docs page (guides, foundations, components) in one file. |
| The skill | npx koalaui-cli@latest skill | The house rules, tokens, themes and CLI in one SKILL.md, plus a reference per component, written into your project. |
Claude Code#
Install the skill in your project. Claude Code loads project skills from .claude/skills/, and the skill’s description tells it to follow Koala’s rules whenever you ask for UI. Start a new session after installing it.
npx koalaui-cli@latest skillCommit .claude/skills/koala-ui/ so everyone on the project works from the same rules, and run the command again after you update Koala. For a page the skill does not cover, a foundation or a section family, give Claude its markdown URL: “Read https://www.koalaui.com/docs/foundations/theming.md and add a theme switch to the header.”
Cursor, Codex and other agents#
Install the skill the same way, then point the agent at it. Cursor reads project rules from .cursor/rules/; this writes one:
mkdir -p .cursor/rules
cat > .cursor/rules/koala-ui.mdc <<'EOF'
---
description: Building UI with Koala UI
globs: ["**/*.tsx"]
alwaysApply: false
---
Before writing UI, read .claude/skills/koala-ui/SKILL.md and follow it.
Component docs are in .claude/skills/koala-ui/references/<name>.md.
EOFAgents that read AGENTS.md, Codex and Cursor among them, take the same instruction from there; this appends it:
cat >> AGENTS.md <<'EOF'
## UI
This project uses Koala UI. Before writing UI, read .claude/skills/koala-ui/SKILL.md and follow it.
Component docs are in .claude/skills/koala-ui/references/<name>.md.
EOFTo keep the skill somewhere else, pass --dir: npx koalaui-cli@latest skill --dir docs/koala-skill, and point the rule there.
ChatGPT, Claude and other chats#
On any docs page, open the Copy page menu at the top right. Copy page puts the page on your clipboard as markdown to paste into a chat; Open in ChatGPT and Open in Claude start a chat that reads the page for you. For a broader question, hand the assistant llms.txt, the index, or llms-full.txt, everything at once.
What an agent can install#
An agent runs the same CLI you do. Free items need nothing: every component, the lib helpers, the tokens and one sample section per family install anywhere with npx koalaui-cli@latest add <name>. Pro sections, page examples and templates install with your license once you have run npx koalaui-cli@latest login <key> on the machine, and an agent working there uses that seat. Without a license, add stops with a paywall message, and the skill tells the agent to report it rather than rebuild the section.
Pro source is never in the markdown. A section family’s page names its Pro variants and stops there; no .md page, llms file or skill reference carries the code of a Pro section, page or template.