UIFrontend

Ui Skills Root

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

JJulien Thibeaut (ibelick)·UI·MIT

Library skill — the default version is maintained in GitHub; edits you make live in your own clone.

Use this skillDownload .zip
How does this work?
  • ChatGPT opens a new chat with the skill loaded. If it's too long for a link, it's copied to your clipboard — just paste.
  • Claude works the same way. To install it permanently, download the .zip and upload it under Claude → Settings → Capabilities → Skills (Pro/Team/Enterprise).
  • Copy prompt copies the skill so you can paste it into any assistant, including Grok.

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.