Agent skill

Teach your AI coding agent the whole library. It finds where each component fits in your project and installs it with the right options, wired to real app state.

Install

Claude Code
mkdir -p .claude/skills/ui-design-library
curl -fsSL https://www.ui-design.co/skill/ui-design-library/SKILL.md \
  -o .claude/skills/ui-design-library/SKILL.md

Project skill — Claude loads it when you ask about these components. Use ~/.claude/skills/ to have it in every project. One plain-text file — read it first: SKILL.md · .mdc · AGENTS.md. Run it again to update.

Commands

Say them as plain requests — the skill maps them to these workflows.

Command
ui-design.co reveal

Lists every component with a line on what it is for. "What's in ui-design.co" routes here too.

Command
ui-design.co review

Reads your stack and scans the project for spots that fit — primary CTAs, hero headlines, AI loading states, prompt fields, mic buttons, cards over imagery. Returns a per-file list of what goes where and why. Read-only: nothing gets edited.

Command
ui-design.co apply

Installs the best-fit component where you are working — shadcn for React projects, the self-hosted file otherwise — places it with the right options and wires it to real app state (generating, thinking, voice toggle). Name one to skip the choice.

Try it

Prompt
Review my project and suggest where ui-design.co components fit
Prompt
Use the ui-design.co Prompt Input for our chat box and wire generating to the stream
Prompt
Show a Mercury Orb next to the assistant message while it is thinking
Prompt
Make the hero CTA a Liquid Metal Button and the headline Chrome Text
Prompt
Add a Voice Orb for dictation in the composer

What it knows

Every component, when to use it and its key options; how to install the free versions (shadcn for React, the self-hosted file elsewhere); and the rules — free files carry one preset, Pro installs use your personal command from the component page, keys are never invented or shared.