Use with AI

PUI publishes plain-text files, an installer and agent rules made for AI tools.

Install in a project

The pui command sets up a React + Tailwind v4 project and adds components from the PUI registry.

Set up the project (style, cn(), AGENTS.md, CLAUDE.md, Magoo MCP)

npx @aline-aroucha/pui init

Add components

npx @aline-aroucha/pui add button card input

Add every component

npx @aline-aroucha/pui add --all

Update installed components

npx @aline-aroucha/pui add --all --overwrite

Files for agents

Index for LLMs

https://aline-aroucha.github.io/pui/llms.txt

All documentation in one file

https://aline-aroucha.github.io/pui/llms-full.txt

Project rules (AGENTS.md)

https://aline-aroucha.github.io/pui/AGENTS.md

Tokens as JSON

https://aline-aroucha.github.io/pui/tokens.json

CSS with the tokens (globals.css)

https://aline-aroucha.github.io/pui/globals.css

Make the agent follow the rules

pui init writes AGENTS.md and a CLAUDE.md that imports it, so Claude Code and Codex pick up the rules automatically.
For Cursor, save the same text as .cursor/rules/pui.mdc. For GitHub Copilot, as .github/copilot-instructions.md.
pui init also adds the read-only Magoo MCP to .mcp.json, so agents can check keyboard, screen reader and acceptance criteria while they build.
To let agents find and install PUI components on their own, pui init registers @pui in components.json; turn on the shadcn MCP with npx shadcn@latest mcp init.
Every page on this site has a Markdown twin: use Copy for LLM at the top of a page, or replace .html with .md in its address.

Registry

{
  "registries": {
    "@pui": "https://aline-aroucha.github.io/pui/r/{name}.json"
  }
}

Suggested first prompt

Use the PUI design system. Read https://aline-aroucha.github.io/pui/llms-full.txt before you start.
Use only components from @/components/ui, color only through tokens (bg-primary, text-muted-foreground…),
US English UI copy, one primary action per area, and Magoo behavior for every component.