How to use the Angular Architect agent skill

What is an agent skill and what does this one do?

An agent skill is a folder containing a SKILL.md file and optional reference files. When the skill matches your request, the agent loads these instructions and follows them while it works. This skill is named angular-architect and is MIT licensed.

Once installed, the agent writes standalone Angular components that use signals and OnPush change detection. It sets up routing with lazy loading and guards, organises app state with NgRx actions, reducers and selectors, and applies RxJS patterns with unsubscribing and error handling. It also writes TestBed tests and aims for over 85% coverage.

How do you install the Angular Architect skill?

Download the skill ZIP from the download link on this page and unzip it. For a personal setup, place the unzipped folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder.

In the Claude apps, you can instead upload the ZIP under Settings → Capabilities → Skills.

• Personal: ~/.claude/skills/angular-architect
• Project: .claude/skills/angular-architect inside your project

What do you need before using it?

The skill assumes an Angular 17+ project. The workflow refers to Node.js and the Angular CLI, and uses ng build to check bundle size. If you use the state management patterns, you need the NgRx library. The Redux DevTools browser extension is referenced in the workflow but is optional.

• Angular 17+ project
• Node.js and Angular CLI
• NgRx library, if you use the state patterns
• Redux DevTools browser extension (optional)

How do you trigger the skill with natural requests?

You do not need a special command. Describe the Angular task in plain language and mention the topic, such as standalone components, signals, NgRx, RxJS, routing, lazy loading or Angular testing. The skill's trigger terms include Angular 17, standalone components, signals, RxJS, NgRx, Angular performance, Angular routing and Angular testing.

Be specific about your Angular version and what you want built. The skill's description says it applies when building Angular 17+ applications with standalone components or signals, setting up NgRx stores, establishing RxJS patterns, tuning performance or writing tests for enterprise apps.

• Create a standalone user card component with OnPush and signal inputs.
• Set up an NgRx store for a users list with loading and error state.
• Add lazy-loaded routes with an auth guard to my Angular 17 app.
• Review this RxJS stream for missing error handling and unsubscribe issues.
• Write TestBed tests for this service and check coverage.

What output should you expect?

When implementing a feature, the skill asks for a component file with standalone configuration, a service file if business logic is involved, NgRx state files if used, a test file, and a short explanation of architectural decisions.

The skill also lists rules it follows, such as using standalone components, signals where appropriate, OnPush, strict TypeScript, takeUntilDestroyed or the async pipe for subscriptions, trackBy in *ngFor loops, and no direct state mutation in NgRx. Check the output against these rules yourself.

• Component file with standalone configuration
• Service file when business logic is involved
• NgRx actions, reducers and selectors when state is used
• Test file and a brief explanation of design decisions

What about safety, scripts and network access?

The skill does not run scripts and does not use the network, according to its listing. It is made of instructions and reference files only.

The workflow does ask the agent to run ng build --configuration production to check bundle size, and to verify NgRx store behaviour with Redux DevTools. These checks may not be possible in every agent environment. Treat any build or DevTools result the agent reports as something to confirm yourself. Also, the skill's rules say not to expose sensitive data in client-side code, so review generated code for secrets before committing.

• Runs scripts: no
• Uses network: no
• Build and DevTools checks may need you to run them yourself
• Review generated code before it reaches production

What tips help you get better results?

Name the Angular version and the feature you are building. Ask for one area at a time, such as routing or NgRx, so the matching reference guide is loaded. Include your existing code when you want the agent to follow your project's patterns.

Always run the generated tests and your own build. The skill targets coverage above 85%, but coverage only shows what was executed, not whether the behaviour is correct.

• State the Angular version and whether you use standalone components or NgModules.
• Ask for one topic at a time: components, RxJS, NgRx, routing or testing.
• Paste relevant existing files so the output matches your structure.
• Run your own tests and build instead of relying on the agent's report.