ui-skills-root – Design & UI skill for AI agents
Use before UI-related work to select the smallest useful UI Skills context through the ui-skills CLI.
Install the ui-skills-root skill with one command
Pick the tool you use, copy the command and paste it in your terminal. The skill lands in that tool's skills folder and is ready in your next session.
Claude Code
mkdir -p ~/.claude/skills && curl -fsSL https://skill.dn1nguoi.com/z/ui-skills-root-5e365.tgz | tar xz -C ~/.claude/skills
Call it in Claude Code: /ui-skills-root – then describe the task you want done.
Codex
mkdir -p ~/.codex/skills && curl -fsSL https://skill.dn1nguoi.com/z/ui-skills-root-5e365.tgz | tar xz -C ~/.codex/skills
Call it in Codex: $ui-skills-root – then describe the task you want done.
Hermes Agent
mkdir -p ~/.hermes/skills && curl -fsSL https://skill.dn1nguoi.com/z/ui-skills-root-5e365.tgz | tar xz -C ~/.hermes/skills
Call it in Hermes Agent: /ui-skills-root – then describe the task you want done.
DeepSeek
mkdir -p ~/.deepcode/skills && curl -fsSL https://skill.dn1nguoi.com/z/ui-skills-root-5e365.tgz | tar xz -C ~/.deepcode/skills
Call it in DeepSeek: /ui-skills-root – then describe the task you want done.
SKILL.md content
UI Skills Root
When to Use
Use this skill when you need use before UI-related work to select the smallest useful UI Skills context through the ui-skills CLI.
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.
Limitations
- Use this skill only when the task clearly matches its upstream source and local project context.
- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.
Related skills
- ui-states – Design and build the UI states agents forget: first use, empty, loading, error, offline…
- ui-tokens – View, add, or modify design tokens in the StyleSeed design system
- ui-update – Update StyleSeed engine in your project — analyzes what's outdated and updates safely
- ui-ux-designer – Create interface designs, wireframes, and design systems. Masters user research…
- ui-ux-pro-max – Comprehensive design guide for web and mobile applications. Use when designing new UI…
- ui-visual-validator – Rigorous visual validation expert specializing in UI testing, design system compliance…
- uiverify-triage-visual-changes – Triage a UI Verify visual regression build from your coding agent over MCP: sort changed…
- unship – Compare AI agent-made UI variants locally in a real app, then keep one and clean up…