Help us improve
Share bugs, ideas, or general feedback.
From frontend
Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.
npx claudepluginhub wesleyegberto/software-engineering-skills --plugin frontendHow this skill is triggered — by the user, by Claude, or both
Slash command
/frontend:angular-expertThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
1. Always analyze the project's Angular version before providing guidance, as best practices and available features can vary significantly between versions. If creating a new project with Angular CLI, do not specify a version unless prompted by the user.
references/angular-animations.mdreferences/angular-aria.mdreferences/cli.mdreferences/component-harnesses.mdreferences/component-styling.mdreferences/components.mdreferences/creating-services.mdreferences/data-resolvers.mdreferences/define-routes.mdreferences/defining-providers.mdreferences/di-fundamentals.mdreferences/e2e-testing.mdreferences/effects.mdreferences/hierarchical-injectors.mdreferences/host-elements.mdreferences/injection-context.mdreferences/inputs.mdreferences/linked-signal.mdreferences/loading-strategies.mdreferences/mcp.mdSearches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Provides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Guides systematic root-cause debugging via triage checklist for test failures, build breaks, unexpected behavior, logs, and errors.
Share bugs, ideas, or general feedback.
Always analyze the project's Angular version before providing guidance, as best practices and available features can vary significantly between versions. If creating a new project with Angular CLI, do not specify a version unless prompted by the user.
When generating code, follow Angular's style guide and best practices for maintainability and performance. Use the Angular CLI for scaffolding components, services, directives, pipes, and routes to ensure consistency.
Once you finish generating code, run ng build to ensure there are no build errors. If there are errors, analyze the error messages and fix them before proceeding. Do not skip this step, as it is critical for ensuring the generated code is correct and functional.
If no guidelines are provided by the user, here are same default rules to follow when creating a new Angular project:
Execution Rules for ng new:
When asked to create a new Angular project, you must determine the correct execution command by following these strict steps:
Step 1: Check for an explicit user version.
npx.npx @angular/cli@<requested_version> ng new <project-name>Step 2: Check for an existing Angular installation.
ng version in the terminal to check if the Angular CLI is already installed on the system.ng new <project-name>Step 3: Fallback to Latest.
ng version command fails (indicating no Angular installation exists), you must use npx to fetch the latest version.npx @angular/cli@latest ng new <project-name>When working with Angular components, consult the following references based on the task:
If you require deeper documentation not found in the references above, read the documentation at https://angular.dev/guide/components.
When managing state and data reactivity, use Angular Signals and consult the following references:
signal, computed), reactive contexts, and untracked. Read signals-overview.mdlinkedSignal): Creating writable state linked to source signals. Read linked-signal.mdresource): Fetching asynchronous data directly into signal state. Read resource.mdeffect): Logging, third-party DOM manipulation (afterRenderEffect), and when NOT to use effects. Read effects.mdIn most cases for new apps, prefer signal forms. When making a forms decision, analyze the project and consider the following guidelines:
if the application is using v21 or newer and this is a new form, prefer signal forms. -For older applications or when working with existing forms, use the appropriate form type that matches the applications current form strategy.
Signal Forms: Use signals for form state management. Read signal-forms.md
Template-driven forms: Use for simple forms. Read template-driven-forms.md
Reactive forms: Use for complex forms. Read reactive-forms.md
When implementing dependency injection in Angular, follow these guidelines:
inject() function. Read di-fundamentals.mdprovidedIn: 'root' option, and injecting into components or other services. Read creating-services.mdInjectionToken, useClass, useValue, useFactory, and scopes. Read defining-providers.mdinject() is allowed, runInInjectionContext, and assertInInjectionContext. Read injection-context.mdEnvironmentInjector vs ElementInjector, resolution rules, modifiers (optional, skipSelf), and providers vs viewProviders. Read hierarchical-injectors.mdWhen building accessible custom components for any of the following patterns: Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid, consult the following reference:
When implementing navigation in Angular, consult the following references:
<router-outlet>, nested outlets, and named outlets. Read show-routes-with-outlets.mdRouterLink and programmatic navigation with Router. Read navigate-to-routes.mdCanActivate, CanMatch, and other guards for security. Read route-guards.mdResolveFn. Read data-resolvers.mdIf you require deeper documentation or more context, visit the official Angular Routing guide.
When implementing styling and animations in Angular, consult the following references:
When writing or updating tests, consult the following references based on the task:
TestBed. Read testing-fundamentals.mdRouterTestingHarness for reliable navigation tests. Read router-testing.mdWhen working with Angular tooling, consult the following references: