Skip to content
Get packs

Angular Architect

Guides building Angular 17+ standalone components, routing, NgRx state, RxJS and tests

Source Download skill
Repository
Jeffallan/claude-skills
Stars
12,176
Licence
MIT
Files
6 files

What it does

Once installed, the agent works as a senior Angular specialist for Angular 17 and newer. It writes standalone components using signals and OnPush change detection, sets up routing with lazy loading and guards, and organises app state with NgRx actions, reducers and selectors. It also applies RxJS patterns with proper unsubscribing and error handling, and writes TestBed tests aiming for over 85% coverage.

Great for

  • Developers building or maintaining Angular 17+ apps with standalone components
  • Teams adopting signals or NgRx for state management and wanting consistent patterns
  • Developers who want help structuring routing, lazy loading and RxJS streams

Skip it if

  • Projects on AngularJS or older Angular versions that rely on NgModules, since the skill targets Angular 17+ standalone code
  • Non-developers who need a finished app without reviewing generated code, because the output still needs human review and testing
  • Anyone expecting the agent to run and verify the app itself, since the instructions ask for build and Redux DevTools checks that the agent may not be able to perform in its environment

Try asking

  • “Create a standalone Angular component for a user card with signal inputs and an output event”
  • “Set up NgRx actions, reducer and selectors for a users list with loading and error state”
  • “Add lazy-loaded routes with an auth guard to my Angular 17 app”
  • “Write TestBed unit tests for my UsersService and its component”
Step-by-step guide: how to use Angular ArchitectInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 6 original files, the MIT licence and an attribution note.

    angular-architect.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip angular-architect.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip angular-architect.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name your Angular version and whether you use NgRx up front so the agent picks the right patterns.
  • Ask for tests alongside code, since the skill's output template includes a test file.
  • Review generated code and run ng build and your test suite yourself before merging; the skill's coverage and bundle checks depend on your project setup.

What's inside

  • references/components.md
  • references/ngrx.md
  • references/routing.md
  • references/rxjs.md
  • references/testing.md
  • SKILL.md

Redistributed unmodified from Jeffallan/claude-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.