custom-plugin-angular

📦 Install Now · 🤖 Explore Agents · 📖 Documentation · ⭐ Star this repo

---

What is this?

Angular Development Assistant is a Claude Code plugin with 8 specialized agents and 12 skills for Angular 18+ development. Build modern, production-ready Angular applications with AI-powered implementation agents that write code, not just explain.

---

📑 Table of Contents

• Quick Start
• Features
• Agents
• Skills
• Commands
• Usage Examples
• Modern Angular Features
• Documentation
• Contributing
• License

---

🚀 Quick Start

Prerequisites

• Claude Code CLI v2.0.27+
• Active Claude subscription
• Node.js 18+ (for Angular projects)

Installation (Choose One)

# Step 1️⃣ Add the marketplace
/plugin marketplace add pluginagentmarketplace/custom-plugin-angular

# Step 2️⃣ Install the plugin
/plugin install angular-development-assistant@pluginagentmarketplace-angular

# Step 3️⃣ Restart Claude Code
# Close and reopen your terminal/IDE

# Clone the repository
git clone https://github.com/pluginagentmarketplace/custom-plugin-angular.git
cd custom-plugin-angular

# Load locally
/plugin load .

# Restart Claude Code

✅ Verify Installation

After restart, you should see these agents:

angular-development-assistant:01-typescript-fundamentals
angular-development-assistant:02-angular-core
angular-development-assistant:03-reactive-programming
angular-development-assistant:04-forms-directives
angular-development-assistant:05-routing-performance
angular-development-assistant:06-state-management
angular-development-assistant:07-testing-deployment
angular-development-assistant:08-modern-angular

Tip: Run /explore to see all agents and their capabilities!

---

✨ Features

| Feature | Description | |---------|-------------| | 🤖 8 Agents | Specialized AI agents for every Angular domain | | 🛠️ 12 Skills | Reusable capabilities with Golden Format | | ⌨️ 4 Commands | Quick slash commands for learning | | 📚 Modern Angular | Signals, Standalone, @defer, SSR support | | 🔄 SASMP v1.3.0 | Full protocol compliance |

---

🤖 Agents

8 Specialized Implementation Agents

Each agent is designed to do the work, not just explain:

| # | Agent | Purpose | Example Prompts | |---|-------|---------|-----------------| | 1 | TypeScript Fundamentals | Types, generics, decorators, strict mode | "Fix all type errors", "Convert to TypeScript" | | 2 | Angular Core | Components, services, DI, lifecycle hooks | "Create UserService", "Generate component" | | 3 | Reactive Programming | RxJS observables, operators, memory leaks | "Add debouncing", "Fix memory leaks" | | 4 | Forms & Directives | Reactive forms, validators, custom directives | "Create registration form", "Add async validator" | | 5 | Routing & Performance | Lazy loading, guards, bundle optimization | "Add lazy loading", "Create auth guard" | | 6 | State Management | NgRx store, actions, reducers, effects | "Set up NgRx", "Create effects" | | 7 | Testing & Deployment | Unit tests, E2E, CI/CD, builds | "Write component tests", "Set up CI/CD" | | 8 | Modern Angular | Signals, standalone, @defer, SSR, zoneless | "Migrate to standalone", "Add Signals" |

| Agent | Writes Code | Fixes Bugs | Refactors | Tests | |-------|:-----------:|:----------:|:---------:|:-----:| | TypeScript | ✅ | ✅ | ✅ | ✅ | | Angular Core | ✅ | ✅ | ✅ | ✅ | | RxJS | ✅ | ✅ | ✅ | ✅ | | Forms | ✅ | ✅ | ✅ | ✅ | | Routing | ✅ | ✅ | ✅ | ✅ | | State | ✅ | ✅ | ✅ | ✅ | | Testing | ✅ | ✅ | ✅ | ✅ | | Modern | ✅ | ✅ | ✅ | ✅ |

