Communitygithub.com

alty-oss/dev-design

Use when mapping existing UI tokens/components or defining a coherent token and component contract for implementation.

What is dev-design?

dev-design is a Claude Code agent skill that use when mapping existing UI tokens/components or defining a coherent token and component contract for implementation.

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

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

Design system

Português (Brasil) Inventory current components, tokens, type, spacing and interaction conventions first. Reuse before adding a parallel system. Write tokens.json and component decisions using the artifact contract. Map semantic roles to existing token references when available; otherwise define compact values aligned with direction.md. Cover color roles, typography, spacing, radius and motion. Define focus and disabled treatments. Distinguish surface/text/action/status roles. For each affected component record purpose, API/variants, states, responsive rules and accessible behavior in flows.md or direction.md. Do not introduce a UI library or font dependency without checking the current stack and the user's constraints. Preserve explicit brand choices.

Individual skills in this repo

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

Related Skills