angular-code-architect-plus

Built on affaan-m/ECC by @affaan-m (245,812 stars, MIT). All credit for the original idea to them. This fork improves and repackages it; upstream license preserved in UPSTREAM_LICENSE.

A Claude Code skill that helps Angular developers plan, write, and check code that fits the project they already have.

🤔 Why

Angular advice can fail when it does not match your app version.

A new code pattern may not work in an old project. A standalone app and an NgModule app also need different choices.

This skill checks the project first. It looks at the Angular version, forms, tests, styles, and current file patterns. It then gives help that fits what it found.

It works well for Angular developers who build components, services, forms, routes, signals, tests, SSR, and accessible user screens.

🚀 Install

Copy and run this one command:

mkdir -p ~/.claude/skills/angular-developer && curl -fsSL https://raw.githubusercontent.com/angular-code-architect-plus/angular-code-architect-plus/main/skill/SKILL.md -o ~/.claude/skills/angular-developer/SKILL.md

The skill has no package setup. Start Claude Code in an Angular project after the download.

💡 Usage

Ask Claude Code for a real change:

Create a user list component for this Angular app. Load users through the current service pattern. Show loading, empty, error, and retry states. Match the app's test and CSS setup.

Expected result:

Claude checks package.json and the nearby project files first.
It finds the Angular version and current app style.
It creates code that follows those patterns.
It uses strict types and stable tracking for the user list.
It adds the smallest useful tests, then runs the build when commands are allowed.
If a command cannot run, it tells you exactly what to run.

The skill also helps with:

• Components, inputs, outputs, and host data
• Signals, computed, linkedSignal, resource, and effect
• Reactive, template-driven, and supported signal forms
• Services, tokens, providers, and dependency injection
• Routes, lazy loading, SSR, and hydration
• ARIA, keyboard use, styles, animation, and tests
• Angular CLI and Angular MCP setup

It plugs into your normal Claude Code flow. You can use it for a small fix, a code review, or a larger app plan.

🔧 What we changed vs upstream

• Rewritten from Japanese into clearer, simpler English while preserving the Angular-focused scope and ECC attribution.
• Added a concrete preflight: inspect package.json, Angular version, standalone/NgModule style, forms, testing, and CSS conventions before advising.
• Expanded engineering guardrails around strict typing, avoiding unnecessary packages/network calls, matching existing project patterns, and making no unsupported claims.
• Changed validation from an unconditional ng build to smallest relevant tests plus build, with honest fallback instructions when commands cannot run.
• Added explicit confirmation points for major ng new choices and practical component guidance for stable tracking, UI states, native controls, and limited DOM manipulation.

📄 License

This repo uses the MIT License. The upstream MIT license and credit are preserved in UPSTREAM_LICENSE.