المهارات Angular Expert
📦

Angular Expert

آمن

Construa Aplicações Angular Modernas com Signals

Lutando com padrões Angular desatualizados e NgModules complexos? Esta skill oferece orientação especializada em Angular moderno (v20+) com Signals, Standalone Components e arquitetura Zoneless.

يدعم: Claude Codex Code(CC)
📊 71 كافٍ
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "Angular Expert". Criar um componente de cartão de usuário com signal inputs

النتيجة المتوقعة:

Um UserCardComponent standalone usando input() para propriedades id, name e role com padrões, output() para eventos de seleção e um signal computado para formatação de exibição.

استخدام "Angular Expert". Como migrar de @Input() para signal inputs?

النتيجة المتوقعة:

Substitua o decorador @Input() pela função input(). Para inputs obrigatórios use input.required<T>(), para opcionais use input<T>(valorPadrao). Atualize referências no template para chamar signals como funções: {{ name() }} em vez de {{ name }}.

التدقيق الأمني

آمن
v1 • 2/24/2026

All static analysis findings were false positives. The skill contains documentation-only content (markdown and JSON configuration) with no executable code. URL references point to official Angular documentation. Markdown code formatting was incorrectly flagged as shell execution. No actual security risks detected.

2
الملفات التي تم فحصها
56
الأسطر التي تم تحليلها
0
النتائج
1
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية
تم تدقيقه بواسطة: claude

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
50
المجتمع
100
الأمان
65
الامتثال للمواصفات

ماذا يمكنك بناءه

Configuração de Novo Projeto Angular

Obtenha orientação especializada para inicializar uma aplicação Angular moderna com Signals, Standalone Components e configuração otimizada desde o início.

Modernização de Angular Legado

Planeje e execute migração gradual de NgModules para Standalone Components, adotando Signals e padrões Zoneless incrementalmente.

Otimização de Performance

Implemente padrões avançados como carregamento diferido, hidratação incremental e detecção de mudanças OnPush para máxima performance.

جرّب هذه الموجهات

Iniciante: Criar um Componente Baseado em Signals
Crie um novo componente Angular usando Signals para gerenciamento de estado. O componente deve exibir um contador com botões de incremento e decremento, usando signal inputs para valor inicial e signal outputs para eventos.
Intermediário: Converter NgModule para Standalone
Ajude-me a converter este componente Angular baseado em NgModule existente para um Standalone Component. Atualize todos os imports, remova dependências de módulo e garanta que o componente use inputs e outputs baseados em signal modernos.
Avançado: Implementar Arquitetura Zoneless
Guie-me através da conversão de uma aplicação Angular existente para modo Zoneless. Explique as mudanças de configuração necessárias, como lidar com gatilhos de change detection e quais padrões usar para operações assíncronas sem zone.js.
Especialista: SSR com Hidratação Incremental
Configure server-side rendering com hidratação incremental para uma aplicação Angular. Configure defer blocks com triggers apropriados (on viewport, on interaction, on idle) para pontuações ótimas de Core Web Vitals.

أفضل الممارسات

  • Use Signals para estado local do componente e RxJS para streams assíncronos como requisições HTTP
  • Habilite change detection OnPush e deixe Signals disparar atualizações automaticamente
  • Prefira Standalone Components com imports diretos em vez de SharedModules para melhor tree-shaking

تجنب

  • Usar RxJS BehaviorSubject para estado local simples quando Signals são suficientes
  • Carregar módulos de feature inteiros eagerly em vez de usar loadComponent e defer blocks
  • Misturar padrões de decoradores legados com Signals causando change detection inconsistente

الأسئلة المتكررة

Qual versão do Angular esta skill suporta?
Esta skill foca em Angular v20 e acima, cobrindo Signals (estável), Standalone Components (padrão), modo Zoneless e SSR moderno com padrões de hidratação.
Devo usar Signals ou RxJS para gerenciamento de estado?
Use Signals para estado local do componente e valores derivados. Use RxJS para requisições HTTP, streams de eventos e fluxos assíncronos complexos. Eles se complementam com interop toSignal() e toObservable().
O modo Zoneless está pronto para produção?
Sim, Zoneless é estável no Angular v20+. Oferece melhor performance e debugging. No entanto, teste cuidadosamente pois algumas bibliotecas de terceiros podem ainda depender de zone.js.
Preciso reescrever toda minha aplicação para usar Standalone Components?
Não. Standalone Components podem coexistir com componentes baseados em NgModule. Migre gradualmente, começando com novos componentes e componentes folha, depois suba na árvore de componentes.
Qual é o benefício do SSR com hidratação incremental?
SSR fornece carregamento inicial de página rápido e benefícios de SEO. Hidratação incremental carrega JavaScript interativo progressivamente, melhorando Time to Interactive e reduzindo bloqueio da thread principal.
Posso usar esta skill para projetos AngularJS (1.x)?
Não. Esta skill cobre Angular moderno (v20+). Para migração AngularJS, use a skill dedicada angular-migration que lida com as diferenças arquiteturais significativas.

تفاصيل المطور

المؤلف

sickn33

الترخيص

MIT

مرجع

main

بنية الملفات