Communitygithub.com

alty-oss/dev-design

Usa esta skill cuando necesites inventariar tokens o componentes de UI existentes, o definir un contrato coherente de tokens y componentes para su implementación.

¿Qué es dev-design?

Esta skill está diseñada para guiar a agentes de IA y desarrolladores en el proceso de diseño de sistemas de componentes y tokens de interfaz de usuario. Su objetivo principal es promover la reutilización, la coherencia y la documentación precisa antes de introducir nuevas dependencias o sistemas paralelos. Funciona estableciendo un flujo de trabajo claro: primero, se debe inventariar los componentes, tokens de diseño (color, tipografía, espaciado, etc.) y convenciones de interacción existentes; luego, documentar las decisiones en archivos como `tokens.json` y registros de componentes, siguiendo un contrato de artefacto predefinido (por ejemplo, `templates/workflow.md`). Es compatible con plataformas de desarrollo que utilizan archivos markdown y JSON, y su utilidad radica en evitar la duplicación de esfuerzos, mantener la consistencia visual y funcional en el producto, y facilitar la comunicación entre diseñadores y desarrolladores. Además, obliga a verificar el stack tecnológico actual y las restricciones del usuario antes de agregar librerías de UI o nuevas fuentes tipográficas, preservando así las decisiones explícitas de marca.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alty-oss/dev-design/tree/HEAD/skills/design-system

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Sistema de diseño

Português (Brasil) Primero, inventaría los componentes actuales, tokens, tipo, espaciado y convenciones de interacción. Reutiliza antes de agregar un sistema paralelo. Escribe tokens.json y las decisiones de componente usando el contrato de artefacto. Asigna roles semánticos a referencias de tokens existentes cuando estén disponibles; de lo contrario, define valores compactos alineados con direction.md. Cubre roles de color, tipografía, espaciado, radio y movimiento. Define los tratamientos de foco y deshabilitado. Distingue roles de superficie/texto/acción/estado. Para cada componente afectado, registra el propósito, API/variantes, estados, reglas responsivas y comportamiento accesible en flows.md o direction.md. No introduzcas una librería de UI o dependencia de fuente sin verificar el stack actual y las restricciones del usuario. Preserva las decisiones explícitas de marca.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

Skills relacionados