Claude Code integration

Claude Code already runs shell commands, so it can drive the properui CLI directly: the only setup is giving it enough context to reach for a real component instead of writing one from scratch.

Prerequisites

• A project already scaffolded with npx @properui/cli@latest init: Claude works best once components.json exists.
• Claude Code installed and authenticated (claude on your PATH).

Start using Proper UI with Claude

Describe what you're building in plain language and let Claude choose the components:

Build a settings page with a page header, a tabbed navigation between
"General" and "Billing", and a form with labeled inputs. Use Proper UI
components. Check `npx @properui/cli@latest search` for anything you're
not sure exists before writing custom markup.

Claude will typically run properui search or properui list to confirm component names, then properui add <name> for each one it decides to use, and finally write the page around them.

Install the Proper UI Skill

Rather than writing CLAUDE.md instructions by hand, install the Proper UI Skill once per project:

npx @properui/cli@latest agent init --client claude

This writes .claude/skills/properui/SKILL.md (which Claude Code loads automatically for every session, not just the one where you happen to mention the library) and appends a short pointer to CLAUDE.md (creating the file if it doesn't exist yet). The Skill encodes the full workflow: run properui info --json before touching UI code, search the registry before writing markup, prefer a full-page example for a whole screen, and keep semantic tokens, React Aria props and RTL-safe logical properties in anything written by hand. Re-running the command after a Skill update is safe: it replaces the installed file and the CLAUDE.md pointer in place.

With that in place, Claude reaches for properui add before improvising markup even on prompts that don't mention the library by name.

MCP integration

@properui/mcp lets Claude query the registry directly instead of shelling out to npx for each lookup: list_components, search_components, get_component, get_component_docs, the design library tools search_screens, search_sections, search_flows, compare_screens and get_install_plan, and, on the local server, add_component, get_project_info and check_tokens. Register the remote server once, with no install and no account:

claude mcp add --transport http properui https://properui.dev/api/mcp

The remote server searches, compares and plans but has no project to write to, so Claude runs the CLI command that get_install_plan prints. To let add_component install straight into the project, run the local server instead:

claude mcp add properui -- npx -y @properui/mcp

agent init --client claude also writes the local server to the project's .mcp.json. The full tool list is on the MCP page. The CLI still works on its own: Claude Code runs properui search and properui add through its shell tool when the server is not connected.

FAQs