Communitygithub.com

alty-oss/dev-design

Use para mapear tokens/componentes de UI existentes ou definir um contrato coerente de tokens e componentes para implementação.

O que é dev-design?

Esta skill capacita o agente a gerenciar sistemas de design de forma estruturada. Ela orienta o inventário de componentes, tokens, tipografia, espaçamento e interações já existentes no projeto, priorizando reuso sobre a criação de sistemas paralelos. A skill utiliza o contrato de artefato (`templates/workflow.md`) para gerar arquivos `tokens.json` e decisões de componentes, mapeando papéis semânticos (como cores, tipografia, espaçamento, raio e movimento) para referências de tokens existentes ou definindo valores compactos alinhados ao `direction.md`. Também cobre a definição de estados de foco e desabilitado, além de distinguir papéis de superfície/texto/ação/status. Para cada componente afetado, a skill registra propósito, API/variantes, estados, regras responsivas e comportamento acessível, registrando essas informações em `flows.md` ou `direction.md`. Importante: a skill impede a introdução de bibliotecas de UI ou fontes sem verificar a stack atual e as restrições do usuário, preservando escolhas explícitas de marca.

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

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Sistema de design

Português (Brasil) Faça o inventário dos componentes, tokens, tipo, espaçamento e convenções de interação atuais primeiro. Reutilize antes de adicionar um sistema paralelo. Escreva tokens.json e as decisões de componentes usando o contrato de artefato. Mapeie papéis semânticos para referências de tokens existentes quando disponíveis; caso contrário, defina valores compactos alinhados com direction.md. Cubra papéis de cor, tipografia, espaçamento, raio e movimento. Defina tratamentos de foco e desabilitado. Distinga papéis de superfície/texto/ação/status. Para cada componente afetado, registre propósito, API/variantes, estados, regras responsivas e comportamento acessível em flows.md ou direction.md. Não introduza uma biblioteca de UI ou dependência de fonte sem verificar a stack atual e as restrições do usuário. Preserve escolhas explícitas de marca.

Individual skills in this repo

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

Habilidades Relacionadas