idanzam/Angular21-Arquitetura-Enterprise-Zoneless-Claude-Skill

O que Angular21-Arquitetura-Enterprise-Zoneless-Claude-Skill faz?

Arquitetura empresarial de produção com Angular 21 + PrimeNG 21 e sistema de skill para Claude Code, focado em aplicações zoneless, baseadas em Signals, em tempo real, com padrões escaláveis de frontend, WebSocket, Tailwind e engenharia de performance.

Visão Geral

Este skill capacita o Claude Code a gerar e gerenciar aplicações Angular modernas que seguem as melhores práticas empresariais. Ele elimina a dependência do Zone.js (modo zoneless), utiliza Signals para gerenciamento de estado reativo, e integra PrimeNG 21 para componentes de UI ricos e acessíveis. A arquitetura é modular, separando claramente responsabilidades em camadas (core, shared, features e layout), facilitando a manutenção e a escalabilidade em equipes grandes.

Por que isso é útil?

• Performance: Sem Zone.js, a detecção de mudanças é manual e altamente otimizada, resultando em menos ciclos de verificação e melhor performance em dispositivos móveis.
• Reatividade moderna: Signals permitem programação reativa explícita, sem os efeitos colaterais do Zone.js, com rastreamento de dependências granular.
• Produtividade: Componentes PrimeNG 21 prontos para produção (DataTable, Dialog, Chart, Form) aceleram o desenvolvimento.
• Escalabilidade: Estrutura de projeto clara, lazy loading de módulos/componentes standalone, e injeção de dependência hierárquica.

Plataformas Suportadas

• Claude Code: Como skill principal, fornecendo prompts e templates.
• Qualquer agente de IA que entenda SKILL.md: Pode ser adaptado para Cursor, Codex e outros.
• Ambientes Angular CLI: Projetos gerados com ng new ou ng generate usando o esquema do skill.

Como Funciona

O skill expõe um conjunto de instruções e padrões que o Claude Code segue automaticamente ao trabalhar com o projeto. As principais diretrizes incluem:

1. Modo Zoneless: Configurar provideZoneChangeDetection({ eventCoalescing: true }) e remover Zone.js do polyfills.
2. Estado com Signals: Usar signal(), computed() e effect() do Angular para estado local, e serviços com Signals para estado compartilhado.
3. PrimeNG 21: Utilizar componentes como p-table, p-dialog, p-chart com temas Tailwind via primeng/config.
4. WebSocket: Serviço encapsulando RxJS WebSocket ou Native WebSocket, com retry, reconexão e tratamento de erros.
5. Performance: ChangeDetectionStrategy.OnPush em todos os componentes, lazy loading de rotas, virtual scrolling em listas grandes, e memoização de computed signals.

Estrutura de Diretórios Recomendada

├── src/
│   ├── app/
│   │   ├── core/          # Serviços singleton, guards, interceptors
│   │   ├── shared/        # Componentes, diretivas, pipes reutilizáveis
│   │   ├── features/      # Módulos de funcionalidades (cada um lazy-loaded)
│   │   └── layout/        # Componentes de layout (navbar, sidebar)
│   ├── assets/            # Estáticos, imagens, ícones
│   └── styles/            # Estilos globais, configuração Tailwind

Exemplo de Uso

Ao interagir com o Claude Code dentro do projeto, você pode solicitar:

• "Crie um novo componente user-profile com formulário reativo, validação e integração com a API de usuários."
• "Implemente um WebSocket service para notificações em tempo real com reconexão automática."
• "Adicione um gráfico de pizza usando PrimeNG Chart com dados de um signal."

Instalação

Para usar este skill, adicione o arquivo SKILL.md na raiz do seu repositório ou na pasta .claude/skills/. Certifique-se de que seu ambiente Angular 21+ está configurado com suporte a zoneless (versão 21+ do Angular).

Licença

MIT