# Ui Skills Root

> Úsalo antes de trabajo relacionado con UI para seleccionar el contexto de UI Skills más pequeño y útil a través de la CLI ui-skills.

Fuente: https://skillsagentes.com/skills/ibelick/ui-skills/ui-skills-root
Markdown: https://skillsagentes.com/skills/ibelick/ui-skills/ui-skills-root.md

Repositorio: https://github.com/ibelick/ui-skills
Autor: ibelick
Licencia: MIT
Actualizado: hace 3 meses
Coste de contexto: 25 tok instalada, 362 tok al activarse, 362 tok con todos los archivos del bundle
Bundle: 1 archivo, 1 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add ibelick/ui-skills --skill ui-skills-root --agent claude-code
# Cursor
npx -y skills add ibelick/ui-skills --skill ui-skills-root --agent cursor
# Codex
npx -y skills add ibelick/ui-skills --skill ui-skills-root --agent codex
# Gemini CLI
npx -y skills add ibelick/ui-skills --skill ui-skills-root --agent gemini
# Windsurf
npx -y skills add ibelick/ui-skills --skill ui-skills-root --agent windsurf
# Cline
npx -y skills add ibelick/ui-skills --skill ui-skills-root --agent cline
```

## Qué hace

- Actúa como capa de enrutamiento que decide si una tarea es de UI; si no lo es, responde `no skill needed` y no carga ningún contexto.
- Inspecciona las categorías y skills disponibles con la CLI `ui-skills` (`npx ui-skills categories`, `npx ui-skills list --category <category>`) antes de implementar.
- Carga el conjunto de skills más pequeño útil, nunca más de 3, y prefiere un único skill cuando la tarea solo necesita un ángulo.
- Si el objetivo de UI no está claro, hace una pregunta corta al usuario en lugar de proceder.
- Enruta por tema, luego stack y luego especificidad, prefiriendo skills específicos sobre amplios y los de framework cuando el stack es obvio.

## Cuándo usarla

- Antes de cualquier trabajo relacionado con UI, para seleccionar el contexto de UI Skills más pequeño útil mediante la CLI `ui-skills`.
- Cuando un agente en Codex, Cursor o Claude Code tiene un objetivo de UI claro.
- Cuando el objetivo de UI no está claro, para plantear una pregunta corta en lugar de asumir.
- Para revisiones amplias, rediseños o trabajo multi-superficie que pueda necesitar hasta 3 skills.

## Cuándo no

- Cuando la tarea no está relacionada con UI: el protocolo devuelve `no skill needed` y no se carga contexto.

## Qué la activa

- "Quiero cambiar el estilo de estos componentes, ¿qué skill de UI me recomiendas?"
- "Voy a rediseñar la página de inicio, ¿qué contexto de UI necesito cargar?"
- "Antes de tocar el frontend, selecciona el skill de UI más adecuado para esta tarea."
- "El botón no se alinea bien, ¿hay un skill específico para arreglar ese layout?"

## Antes de instalar

- Requiere Node.js para ejecutar la CLI con `npx ui-skills`.
- Necesita en el PATH: npx

## Archivos

- SKILL.md — 1 KB

## SKILL.md

Reproducido tal cual desde ibelick/ui-skills bajo MIT. Esta sección es el documento original y está en inglés.

# 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.

## Dónde encaja

- Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual.
- Creador: [ibelick](https://skillsagentes.com/creators/ibelick.md) — 7 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Create Design Md](https://skillsagentes.com/skills/ibelick/ui-skills/create-design-md.md): Crea o actualiza un DESIGN.md desde un repositorio o web pública: documenta el lenguaje de diseño, reconstruye el sistema visual y extrae tokens y pautas de evidencia. No modifica código fuente ni convierte patrones accidentales en diseño.
- [Improve Ui](https://skillsagentes.com/skills/ibelick/ui-skills/improve-ui.md): Audita una interfaz contra su diseño, detecta problemas de UI verificados y escribe planes autocontenidos sin tocar código. Útil para revisar, refinar o limpiar sin cambiar la identidad, ver deriva del design system o preparar un handoff.
- [Baseline Ui](https://skillsagentes.com/skills/ibelick/ui-skills/baseline-ui.md): Pule rápido el código de interfaz corrigiendo espaciado, jerarquía, tipografía y pequeños problemas de layout. Úsalo cuando la interfaz necesite una limpieza o un pulido rápido.
- [Fixing Accessibility](https://skillsagentes.com/skills/ibelick/ui-skills/fixing-accessibility.md): Audita y corrige problemas de accesibilidad HTML: ARIA, navegación por teclado, gestión del foco, contraste de color y errores de formulario. Úsalo al añadir controles interactivos, formularios, diálogos o revisar WCAG.
- [Fixing Motion Performance](https://skillsagentes.com/skills/ibelick/ui-skills/fixing-motion-performance.md): Audita y corrige problemas de rendimiento en animaciones: layout thrashing, propiedades del compositor, movimiento ligado al scroll y desenfoques. Úsalo si las animaciones van a tirones o revisas el rendimiento de animaciones CSS/JS.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)