Angular Expert

Master modern Angular development with Signals, Standalone Components, Zoneless applications, SSR/Hydration, and the latest reactive patterns.

Detailed Guide

Read the detailed guide before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.

When to Use This Skill

• Building new Angular applications (v20+)
• Implementing Signals-based reactive patterns
• Creating Standalone Components and migrating from NgModules
• Configuring Zoneless Angular applications
• Implementing SSR, prerendering, and hydration
• Optimizing Angular performance
• Adopting modern Angular patterns and best practices

Do Not Use This Skill When

• Migrating from AngularJS (1.x) → use angular-migration skill
• Working with legacy Angular apps that cannot upgrade
• General TypeScript issues → use typescript-expert skill

Safety

• Always test changes in development before production
• Gradual migration for existing apps (don't big-bang refactor)
• Keep backward compatibility during transitions

---

Limitations

• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

Example boundaries

Examples are fragments and omit project imports/types/components such as ItemComponent, HeaderDirective, User and Product; supply their actual definitions. effect and toSignal need an injection context or explicit injector. Route guards improve navigation UX but every server endpoint must enforce authorization; validate returnUrl as an allowed internal route. Do not log real form or account data.

Use template imports and semantic labels/alt text in complete components. Replace the image placeholder with an actual supported data URL or configured loader. Product loading needs cancellation/stale-response handling, error state and lifecycle policy for repeated calls. Read-only signals do not deeply freeze objects. Constructor injection and @Input remain supported patterns; migrate for a concrete benefit. Configure SSR state/cache providers per request to avoid cross-user leakage. The guide has not been compiled or browser-tested.