angular
Assists with modern Angular development patterns including Signals, Standalone Components, and Zoneless architecture.
Install
mkdir -p .claude/skills/angular && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1781" && unzip -o skill.zip -d .claude/skills/angular && rm skill.zipInstalls to .claude/skills/angular
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns.Key capabilities
- →Transition to Zoneless change detection
- →Implement Signal-based reactive state
- →Refactor NgModules to Standalone components
- →Configure SSR and incremental hydration
- →Apply reactive patterns to data streams
- →Optimize component performance
How it works
Applies internal framework rules for modern Angular (v20+) to structure component trees and reactive bindings.
Inputs & outputs
When to use angular
- →Implement Signals-based state management
- →Migrate NgModules to Standalone Components
- →Optimize SSR and hydration for Angular apps
- →Configure Zoneless application architecture
About this skill
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-migrationskill - Working with legacy Angular apps that cannot upgrade
- General TypeScript issues → use
typescript-expertskill
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.
When not to use it
- →Legacy AngularJS migrations
- →Non-Angular frontend frameworks
- →Simple static sites not needing reactivity
Prerequisites
Limitations
- →Requires developer knowledge of Signal API
- →Migration paths are strictly manual
- →Performance optimizations require careful dependency tracking
How it compares
Prioritizes modern v20+ paradigms like Zoneless and Signals over older zone.js-based patterns.
Compared to similar skills
angular side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| angular (this skill) | 100 | 5mo | Review | Advanced |
| web-games | 11 | 8mo | No flags | Intermediate |
| angular-best-practices | 21 | 5mo | No flags | Advanced |
| angular-state-management | 8 | 5mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by sickn33
View all by sickn33 →You might also like
web-games
davila7
Web browser game development principles. Framework selection, WebGPU, optimization, PWA.
angular-best-practices
sickn33
Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.
angular-state-management
sickn33
Master modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solutions, or migrating from legacy patterns.
angular-modernization
bitwarden
Modernizes Angular code such as components and directives to follow best practices using both automatic CLI migrations and Bitwarden-specific patterns. YOU must use this skill when someone requests modernizing Angular code. DO NOT invoke for general Angular discussions unrelated to modernization.
angular-routing
analogjs
Implement routing in Angular v20+ applications with lazy loading, functional guards, resolvers, and route parameters. Use for navigation setup, protected routes, route-based data loading, and nested routing. Triggers on route configuration, adding authentication guards, implementing lazy loading, or reading route parameters with signals.
igniteui-angular-grids
igniteui
Provides guidance on all Ignite UI for Angular data grid types (Flat Grid, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid) including setup, column configuration, sorting, filtering, selection, editing, grouping, summaries, toolbar, export, paging, remote data, and state persistence. Use when users ask about grids, tables, data grids, tabular data display, cell editing, batch editing, row selection, column pinning, column hiding, grouping rows, pivot tables, tree-structured data, hierarchical data, master-detail views, or exporting grid data.