Ú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.
en todo el repo
0–100, la ruta de este skill
último commit aquí
últimos 90 días
25 tok en reposo
1 KB
Funciona con cualquier agente que lea SKILL.md
npx -y skills add ibelick/ui-skills --skill ui-skills-root --agent claude-codeSe instala solo en este repositorio.
Di cualquiera de estas frases y el agente debería cargar este skill.
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.
no skill needednpx ui-skills start
npx ui-skills categories
npx ui-skills list --category <category>
npx ui-skills get <slug>
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.
Reproducido de ibelick/ui-skills bajo licencia MIT. Leer esta página en markdown.
1 archivo en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.
Requiere Node.js para ejecutar la CLI con `npx ui-skills`.
Necesita en el PATH:npx
Este repo incluye 7 skills. Si instalas uno, normalmente ya tienes los demás. Ver el pack ui-skills entero y su comando de instalación
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.
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.
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.
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.
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.
Audita y corrige metadatos HTML: títulos, descripciones, canónicas, Open Graph, Twitter cards, favicons, JSON-LD y robots. Úsalo al añadir SEO, arreglar vistas previas, revisar Open Graph, configurar canónicas o publicar páginas nuevas.
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.
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.
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.
