Agent Skills

Agent skills give AI assistants inline access to Prototyper UI patterns, component APIs, and examples — without needing to fetch from the web on every request.

Install (all detected tools)

curl -fsSL https://prototyper-ui.com/install.sh | bash

This detects and installs to: Claude Code, Cursor, OpenCode, Codex CLI, Gemini CLI.

Manual install — Claude Code

claude skill add https://prototyper-ui.com/install.sh

Or using the install script with a custom name:

curl -fsSL https://prototyper-ui.com/install.sh | bash -s -- my-prototyper-ui

What's included

The skill bundle contains:

File	Purpose
`SKILL.md`	Main skill definition: component list, patterns, theming, and pitfalls
`scripts/list.mjs`	Fetch and display all available components
`scripts/docs.mjs`	Fetch full docs + source for one or more components
`scripts/source.mjs`	Fetch component source code only
`scripts/theme.mjs`	Fetch complete OKLCH design tokens

Usage after install

Once installed, run scripts from within the skill directory:

# List all components
node ~/.claude/skills/prototyper-ui/scripts/list.mjs

# Get button docs and source
node ~/.claude/skills/prototyper-ui/scripts/docs.mjs button

# Get multiple component docs at once
node ~/.claude/skills/prototyper-ui/scripts/docs.mjs button dialog select

# Get component source only
node ~/.claude/skills/prototyper-ui/scripts/source.mjs button

# Get design tokens
node ~/.claude/skills/prototyper-ui/scripts/theme.mjs

Skill content

The SKILL.md covers:

Why Prototyper UI uses @base-ui/react instead of Radix UI
All 19 available components with descriptions
Component patterns: "use client", data-slot, CVA, cn(), compound exports
OKLCH color system and design token categories
CSS utility classes (focus-ring, status-disabled, etc.)
Animation guidelines and easing values
Common pitfalls and how to avoid them
Installation and project setup

Environment variable

Override the base URL to use a local docs server:

PROTOTYPER_UI_BASE_URL=http://localhost:3333 node scripts/docs.mjs button