Help us improve
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
By mayeedwin
Angular development assistant — generate, review, test and migrate Angular apps following an opinionated, production-proven structure
npx claudepluginhub mayeedwin/angular-plugin --plugin ngGenerate TSDoc comments and documentation for Angular code. Usage: /ng:docs [file-path]
Generate Angular artifacts following the opinionated project structure. Usage: /ng:generate [type] [name] [path?] Types: component, service, pipe, directive, guard, interceptor, routes, store Mirrors Angular CLI (ng generate) conventions.
Migrate Angular patterns to modern equivalents. Usage: /ng:migrate [type] [path?]
Review Angular code for best practices, performance, and correctness. Checks components, services, templates, routing, NgRx, and RxJS patterns. Flags anti-patterns with specific fix suggestions.
Scaffold a complete NgRx feature store. Usage: /ng:store [feature-name] [path?]
Senior Angular architect for feature design, module boundaries, state strategy, and performance architecture. Invoke for new feature planning, architecture reviews, or when unsure how to structure a complex feature.
Angular code reviewer for production readiness, security, performance, and test coverage. Invoke when reviewing PRs, auditing existing code, or preparing a feature for release.
Generate Angular artifacts (components, services, pipes, directives, guards, interceptors, routes, stores). Use automatically when the user asks to create any Angular code, scaffold a feature, or add a new file to an Angular project. Mirrors Angular CLI conventions.
Migrate deprecated Angular patterns to modern equivalents. Auto-invoked when editing NgModule files or using deprecated APIs.
Angular performance patterns — OnPush, signals, defer, lazy loading, virtual scroll. Auto-invoked when reviewing or optimizing Angular code.
RxJS patterns in Angular — operators, signals interop, cleanup, and common recipes. Auto-invoked when using observables in Angular files.
Write Angular unit tests. Use automatically when creating .spec.ts files, when asked to test Angular components/services/pipes/directives/guards, or when reviewing test coverage. Supports Jest and Jasmine/Karma. Mirrors Angular testing documentation.
Modifies files
Hook triggers on file write and edit operations
Uses power tools
Uses Bash, Write, or Edit tools
Runs pre-commands
Share bugs, ideas, or general feedback.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Advanced Angular skills for dependency injection, RxJS, and signals.
DevsForge Enterprise Migration Architect delivering comprehensive framework upgrade methodologies, version migration strategies, codemod automation, and AST transformation frameworks that transform risky migrations into systematic, tested, and reversible code evolution processes
Use this agent when building user interfaces, implementing React/Vue/Angular components, handling state management, or optimizing frontend performance. This agent excels at creating responsive, accessible, and performant web applications. Examples:\n\n<example>\nContext: Building a new user interface\nuser: "Create a dashboard for displaying user analytics"\nassistant: "I'll build an analytics dashboard with interactive charts. Let me use the frontend-developer agent to create a responsive, data-rich interface."\n<commentary>\nComplex UI components require frontend expertise for proper implementation and performance.\n</commentary>\n</example>\n\n<example>\nContext: Fixing UI/UX issues\nuser: "The mobile navigation is broken on small screens"\nassistant: "I'll fix the responsive navigation issues. Let me use the frontend-developer agent to ensure it works perfectly across all device sizes."\n<commentary>\nResponsive design issues require deep understanding of CSS and mobile-first development.\n</commentary>\n</example>\n\n<example>\nContext: Optimizing frontend performance\nuser: "Our app feels sluggish when loading large datasets"\nassistant: "Performance optimization is crucial for user experience. I'll use the frontend-developer agent to implement virtualization and optimize rendering."\n<commentary>\nFrontend performance requires expertise in React rendering, memoization, and data handling.\n</commentary>\n</example>
Your AI development team. 36 agents and 32 skills for building, reviewing, debugging, and shipping production code. Supports Vue, React, Next.js, SvelteKit, Angular, Astro, and Nuxt.
Comprehensive skill pack with 66 specialized skills for full-stack developers: 12 language experts (Python, TypeScript, Go, Rust, C++, Swift, Kotlin, C#, PHP, Java, SQL, JavaScript), 10 backend frameworks, 6 frontend/mobile, plus infrastructure, DevOps, security, and testing. Features progressive disclosure architecture for 50% faster loading.
Comprehensive .NET development skills for modern C#, ASP.NET, MAUI, Blazor, Aspire, EF Core, Native AOT, testing, security, performance optimization, CI/CD, and cloud-native applications
Contains inline bash commands via ! syntax
Contains inline bash commands via ! syntax
Bash prerequisite issue
Uses bash pre-commands but Bash not in allowed tools
Bash prerequisite issue
Uses bash pre-commands but Bash not in allowed tools
Share bugs, ideas, or general feedback.
Angular development assistant — generate, review, test and migrate Angular apps
Requires Claude Code v1.0.33 or later. Run
claude --versionto check.
Open Claude Code in any project and run these two commands:
# Step 1: add the marketplace
/plugin marketplace add mayeedwin/angular-plugin
# Step 2: install the plugin (user scope — available in all your projects)
/plugin install ng@angular-plugin
Verify it worked — run /help and look for ng:* commands in the list.
# Add the marketplace to your user settings
claude plugin install ng@angular-plugin
Once approved, no marketplace step needed:
/plugin install ng
git clone https://github.com/mayeedwin/angular-plugin
claude --plugin-dir ./angular-plugin
By default the plugin is installed to your user scope — available across all your projects.
| Scope | What it means | Install flag |
|---|---|---|
user (default) | Available in all your projects | (no flag needed) |
project | Checked into .claude/settings.json — shared with your team | --scope project |
local | Project-specific, gitignored | --scope local |
Share with your team — install at project scope so everyone who clones the repo gets it:
/plugin install ng@angular-plugin --scope project
Or add to .claude/settings.json manually so Claude Code prompts teammates on first open:
{
"extraKnownMarketplaces": {
"angular-plugin": {
"source": { "source": "github", "repo": "mayeedwin/angular-plugin" }
}
},
"enabledPlugins": {
"ng@angular-plugin": true
}
}
All commands work both inside Claude Code (with /) and from the terminal (with claude plugin):
| Action | Inside Claude Code | Terminal |
|---|---|---|
| Update | /plugin update ng@angular-plugin | claude plugin update ng@angular-plugin |
| Disable (keep installed) | /plugin disable ng@angular-plugin | claude plugin disable ng@angular-plugin |
| Re-enable | /plugin enable ng@angular-plugin | claude plugin enable ng@angular-plugin |
| Uninstall | /plugin uninstall ng@angular-plugin | claude plugin uninstall ng@angular-plugin |
| Command | Description |
|---|---|
/ng:generate [type] [name] [path?] | Scaffold any Angular artifact — mirrors ng generate |
/ng:review [path?] | Code review with categorised issues (blockers / warnings / suggestions) |
/ng:store [feature] [path?] | Generate a complete NgRx feature store |
/ng:test [file-path] | Generate unit tests for any Angular artifact |
/ng:migrate [type] [path?] | Migrate deprecated patterns to modern Angular |
/ng:docs [file-path] | Add TSDoc comments and documentation |
/ng:generate component user-profile pages/users
/ng:generate service auth core/services
/ng:generate guard auth core/guards
/ng:generate interceptor jwt core/interceptors
/ng:generate pipe currency shared/pipes
/ng:generate directive click-outside shared/directives
/ng:generate routes dashboard pages/dashboard
/ng:generate store products pages/products
/ng:migrate standalone src/app/pages/users # NgModule → standalone
/ng:migrate control-flow src/app # *ngIf/*ngFor → @if/@for
/ng:migrate inject src/app/pages/dashboard # constructor → inject()
/ng:migrate cleanup src/app # ngOnDestroy → takeUntilDestroyed()
/ng:migrate signals src/app/pages/products # observables → signals
These run automatically based on what Claude is working on — no command needed:
| Skill | Triggers when... |
|---|---|
angular-generate | Creating any Angular file |
angular-testing | Writing .spec.ts files |
ngrx-patterns | Working with NgRx store files |
angular-rxjs | Using observables in Angular context |
angular-migration | Editing *.module.ts or deprecated APIs |
angular-performance | Reviewing component or routing code |