ui-skills-root — Claude Code skill: route UI tasks
A UI task router that picks the right skill before interface work. Run npx ui-skills start to launch it and let the agent select just enough context to solve the problem.
npx skills add ibelick/ui-skills --skill ui-skills-root -a claude-codeWhat ui-skills-root does
ui-skills-root is the entry point for UI Skills. When an agent gets a UI goal, this skill checks if it's actually UI-related, then picks a narrow, focused skill from the registry. Instead of loading everything, it follows a minimalist rule: one skill by default, two only if the task has two distinct angles, three only for full redesign or multi-surface work.
The protocol is straightforward: decide if it's UI work, pick a category, inspect it with the CLI, select the skills you need, load them, and build. Commands include npx ui-skills categories, npx ui-skills list --category, and npx ui-skills get <slug>. If the goal is fuzzy, the skill asks one clarifying question instead of guessing.
What it helps with
- pick the right UI skill before you start
- avoid loading unnecessary context
- route tasks by category and stack
- determine whether a skill is needed at all
Example prompts for the agent
- Using UI Skills for an animated button in React
- Start ui-skills-root to pick a skill for layout work
- Help me choose context via `npx ui-skills categories`
How to install ui-skills-root
1Skills CLI (Vercel)
npx skills add ibelick/ui-skills --skill ui-skills-root -a claude-code2Manually: put the files in place
~/.claude/skills/ui-skills-root/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/ui-skills-root/
1Skills CLI (Vercel)
npx skills add ibelick/ui-skills --skill ui-skills-root -a codex2Manually: put the files in place
.agents/skills/ui-skills-root/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add ibelick/ui-skills --skill ui-skills-root -a cursor2Manually: put the files in place
.cursor/skills/ui-skills-root/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install ibelick/ui-skills ui-skills-root2Manually: put the files in place
.github/skills/ui-skills-root/SKILL.md1Skills CLI (Vercel)
npx skills add ibelick/ui-skills --skill ui-skills-root -a gemini-cli2Platform CLI
gemini skills install https://github.com/ibelick/ui-skills --path skills/ui-skills-rootManually: put the files in place
.devin/skills/ui-skills-root/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add ibelick/ui-skills --skill ui-skills-root -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
From the same set5
The whole set →Similar
Questions about ui-skills-root
How do I install ui-skills-root in Claude Code?
Run npx skills add ibelick/ui-skills --skill ui-skills-root -a claude-code, then find the file at ~/.claude/skills/ui-skills-root/SKILL.md.
What does ui-skills-root do?
It's a router that determines if a task is UI-related, picks the right category, and loads only the minimum useful skill from the ui-skills registry.
How many skills at once?
One by default. Two only if the task has two clear angles. Three or more only for full redesign or multi-surface work.
Source text
SKILL.md · MIT
--- name: ui-skills-root description: Use before UI-related work to select the smallest useful UI Skills context through the ui-skills CLI. license: MIT metadata: author: ibelick version: "1.0.0" --- # UI Skills Root You are the routing layer for UI Skills. This skill is shown by `npx ui-skills start` and is also available in the registry. Use it when an agent in Codex, Cursor, or Claude Code has a clear UI goal. If the goal is unclear, ask one short question. If the goal is clear, choose the right category, load the smallest useful skill context, then implement. ## Protocol 1. decide if the task is UI-related 2. if not, return `no skill needed` 3. identify the likely category 4. inspect that category with the CLI 5. select the smallest useful skill set 6. load only selected skill(s) 7. implement using that context ## CLI ```bash npx ui-skills start npx ui-skills categories npx ui-skills list --category <category> npx ui-skills get <slug> ``` ## Selection Rules Prefer 1 skill. Use 2 only when the task needs two clear angles. Use 3 only for broad review, redesign, or multi-surface work. Never use more than 3. Route by topic, then stack, then specificity. Prefer specific skills over broad skills. Prefer framework-specific skills when the stack is obvious. For quick cleanup, prefer the most specific craft, visual, or layout skill available. If unsure, inspect categories and pick the safest narrow skill.
© ibelick · MIT · ibelick/ui-skills
