メニュー
Implementa tokens de design DevKit em React/Next.js com CSS variables e Tailwind, garantindo consistencia de cores, tipografia e escala visual. Use quando: configurar design system, tema global e padroes de componentes.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | tokens-design-react |
| description | Implementa tokens de design DevKit em React/Next.js com CSS variables e Tailwind, garantindo consistencia de cores, tipografia e escala visual. Use quando: configurar design system, tema global e padroes de componentes. |
| user-invocable | true |
Padronizar a identidade visual DevKit em tokens reutilizaveis para componentes e paginas.
:root {
--es-purple: #7852ea;
--es-black: #000000;
--es-white: #ffffff;
--es-gray-1: #e9f2f4;
--es-gray-2: #f5f5f5;
--es-gray-3: #f4f1fd;
}
Uso recomendado:
--es-purple: botoes primarios, links, foco e elementos de destaque--es-black e --es-white: base de fundo/texto--es-gray-*: superfices, bordas, divisores e backgrounds suavesRestricao:
--es-purple como fundo predominante de pagina inteiraFontes da marca em .github/brand/fonts/: Sora-Regular.ttf, Sora-Bold.ttf, Sora-SemiBold.ttf, Sora-ExtraBold.ttf
@font-face {
font-family: 'Sora';
src: url('/fonts/Sora-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
Hierarquia:
Alinhamento:
text-align: left// tailwind.config.ts
export default {
theme: {
extend: {
colors: {
es: {
purple: '#7852EA',
black: '#000000',
white: '#FFFFFF',
gray1: '#E9F2F4',
gray2: '#F5F5F5',
gray3: '#F4F1FD',
},
},
fontFamily: {
sora: ['Sora', 'sans-serif'],
},
},
},
};
90px70px20pxCria e revisa automação de infraestrutura com Ansible: playbooks, roles, inventory, handlers, vars e Ansible Vault. Use quando: provisionar servidores, configurar ambientes, automatizar deploys sem Kubernetes, gerenciar configuração de múltiplos hosts.
Referência e guia de uso do AWS CLI para gerenciar recursos AWS: autenticação, IAM, EKS, ECR, S3, RDS, Secrets Manager e VPC. Use quando: provisionar ou gerenciar recursos AWS via linha de comando, scripts de automação ou pipelines CI/CD.
Referência e guia de uso do Azure CLI (az) para gerenciar recursos Azure: autenticação, resource groups, AKS, ACR, Key Vault, App Service, PostgreSQL gerenciado e networking. Use quando: provisionar ou gerenciar recursos Azure via linha de comando, scripts de automação ou pipelines CI/CD.
Aplica a identidade visual DevKit em interfaces React/Next.js com consistencia de marca, legibilidade e boas praticas de composicao. Use quando: criar telas, componentes, layouts ou qualquer UI que use marca DevKit.
Define e documenta os contratos de API REST entre camadas (frontend ↔ backend) e entre use cases e repositórios. Use quando: arquitetura foi definida e é preciso alinhar o que o backend expõe com o que o frontend consome, ou quando precisar formalizar as interfaces entre camadas internas.
Seleciona a linguagem backend ideal com base em criterios objetivos: performance, equipe, prazo, dominio e requisitos operacionais. Use quando: escolher stack antes de iniciar desenvolvimento, justificar linguagem no ADR, avaliar tradeoffs entre linguagens concorrentes.