skills.rest
Blotch-Smart-Frames
Blotch-Smart-FramesOFFICIAL
Explore all skills by this author →
WebsiteGitHub

angular-tooling

Guides Angular CLI usage for project setup, code generation, building, and testing in Angular v20+ projects.

Updated Feb 9, 2026
Search Tags:#testing#frontend#code generation#angular#cli#build#schematics
One-click install
npx skills add https://github.com/Blotch-Smart-Frames/Board --skill angular-tooling-blotch-smart-frames
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-tooling
Source: https://github.com/Blotch-Smart-Frames/Board/tree/main/packages/client/.claude/skills/angular-tooling
Command: npx skills add https://github.com/Blotch-Smart-Frames/Board --skill angular-tooling-blotch-smart-frames

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Developers working with Angular v20+ often struggle to remember the correct CLI commands, flags, and configuration options for scaffolding, building, testing, and optimizing applications, leading to inconsistent setups and misconfigured builds. ## Core Features & Use Cases - Code Generation: Generate components, services, directives, pipes, guards, interceptors, and other schematics with the correct flags for standalone Angular projects. - Build & Test Workflows: Run development servers, production builds with budgets and output hashing, unit tests with coverage, and linting through standard Angular CLI commands. - Configuration Guidance: Set up angular.json, environment file replacements, path aliases, proxy configs, build caching, and bundle analysis. - Use Case: When starting a new feature, ask for a component with OnPush change detection and skipped tests, then build for production with bundle budgets enforced and analyze the output with esbuild-visualizer. ## Quick Start Ask the assistant to generate a new Angular component with OnPush change detection and then run a production build with bundle analysis.

Frequently Asked Questions about angular-tooling

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

FAQPage Schema
How do I generate a component in Angular v20?▼

Run ng generate component followed by the path, such as ng g c features/user-profile. Add flags like --change-detection=OnPush, --skip-tests, --inline-template, or --dry-run to control the output.

How to run Angular tests in CI without a browser window?▼

Use ng test --watch=false --browsers=ChromeHeadless for a single headless run suitable for CI pipelines. Add --code-coverage to produce a coverage report for tools like Codecov.

Does Angular v20 use esbuild or Webpack for builds?▼

Angular v20 uses the esbuild-based application builder (@angular-devkit/build-angular:application) by default. This skill does not cover custom Webpack configurations or standalone Vite/esbuild setups.

How do I configure a development proxy in Angular?▼

Create a proxy.conf.json mapping paths like /api to a target backend, then reference it in angular.json under serve options or pass it via ng serve --proxy-config proxy.conf.json.

When should I not use Angular CLI commands from this guide?▼

Avoid these commands for Nx workspace operations, custom Webpack configurations, or non-Angular build systems like standalone Vite or direct esbuild usage, which require different tooling.

Related Skills

Explore More Software Engineering Skills→
analogjsanalogjs
595

angular-tooling

Automate Angular v20+ project scaffolding and code generation with ng commands.

Official
Intermediate
auldsyababuaauldsyababua
6

cicd-pipeline-generator

Generate CI/CD pipeline configurations for GitHub Actions, GitLab CI, CircleCI, and Jenkins.

Community
Advanced
ThejanaJayalathThejanaJayalath

angular-developer

Generate Angular components and services with Signals and standalone architecture.

Community
Advanced
qauth-labsqauth-labs
23

nx-commands

Automate Nx workspace tasks including visualization, affected analysis, and builds via the nx CLI.

Official
Basic