UI Skills: 110 skills curados para que agentes dejen de generar interfaces genéricas

ui-skills.com de ibelick reúne guías de design engineering —accesibilidad, motion, craft, frameworks— con un CLI que enruta al agente al skill mínimo útil antes de tocar código. Open source, MIT y pensado para Cursor, Claude Code y Codex.

UI Skills — A skills repertoire for design engineers
Marca del proyecto: «UI Skills — A skills repertoire for design engineers». Fuente: ui-skills.com

UI Skills nació como respuesta a un problema recurrente en 2026: los agentes de código generan interfaces funcionales pero genéricas —espaciados incoherentes, motion que traba, metadatos rotos, accesibilidad olvidada. El proyecto de ibelick, publicado en ui-skills.com y bajo licencia MIT en GitHub, no es otro prompt suelto: es un directorio curado de 110 skills para design engineers y equipos frontend, con instalación por CLI, registry machine-readable y una capa de enrutado (ui-skills-root) que elige el skill más pequeño que resuelve la tarea.

Directorio UI Skills con filtros por Accessibility, Motion, Systems y tarjetas de skills
Página /skills: 110 skills filtrables por tema (Accessibility, Motion, Craft, frameworks…) con autor y descripción en cada tarjeta. Fuente: ui-skills.com/skills

Cómo se usa con un agente

La home recomienda un flujo explícito: pedir al agente que ejecute el CLI antes de implementar. Ejemplo citado en el sitio:

Run `npx ui-skills start` to fix this dialog motion.

El comando activa ui-skills-root, skill enrutador que inspecciona categoría, stack e intención, y carga solo el contexto necesario —preferiblemente un skill, dos como máximo, tres solo en revisiones amplias. El resto de comandos del CLI:

npx ui-skills
npx ui-skills start
npx ui-skills categories
npx ui-skills list --category motion
npx ui-skills get baseline-ui

Para instalar skills en el proyecto o en el agente, la documentación apunta a npx skills add ibelick/ui-skills y a comandos como npx ui-skills add baseline-ui o npx ui-skills add --all. Cada skill tiene página propia con comando de instalación copy-paste y un llms.txt por skill para consumo directo del agente.

Qué incluye el catálogo

Los skills no son todos de ibelick: el registry agrega contribuciones de Anthropic (frontend-design), shadcn/ui, Vercel Labs (Next.js, React, web-design-guidelines), Emil Kowalski, pbakaus (suite Impeccable: polish, audit, animate…), AccessLint, vuejs-ai, Microsoft Playwright y docenas más. Las categorías del CLI abarcan accesibilidad, motion, systems, visual, interaction, performance, craft, taste, typography, color, 3D, testing, tooling, video y stacks concretos (Next.js, Nuxt, Vue, React Native, Three.js, Remotion, SwiftUI).

Registry, llms.txt y ecosistema agente

Para integraciones automáticas, el sitio expone llms.txt con navegación y catálogo, y skills/registry.txt con una fila por skill (slug, URL del SKILL.md, descripción). Cada skill tiene además su propio llms.txt bajo /skills/{autor}/{slug}/llms.txt. El repositorio en GitHub —creado en enero de 2026, con miles de estrellas y forks activos— usa Astro y TypeScript; el código del sitio y de los skills vive en ibelick/ui-skills.

ibelick también mantiene skills propios más allá del baseline: fixing-metadata (Open Graph, Twitter cards, JSON-LD), fixing-motion-performance (compositor, scroll-linked motion, blur costoso) y otros orientados a craft. La tesis del proyecto encaja con la ola de skills de Cursor, Claude y Codex: en lugar de repetir reglas en cada chat, empaquetar criterio de design engineering en archivos reutilizables que el agente carga bajo demanda.

Por qué importa ahora

Con agentes escribiendo cada vez más UI —desde dashboards SaaS hasta landings completas— la diferencia ya no es «¿compila?», sino «¿se siente diseñada?». UI Skills ataca ese gap con un marketplace curado en lugar de un único mega-prompt. El enrutado (ui-skills-root + CLI) evita inflar el contexto con docenas de guías cuando basta fixing-motion-performance o baseline-ui.

Para equipos, el valor está en estandarizar revisiones: un mismo skill de accesibilidad WCAG, el mismo workflow shadcn, la misma checklist de metadata antes de publicar. Para individuos, es la forma más rápida de decirle al agente «no inventes otra vez una UI morada con gradiente» y apuntarlo a frontend-design o impeccable. El directorio sigue creciendo —con newsletter en la home y categorías nuevas en el CLI— bajo el paraguas de Interface Office.