/ui-skills-root
Use before UI-related work to select the smallest useful UI Skills context through the ui-skills CLI.
$ npx -y skills add ibelick/ui-skills --skill ui-skills-root --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/ui-skills-root
Context preview
The summary Claude sees to decide when to auto-load this skill.
Use before UI-related work to select the smallest useful UI Skills context through the ui-skills CLI.
SKILL.md
ui-skills-root.SKILL.mdname: 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
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.
Skills for Design Engineers More on ui-skills.com Run npx ui-skills start to route your agent through the right UI skill set for the task.
Repo: ibelick/ui-skills
Other skills on ui-skills.
- /baseline-ui
Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.
Open skill - /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 design language, reconstruct its visual system, extract design tokens and guidance from current evidence, or give coding agents persistent UI context. Do
Open skill - /fixing-accessibility
Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.
Open skill - /fixing-metadata
Audit and fix HTML metadata including page titles, meta descriptions, canonical URLs, Open Graph tags, Twitter cards, favicons, JSON-LD structured data, and robots directives. Use when adding SEO metadata, fixing social share previews, reviewing Open Graph tags, setting up
Open skill - /fixing-motion-performance
Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.
Open skill - /improve-ui
Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent. Strictly read-only on product source. Use when asked to review, refine, improve, or clean up an interface without
Open skill