angular-developer

Generate Angular code and architecture guidance for projects, components, and services.

Updated Apr 14, 2026
One-click install
npx skills add https://github.com/BrunoAMSilva/my-config --skill angular-developer-brunoamsilva
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: angular-developer
Source: https://github.com/BrunoAMSilva/my-config/tree/main/coding/skills/angular-developer
Command: npx skills add https://github.com/BrunoAMSilva/my-config --skill angular-developer-brunoamsilva

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Helps developers and teams quickly generate correct, maintainable Angular code and architecture advice while avoiding version, tooling, and reactivity mistakes that cause build or runtime problems.

Core Features & Use Cases

  • Version-aware guidance: Detects and advises based on the project's Angular version so recommendations (e.g., signals, legacy APIs) are accurate.
  • CLI-first scaffolding: Recommends and composes Angular CLI commands (or npx fallbacks) for creating projects, components, services, guards, and routes.
  • Reactivity & forms guidance: Advises on Signals, linkedSignal, resource, effects, and when to prefer Signal Forms vs Reactive/Template-driven forms.
  • Architecture & tooling: Covers dependency injection patterns, route loading strategies, SSR/SSG vs CSR decisions, testing harnesses, accessibility patterns (Angular Aria), animations, Tailwind v4 integration, and MCP tooling for AI-assisted workflows.
  • Validation & build checks: Instructs running ng build, resolving errors, and choosing proper install/execute paths (local ng vs npx for versioned installs).

Quick Start

Create a new Angular project named my-app using the latest stable Angular, set up signal forms, and scaffold a routing skeleton.

Frequently Asked Questions about angular-developer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold a new Angular project with signals and routing?

Generate an Angular project with signals and routing by using Angular CLI commands or npx fallbacks. This approach ensures version-aware scaffolding, preferring signal forms on v21+, while following style-guide best practices for maintainable architecture.

What is the best way to manage reactivity and forms in Angular?

The best way to manage Angular reactivity and forms is by using Signals, linkedSignal, and resource APIs. For forms, prefer Signal Forms on v21+, while evaluating Reactive or Template-driven forms based on your project's specific version and complexity requirements.

How do I generate Angular components and services using the CLI?

Generate Angular components and services using local ng or npx commands depending on your requested version. This CLI-first scaffolding method creates projects, components, services, guards, and routes while strictly following Angular style-guide best practices.

Does this Angular code generation approach support SSR and accessibility patterns?

Yes, this Angular code generation approach supports SSR/SSG decisions and accessibility patterns. It provides architecture guidance for route loading strategies, Angular Aria implementations, animations, and dependency injection patterns across different rendering scenarios.

Why should I run ng build after generating Angular code?

You should run ng build after generating Angular code to validate the output and resolve errors. This validation step ensures that the version-aware guidance, reactivity patterns, and CLI scaffolding produce correct, maintainable code without runtime issues.

Can I use Tailwind v4 and MCP tooling with Angular architecture guidance?

Yes, you can integrate Tailwind v4 styling and MCP tooling for AI-assisted workflows with Angular architecture guidance. It covers dependency injection, testing harnesses, and animations to ensure comprehensive project development and maintainability.