菜单
Use esta habilidade para gerar ou evoluir o design system do CappyCloud - tokens, paletas, tipografia, espacamentos e padroes de componentes.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Realiza revisão de código técnica, usar está habilidade quando precisar fazer revisão de código, verificar conformidade com padrões arquiteturais (Hexagonal), qualidade de código, performance e corretude lógica.
Use esta habilidade quando precisar implementar interfaces e componentes no frontend do CappyCloud. O padrao legado e React 19 + Mantine 9, mas features com Spec Kit aprovado podem adotar outro design system, como shadcn/ui + Tailwind.
Perform a non-destructive cross-artifact consistency and quality analysis across spec.md, plan.md, and tasks.md after task generation.
Generate a custom checklist for the current feature based on user requirements.
Execute the implementation plan by processing and executing all tasks defined in tasks.md
Use esta habilidade quando precisar tomar decisoes de UX/UI no CappyCloud - padroes de componentes, fluxos, acessibilidade, estados e micro-interacoes. O padrao legado e React 19 + Mantine 9; features com Spec Kit aprovado podem usar shadcn/ui + Tailwind.
| name | design-system |
| description | Use esta habilidade para gerar ou evoluir o design system do CappyCloud - tokens, paletas, tipografia, espacamentos e padroes de componentes. |
Use esta skill para definir tokens, componentes, estados e padroes visuais do CappyCloud. A base ativa vem do plano Spec Kit da feature.
007-chat-centered-ui-theme: shadcn/ui + Tailwind CSS v4.web/src/components/ui/.web/src/lib/utils.ts com cn.web/src/index.css.Nao deixe dois sistemas visuais permanentes na mesma superficie autenticada. Em migracoes aprovadas, Mantine e CSS Modules podem existir apenas enquanto a superficie ainda nao foi migrada.
Defina cores base, tipografia, espacamento, radius e sombras em CSS variables.
No fluxo shadcn/Tailwind, exponha os tokens em web/src/index.css e conecte-os
ao tema Tailwind. No fluxo legado, os mesmos valores podem alimentar o tema
Mantine.
Use aliases que descrevem papel, nao cor:
--surface-base: var(--color-dark-900);
--surface-raised: var(--color-dark-800);
--surface-overlay: var(--color-dark-700);
--border-default: var(--color-dark-500);
--border-focus: var(--accent-primary);
--text-primary: var(--color-dark-050);
--text-secondary: var(--color-dark-200);
--text-muted: var(--color-dark-300);
--accent-primary: var(--color-blue-500);
--status-success: var(--color-green-500);
--status-error: var(--color-red-500);
--status-warning: var(--color-yellow-500);
Mapeie estados de componentes para tokens semanticos. Evite hex hardcoded em componentes. Estados minimos:
default -> hover -> active/pressed -> focus -> disabled -> loading -> error
Para 007-chat-centered-ui-theme, comece por:
buttondropdown-menudialogsheettabsinputtextareaselectbadgecardtabletooltipscroll-areaskeletonUse componentes de composicao em web/src/components/layout/,
web/src/components/chat/ e web/src/components/admin/ para montar a
experiencia real. Cards devem ter raio maximo de 8px salvo excecao do design
system ativo.
O CappyCloud deve manter a sensacao de ferramenta profissional premium, estilo IDE: contraste claro, hierarquia discreta, superficies organizadas e acoes primarias obvias. Evite paletas de uma unica familia de cor e evite depender de gradientes decorativos para comunicar estrutura.
Antes de considerar o design implementado: