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

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

🤖 Agents

8 Specialized Implementation Agents

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

🛠️ Skills

Available Skills

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

💡 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

📚 Documentation

📁 Project Structure

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

📅 Metadata

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Follow the Golden Format for new skills
4. Submit a pull request

⚠️ Security

Important: This repository contains third-party code and dependencies.

• ✅ Always review code before using in production
• ✅ Check dependencies for known vulnerabilities
• ✅ Follow security best practices
• ✅ Report security issues privately via Issues

📝 License

Copyright © 2025 Dr. Umit Kacar & Muhsin Elcicek

Custom License - See LICENSE for details.

👥 Contributors