Publish Sign in

Angular Developer Guidelines

Generates Angular code and provides architectural guidance.

You say
Install this skill Read the source first Free Written by affaan-m · unverified publisher
Context cost
32.8k tokensestimated from the bundle, loaded when it triggers
Bundle
36 files · 131.1 kBtext throughout, nothing executable
Licence
MITfree to use
Last change
—no release on file
Servers it uses
Noneruns standalone

What it does

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.

Installed, it changes the agent in these ways.

What this skill changes about the agent is not written down here yet. The listing was collected from its source, and the description is in its own SKILL.md.

Expertise

Domain judgement the base model does not have.

developer tools
Filed under

Developer Tools & Repos

The skill itself

This is the whole product. A skill is instructions the model reads, so there is nothing behind the listing you cannot see first — the front matter loads with every session, and the body below it loads when the skill triggers.

SKILL.md11.0 kB · 156 lines
--- name: angular-developer description: 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. metadata: origin: ECC ---
8# Angular Developer Guidelines
9
10## When to Activate
11
12- Working in any Angular project or codebase
13- Creating or scaffolding a new Angular project, application, or library
14- Generating components, services, directives, pipes, guards, or resolvers
15- Implementing reactivity with Angular Signals, linkedSignal, or resource
16- Working with Angular forms (signal forms, reactive forms, or template-driven)
17- Setting up dependency injection, routing, lazy loading, or route guards
18- Adding accessibility (ARIA), animations, or component styling
19- Writing or debugging Angular-specific tests (unit, component harness, E2E)
20- Configuring Angular CLI tooling or the Angular MCP server
21
221. 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.
23
242. 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.
25
263. 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.
27
28## Creating New Projects
29
30If no guidelines are provided by the user, use these defaults when creating a new Angular project:
31
321. Use the latest stable version of Angular unless the user specifies otherwise.
332. Prefer Signal Forms for new projects only when the target Angular version supports them. [Find out more](references/signal-forms.md).
34
35**Execution Rules for ng new:**
36When asked to create a new Angular project, you must determine the correct execution command by following these strict steps:
37
38**Step 1: Check for an explicit user version.**
39
40- **IF** the user requests a specific version (e.g., Angular 15), bypass local installations and strictly use npx.
41- **Command:** npx @angular/cli@<requested_version> new <project-name>
42
43**Step 2: Check for an existing Angular installation.**
44
45- **IF** no specific version is requested, run ng version in the terminal to check if the Angular CLI is already installed on the system.
46- **IF** the command succeeds and returns an installed version, use the local/global installation directly.
47- **Command:** ng new <project-name>
48
49**Step 3: Fallback to Latest.**
50
51- **IF** no specific version is requested AND the ng version command fails (indicating no Angular installation exists), you must use npx to fetch the latest version.
52- **Command:** npx @angular/cli@latest new <project-name>
53
54## Components
55
56When working with Angular components, consult the following references based on the task:
57
58- **Fundamentals**: Anatomy, metadata, core concepts, and template control flow (@if, @for, @switch). Read [components.md](references/components.md)
59- **Inputs**: Signal-based inputs, transforms, and model inputs. Read [inputs.md](references/inputs.md)
60- **Outputs**: Signal-based outputs and custom event best practices. Read [outputs.md](references/outputs.md)
61- **Host Elements**: Host bindings and attribute injection. Read [host-elements.md](references/host-elements.md)
62
63If you require deeper documentation not found in the references above, read the documentation at https://angular.dev/guide/components.
64
65## Reactivity and Data Management
66
67When managing state and data reactivity, use Angular Signals and consult the following references:
68
69- **Signals Overview**: Core signal concepts (signal, computed), reactive contexts, and untracked. Read [signals-overview.md](references/signals-overview.md)
70- **Dependent State (linkedSignal)**: Creating writable state linked to source signals. Read [linked-signal.md](references/linked-signal.md)
71- **Async Reactivity (resource)**: Fetching asynchronous data directly into signal state. Read [resource.md](references/resource.md)
72- **Side Effects (effect)**: Logging, third-party DOM manipulation (afterRenderEffect), and when NOT to use effects. Read [effects.md](references/effects.md)
73
74## Forms
75
76In most cases for new apps, **prefer signal forms**. When making a forms decision, analyze the project and consider the following guidelines:
77
78- If the application version supports Signal Forms and this is a new form, **prefer signal forms**.
79- For older applications or existing forms, match the application's current form strategy.
80
81- **Signal Forms**: Use signals for form state management. Read [signal-forms.md](references/signal-forms.md)
82- **Template-driven forms**: Use for simple forms. Read [template-driven-forms.md](references/template-driven-forms.md)
83- **Reactive forms**: Use for complex forms. Read [reactive-forms.md](references/reactive-forms.md)
84
85## Dependency Injection
86
87When implementing dependency injection in Angular, follow these guidelines:
88
89- **Fundamentals**: Overview of Dependency Injection, services, and the inject() function. Read [di-fundamentals.md](references/di-fundamentals.md)
90- **Creating and Using Services**: Creating services, the providedIn: 'root' option, and injecting into components or other services. Read [creating-services.md](references/creating-services.md)
91- **Defining Dependency Providers**: Automatic vs manual provision, InjectionToken, useClass, useValue, useFactory, and scopes. Read [defining-providers.md](references/defining-providers.md)
92- **Injection Context**: Where inject() is allowed, runInInjectionContext, and assertInInjectionContext. Read [injection-context.md](references/injection-context.md)
93- **Hierarchical Injectors**: The EnvironmentInjector vs ElementInjector, resolution rules, modifiers (optional, skipSelf), and providers vs viewProviders. Read [hierarchical-injectors.md](references/hierarchical-injectors.md)
94
95## Angular Aria
96
97When building accessible custom components for any of the following patterns: Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid, consult the following reference:
98
99- **Angular Aria Components**: Building headless, accessible components (Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid) and styling ARIA attributes. Read [angular-aria.md](references/angular-aria.md)
100
101## Routing
102
103When implementing navigation in Angular, consult the following references:
104
105- **Define Routes**: URL paths, static vs dynamic segments, wildcards, and redirects. Read [define-routes.md](references/define-routes.md)
106- **Route Loading Strategies**: Eager vs lazy loading, and context-aware loading. Read [loading-strategies.md](references/loading-strategies.md)
107- **Show Routes with Outlets**: Using <router-outlet>, nested outlets, and named outlets. Read [show-routes-with-outlets.md](references/show-routes-with-outlets.md)
108- **Navigate to Routes**: Declarative navigation with RouterLink and programmatic navigation with Router. Read [navigate-to-routes.md](references/navigate-to-routes.md)
109- **Control Route Access with Guards**: Implementing CanActivate, CanMatch, and other guards for security. Read [route-guards.md](references/route-guards.md)
110- **Data Resolvers**: Pre-fetching data before route activation with ResolveFn. Read [data-resolvers.md](references/data-resolvers.md)
111- **Router Lifecycle and Events**: Chronological order of navigation events and debugging. Read [router-lifecycle.md](references/router-lifecycle.md)
112- **Rendering Strategies**: CSR, SSG (Prerendering), and SSR with hydration. Read [rendering-strategies.md](references/rendering-strategies.md)
113- **Route Transition Animations**: Enabling and customizing the View Transitions API. Read [route-animations.md](references/route-animations.md)
114
115If you require deeper documentation or more context, visit the [official Angular Routing guide](https://angular.dev/guide/routing).
116
117## Styling and Animations
118
119When implementing styling and animations in Angular, consult the following references:
120
121- **Using Tailwind CSS with Angular**: Integrating Tailwind CSS into Angular projects. Read [tailwind-css.md](references/tailwind-css.md)
122- **Angular Animations**: Using native CSS (recommended) or the legacy DSL for dynamic effects. Read [angular-animations.md](references/angular-animations.md)
123- **Styling components**: Best practices for component styles and encapsulation. Read [component-styling.md](references/component-styling.md)
124
125## Testing
126
127When writing or updating tests, consult the following references based on the task:
128
129- **Fundamentals**: Best practices for unit testing, async patterns, and TestBed. Read [testing-fundamentals.md](references/testing-fundamentals.md)
130- **Component Harnesses**: Standard patterns for robust component interaction. Read [component-harnesses.md](references/component-harnesses.md)
131- **Router Testing**: Using RouterTestingHarness for reliable navigation tests. Read [router-testing.md](references/router-testing.md)
132- **End-to-End (E2E) Testing**: Best practices for E2E tests with Cypress or Playwright. Read [e2e-testing.md](references/e2e-testing.md)
133
134## Tooling
135
136When working with Angular tooling, consult the following references:
137
138- **Angular CLI**: Creating applications, generating code (components, routes, services), serving, and building. Read [cli.md](references/cli.md)
139- **Angular MCP Server**: Available tools, configuration, and experimental features. Read [mcp.md](references/mcp.md)
140
141## Anti-Patterns
142
143- Using null or undefined as initial signal form field values — use '', 0, or [] instead
144- Accessing form field state flags without calling the field first: form.field.valid() — use form.field().valid()
145- Starting new forms with older form APIs when the target Angular version supports Signal Forms
146- Setting min, max, value, disabled, or readonly HTML attributes on [formField] inputs — define these as schema rules instead
147- Calling inject() outside an injection context — use runInInjectionContext when needed
148- Using effect() for derived state that should use computed()
149- Referencing $parent.$index in nested @for loops — Angular does not support $parent; use let outerIdx = $index instead
150
151## Related Skills
152
153- tdd-workflow — test-driven development workflow applicable to Angular components and services
154- security-review — security checklist for web applications including Angular-specific concerns
155- frontend-patterns — general frontend patterns for context on React/Next.js approaches
156
In the file
SKILL.md1,291 words
Files36
LicenceMIT
Why you can read it

Nothing in a skill executes. The client loads the text and the model follows it, so a skill can be audited the way a runbook is — by reading it.

What it costs in context

Skills are not billed by the call. They are paid for in context: every token the instructions occupy is a token your code, your diff and your conversation cannot use. Here is what this one takes and when it takes it.

≈100
always loaded
The name and description, so the model knows the skill exists and when to reach for it.
32,675
on trigger
The instruction body and 35 supporting files, read only when the skill fires.
16.4%
of a 200k window
Ten skills this size would take about 164% of the window before you open a file.
050k100k150k200k context window

32.8k tokens, estimated from the bundle at four bytes to the token, held for the rest of the session once it triggers. Heavy. Teams tend to install this one per project rather than globally, and load it only when the job comes up.

Servers bill, skills cost

A server charges by the month. A skill charges once per session, in context, and then keeps charging it for as long as the session lives.

Before and after

The same question, put to the same model twice: once as it comes, and once with these instructions loaded.

No worked example has been published for this skill yet.

Adoption
Installsnone yet
Ratingno reviews yet

The procedure it runs

The procedure has not been published here. It is in the skill’s own SKILL.md, which its author has not sent to the marketplace yet.

Prose, not code

These steps are written for a model to follow, not executed by a runtime. It can still be told to skip one, and it will say so when it does.

Servers it uses

None. This skill calls no MCP servers at all.

Everything it needs is in the instructions, so it works in a project with nothing connected — the model reads the file and changes how it works with what it can already reach.

It writes no files and reaches no network. All it changes is how the model reasons and writes.

What it asks for
Writes filesno
Network accessno

Read from the allowed-tools line of this skill’s own SKILL.md. A skill grants no permissions of its own — it can only ask for tools your client already has.

What it will not do

Every skill is narrow, and the useful ones say where they stop. These are the jobs this one is the wrong tool for.

What this skill is not for has not been published here. Nothing is implied by that: it is a section the author has not filled in.

What is in the bundle

36 files, 131.1 kB on disk. A bundle is text throughout: the instructions the model reads, plus the templates it fills in.

  • SKILL.md11.0 kB
  • references/angular-animations.md4.0 kB
  • references/angular-aria.md12.6 kB
  • references/cli.md3.7 kB
  • references/component-harnesses.md2.9 kB
  • references/component-styling.md2.5 kB
  • references/components.md3.4 kB
  • references/creating-services.md2.7 kB
  • references/data-resolvers.md1.6 kB
  • references/define-routes.md1.7 kB
  • references/defining-providers.md2.3 kB
  • references/di-fundamentals.md3.6 kB
  • references/e2e-testing.md1.9 kB
  • references/effects.md2.8 kB
  • references/hierarchical-injectors.md2.1 kB
  • references/host-elements.md2.1 kB
  • references/injection-context.md1.9 kB
  • references/inputs.md2.4 kB
  • references/linked-signal.md2.6 kB
  • references/loading-strategies.md1.5 kB
  • references/mcp.md4.1 kB
  • references/navigate-to-routes.md1.6 kB
  • references/outputs.md2.6 kB
  • references/reactive-forms.md3.6 kB
  • references/rendering-strategies.md1.8 kB
  • references/resource.md2.7 kB
  • references/route-animations.md1.7 kB
  • references/route-guards.md1.4 kB
  • references/router-lifecycle.md1.5 kB
  • references/router-testing.md3.8 kB
  • references/show-routes-with-outlets.md1.7 kB
  • references/signal-forms.md24.2 kB
  • references/signals-overview.md2.8 kB
  • references/tailwind-css.md1.9 kB
  • references/template-driven-forms.md3.8 kB
  • references/testing-fundamentals.md2.6 kB
What is not in it

No dependencies and nothing executable: a skill is text the agent reads, so the bundle is 36 files you can review in full before installing. The MIT licence covers the templates and examples as well as the instructions.

Install

Installing copies the bundle into your project. Nothing runs at install time — the files sit on disk until the model reads them.

# Angular Developer Guidelines · 32.8k tokens when loaded npx mcprush@latest skill add affaan-m/angular-developer-guidelines

Writes to .claude/skills/angular-developer-guidelines/ in the current project. Add --global to put it in your home directory instead, for every project.

Which clients pick it up on their own

A skill is a folder of text. A client with a skills folder reads it without being told; everywhere else the same text works, it is just handed to the model rather than found.

Claude Code.claude/skills/
Claude Desktop
ChatGPT
Cursor.cursor/skills/
VS Code.github/skills/
Codex CLI.agents/skills/
Gemini CLI.gemini/skills/
Grok.grok/skills/
Zed.agents/skills/
Windsurf.windsurf/skills/
Agent SDK.claude/skills/
HTTP / API
This release
Versionnot versioned
Publishedno release date on file
PriceFree
Referenceaffaan-m/angular-developer-guidelines

Versions

Its author publishes no version number, so there is nothing here to pin to: what you install is the folder as it stands today. Instructions change more often than APIs do — a skill can be rewritten entirely without anything it depends on moving.

v
  • No earlier releases have been published to the marketplace.
Pinning

Nothing to pin to: this skill carries no version number of its own. What you install is what the folder holds on the day you install it.

Reviews

—no reviews yet · no installs yet

Nobody has reviewed this skill yet. The rating is the mean of the reviews written here, so there is none until somebody writes the first.

Who can post

Only accounts that have had the skill installed for fourteen days, so a review is written after living with it rather than after reading it. Publishers may reply once.

Who wrote it

AF
affaan-m

Publishes on mcprush.

0 servers listed55 skills listednot claimed
Profile
Publisher
Servers0