Repolode
Enviar
jakubkrehel

jakubkrehel/skills

Colección de skills para agentes que ayudan a crear mejores interfaces, con recursos sobre accesibilidad, diseño, tipografía, color, redacción y acabado visual.

Ver en GitHubSitio web
Estrellas
8,038
Forks
307
Issues abiertos
5
Último commit
hace 8 días

¿Qué es?

Este repositorio reúne skills para agentes: paquetes de instrucciones reutilizables que los agentes de programación con IA pueden cargar para mejorar el trabajo con interfaces. Abarcan accesibilidad, diseño, tipografía, color, textos de interfaz y acabado visual. Cada skill se puede usar por separado o combinar con una única skill de revisión.

Las skills se centran en aspectos concretos de una interfaz. better-accessibility revisa el comportamiento del teclado y el foco, ARIA, los formularios y los anuncios para lectores de pantalla según WCAG 2.2. better-typography abarca la escala tipográfica, las funciones de las fuentes, el ajuste de línea y el truncamiento, mientras que better-colors genera paletas, asigna nombres a los tokens semánticos y mide el contraste. better-writing y better-layout se ocupan de las etiquetas, los errores, los estados vacíos y la estructura adaptable.

Además de las skills de revisión, hay skills para crear interfaces a partir de un archivo de Figma o una imagen de diseño; revisar una rama o pull request en busca de regresiones en la interfaz; representar un componente con sus distintos estados o casos límite en una página temporal; y generar varias versiones de un componente para compararlas. La instalación se realiza con npx skills add o mediante un plugin de Claude Code.

Funciones clave

  • 01Combina las comprobaciones de accesibilidad, diseño, redacción, tipografía, color y acabado visual en una sola revisión.
  • 02Comprueba el teclado, el foco, ARIA y los formularios según WCAG 2.2.
  • 03Genera paletas de colores, asigna nombres a los tokens semánticos y mide el contraste.
  • 04Crea interfaces a partir de un archivo de Figma o una imagen de diseño, usando los tokens y componentes existentes del proyecto.
  • 05Representa un componente en sus distintos estados en una página temporal para someterlo a pruebas de estrés.

Casos de uso

  • Revisar una pull request en busca de regresiones en la interfaz antes de fusionarla.
  • Auditar una aplicación existente para detectar problemas de navegación con teclado y lectores de pantalla.
  • Configurar un sistema de color con tokens semánticos y comprobaciones de contraste.
  • Convertir un diseño de Figma en código que siga el sistema de diseño.

Inicio rápido

  1. 1

    Instala la colección de skills

    npx skills add jakubkrehel/skills
  2. 2

    O añade el marketplace de plugins de Claude Code

    /plugin marketplace add jakubkrehel/skills
  3. 3

    Luego, instala el plugin

    /plugin install interfaces@interfaces

Antes de usarlo

  • Está compuesto por skills de agente en formato Markdown, por lo que necesitas un agente de programación con IA compatible para aprovecharlo.

Temas

#ai-agents#ui#accessibility#design-system#typography#css#frontend-review

Preguntas frecuentes

¿Qué es skills?
Colección de skills para agentes que ayudan a crear mejores interfaces, con recursos sobre accesibilidad, diseño, tipografía, color, redacción y acabado visual. Este repositorio reúne skills para agentes: paquetes de instrucciones reutilizables que los agentes de programación con IA pueden cargar para mejorar el trabajo con interfaces. Abarcan accesibilidad, diseño, tipografía, color, textos de interfaz y acabado visual. Cada skill se puede usar por separado o combinar con una única skill de revisión.
¿skills es gratuito? ¿Qué licencia tiene?
skills es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿skills sigue mantenido?
Mantenimiento activo. El último commit de skills fue el 13 oct 2026.
¿Para qué puedo usar skills?
Revisar una pull request en busca de regresiones en la interfaz antes de fusionarla. Auditar una aplicación existente para detectar problemas de navegación con teclado y lectores de pantalla. Configurar un sistema de color con tokens semánticos y comprobaciones de contraste. Convertir un diseño de Figma en código que siga el sistema de diseño.
¿Cómo se instala skills?
Instala la colección de skills: npx skills add jakubkrehel/skills O añade el marketplace de plugins de Claude Code: /plugin marketplace add jakubkrehel/skills Luego, instala el plugin: /plugin install interfaces@interfaces
¿Dónde consigo skills?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/jakubkrehel/skills

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados