Use ao projetar telas (ux-designer), implementar componentes (dev-fullstack), ou revisar código de UI (code-reviewer). Define o padrão de acessibilidade adotado pelo projeto (WCAG 2.2 AA) com regras práticas e verificáveis — não teoria abstrata.
Use ao construir ou rodar testes E2E com Playwright, quando project.config.md indicar esta ferramenta. Cobre estrutura de pastas, seletores recomendados, e como lidar com Server Components do Next.js.
Use quando o project.config.md indicar sistema público ou conformidade com o Padrão Digital de Governo (DSGOV). O frontend Angular+DSGOV SEMPRE começa com git clone do quickstart oficial. Para formulários, importar GovbrDsWebcomponentsModule no componente…
Use ao implementar frontend em Angular, quando project.config.md indicar esta stack. Cobre estrutura de projeto Angular 17+, standalone components, signals, biblioteca de componentes padrão (Angular Material ou PrimeNG), acessibilidade WCAG 2.2 AA, e padrão…
Use ao implementar frontend em Next.js com shadcn/ui, quando project.config.md indicar esta stack. Cobre estrutura de pastas, convenção de hooks, uso de componentes shadcn/ui, e padrões específicos do App Router.
Use SEMPRE que for gerar, editar ou revisar um diagrama Mermaid — design.md, diagrama-banco.md, spec.md, README ou qualquer .md do projeto. Contém as regras de sintaxe que evitam erro de renderização (aspas, caracteres especiais, quebra de linha, palavras…
Use ao criar gráficos, dashboards ou qualquer visualização de dados. Ativa com "gráfico", "dashboard", "visualizar", "chart", "plot", "relatório visual". Incorpora princípios de Tufte, NYT Graphics e Linear. Escolhe a biblioteca pela stack e pelo propósito —…
Use ao gerar manifests Kubernetes, configuração ArgoCD e pipeline GitLab CI/CD para o projeto. Cobre estrutura Kustomize (base + overlays por ambiente), ApplicationSet do ArgoCD central multi-cluster, e .gitlab-ci.yml com modelo GitOps. Agnóstico de stack de…