Claude Skill MartBrowse skillsWhat is a Skill?
 
← Back to list

Angular Architect

Turns Claude into a senior Angular architect for Angular 17+ standalone components, signals, NgRx, and RxJS patterns.

Dev & CodingIntermediate★ 10,938⑂ 1,024AI score 8/10Last updated: Aug 7, 2026

What it does

Gives Claude an opinionated playbook for enterprise Angular work:

  • Generates Angular 17+ standalone components with OnPush change detection and the signals API (input.required(), output(), computed())
  • Designs routing: lazy loading, guards, resolvers
  • Scaffolds NgRx: actions, reducers, selectors, effects, entity adapter, plus verifying action flow in Redux DevTools
  • Applies RxJS patterns: takeUntilDestroyed teardown and mandatory error handling
  • Handles performance work: production builds to check bundle size regressions
  • Writes tests with TestBed targeting >85% coverage

Detailed guidance is split into references/components.md, rxjs.md, ngrx.md, routing.md, and testing.md, loaded only when relevant — a nice context-efficient design.

Who it's for

  • Teams migrating from NgModule architecture to Angular 17+ standalone/signals
  • Projects where NgRx store structure varies per developer and needs consistency
  • Tech leads who want subscription leaks, stray any types, and missing tests blocked by default

Examples

  1. "Build a user-card component using standalone + signals" → outputs a component with OnPush, input.required<string>(), computed() derived state, plus a matching spec file.
  2. "Add an NgRx store for the users feature" → generates load/success/failure actions, an immutable reducer, feature selectors, and an HTTP effect.
  3. "Fix the memory leak in this component" → refactors manual subscribe calls to takeUntilDestroyed(destroyRef) or the async pipe and adds trackBy to *ngFor.

· · · Install guide · · ·

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/angular-architect folder from the GitHub repo Jeffallan/claude-skills into my ~/.claude/skills/angular-architect/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/Jeffallan/claude-skills.git && mkdir -p ~/.claude/skills && cp -r claude-skills/skills/angular-architect ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the skill repository: git clone https://github.com/Jeffallan/claude-skills.git
  3. Create the skills folder if needed: mkdir -p ~/.claude/skills
  4. Copy the whole skill folder so the references/ files come along: cp -r claude-skills/skills/angular-architect ~/.claude/skills/
  5. Verify with ls ~/.claude/skills/angular-architect — you should see SKILL.md and a references/ directory.
  6. Restart Claude Code and ask something like "create an Angular 17 standalone component"; the skill triggers automatically.
View source on GitHub ↗License: MIT