Skip to content
Design
Skill

/ui-skills-root

Use before UI-related work to select the smallest useful UI Skills context through the ui-skills CLI.

From plugin
ui-skills
11k9 skills

Claude Code

$ npx -y skills add ibelick/ui-skills --skill ui-skills-root --agent claude-code

SKILL.md

ui-skills-root.SKILL.md
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

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.

Read more
@ibelick
Ships withui-skills

Skills for Design Engineers. More on ui-skills.com

Stars on GitHub

Momentum

stars in total
10.9k
Star history of ibelick/ui-skills on GitHub, a chart by star-history.com

Other skills on ui-skills.

baseline-ui

baseline-ui

Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast…

@ibelick@ibelickInstall Skill
component-canvas

component-canvas

Build a full-screen, interactive canvas to explore existing UI components and their variants with pan and zoom.

@ibelick@ibelickInstall Skill
create-design-md

create-design-md

Create or update a DESIGN.md from an existing product repository or public website. Use when asked to document an interface's…

@ibelick@ibelickInstall Skill
fixing-accessibility

fixing-accessibility

Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form…

@ibelick@ibelickInstall Skill
fixing-metadata

fixing-metadata

Audit and fix HTML metadata including page titles, meta descriptions, canonical URLs, Open Graph tags, Twitter cards, favicons,…

@ibelick@ibelickInstall Skill

More skills from other plugins.

impeccable

impeccable

Use to design, redesign, critique, audit, polish or animate a frontend: websites, landing pages, dashboards, app UI, components,…

@pbakaus@pbakausInstall Skill

Questions about ui-skills-root.

Which coding agents can use ui-skills-root?
ui-skills-root installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.