القائمة
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 المهني
| 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:
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.