---

🛠️ Skills

Available Skills

| Skill | Description | Invoke | |-------|-------------|--------| | typescript | Type system mastery | Skill("angular-development-assistant:typescript") | | core | Component & service patterns | Skill("angular-development-assistant:core") | | rxjs | Reactive programming | Skill("angular-development-assistant:rxjs") | | forms | Form handling & validation | Skill("angular-development-assistant:forms") | | routing | Navigation & lazy loading | Skill("angular-development-assistant:routing") | | state-management | NgRx patterns | Skill("angular-development-assistant:state-management") | | testing | Test strategies | Skill("angular-development-assistant:testing") | | modern-angular | Angular 18+ features | Skill("angular-development-assistant:modern-angular") |

Skill Categories

📦 Core Development
├── typescript - Types, generics, decorators
├── core - Components, services, DI
└── rxjs - Observables, operators, subjects

📦 UI & Forms
├── forms - Reactive forms, validators
└── routing - Navigation, lazy loading, guards

📦 Advanced
├── state-management - NgRx, effects, selectors
├── testing - Unit, E2E, mocking
└── modern-angular - Signals, standalone, SSR

---

⌨️ Commands

| Command | Description | |---------|-------------| | /learn | Start Angular learning paths | | /explore | Discover all 8 agents | | /assess | Test your Angular knowledge | | /projects | Browse 50+ hands-on projects |

---

💡 Usage Examples

Example 1: Migrate to Angular Signals

// Old reactive pattern
private userSubject = new BehaviorSubject<User | null>(null);
user$ = this.userSubject.asObservable();

updateUser(user: User) {
  this.userSubject.next(user);
}

ngOnDestroy() {
  this.userSubject.complete();
}

// Modern Signals pattern
user = signal<User | null>(null);
userName = computed(() => this.user()?.name ?? 'Guest');

updateUser(user: User) {
  this.user.set(user);
}

// No cleanup needed!

Result: ~25% less memory, no subscription leaks!

---

Example 2: Add @defer for Performance

👤 User: "Optimize my dashboard for faster initial load"

🤖 Agent: Modern Angular (18+)
   ├── Analyzes component tree
   ├── Identifies heavy components
   ├── Adds @defer blocks with viewport triggers
   └── Implements prefetch on idle

✅ Result: 68% smaller initial bundle (2.5MB → 800KB)

Before:

<app-header />
<app-hero />
<app-heavy-dashboard />
<app-chat-widget />

After:

<app-header />
<app-hero />

@defer (on viewport) {
  <app-heavy-dashboard />
} @placeholder {
  <app-skeleton />
}

@defer (on interaction; prefetch on idle) {
  <app-chat-widget />
}

---

Example 3: Complete NgRx Setup

👤 User: "Set up NgRx for product management with CRUD"

🤖 Agent: State Management
   ├── Creates feature store structure
   ├── Generates actions (loadProducts, addProduct, etc.)
   ├── Implements reducers with entity adapter
   ├── Creates effects for HTTP calls
   ├── Builds memoized selectors
   └── Adds error handling

✅ Result: Production-ready state management in minutes!

---

🔥 Modern Angular 18+ Features

| Feature | Support | Improvement | |---------|---------|-------------| | Signals | signal(), computed(), effect() | ~25% less memory | | Standalone | No NgModules needed | ~45% better tree-shaking | | @defer | Lazy component loading | ~60% smaller bundle | | SSR | Server-side rendering | ~70% better LCP | | Zoneless | No Zone.js | ~30% faster CD | | Control Flow | @if, @for, @switch | Cleaner templates | | Material 3 | Modern design system | Latest components |

---

📚 Documentation

| Document | Description | |----------|-------------| | INSTALLATION.md | Detailed setup guide | | CHANGELOG.md | Version history | | CONTRIBUTING.md | How to contribute |

---

📁 Project Structure

custom-plugin-angular/
├──