angular-development-assistant

# 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

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

📦 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

// 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!

👤 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)

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

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

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

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

👤 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!

custom-plugin-angular/
├── 📁 .claude-plugin/
│   ├── plugin.json              # Plugin manifest
│   └── marketplace.json         # Marketplace config
├── 📁 agents/                   # 8 specialized agents
│   ├── 01-typescript-fundamentals.md
│   ├── 02-angular-core.md
│   ├── 03-reactive-programming.md
│   ├── 04-forms-directives.md
│   ├── 05-routing-performance.md
│   ├── 06-state-management.md
│   ├── 07-testing-deployment.md
│   └── 08-modern-angular.md
├── 📁 skills/                   # 12 skills (Golden Format)
│   ├── typescript/
│   ├── core/
│   ├── rxjs/
│   ├── forms/
│   ├── routing/
│   ├── state-management/
│   ├── testing/
│   └── modern-angular/
├── 📁 commands/                 # 4 slash commands
│   ├── learn.md
│   ├── explore.md
│   ├── assess.md
│   └── projects.md
├── 📁 hooks/
│   └── hooks.json
├── 📄 README.md
├── 📄 INSTALLATION.md
├── 📄 CHANGELOG.md
├── 📄 CONTRIBUTING.md
└── 📄 LICENSE