angular-tooling
Angular CLI usage, code generation, build configuration, and bundle optimization. Use when creating Angular projects, generating components/services/guards, configuring builds, running tests, or analyzing bundles. (triggers: angular.json, ng generate, ng build, ng serve, ng test, ng add, angular cli, bundle analysis)
Best use case
angular-tooling is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Angular CLI usage, code generation, build configuration, and bundle optimization. Use when creating Angular projects, generating components/services/guards, configuring builds, running tests, or analyzing bundles. (triggers: angular.json, ng generate, ng build, ng serve, ng test, ng add, angular cli, bundle analysis)
Teams using angular-tooling should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/angular-tooling/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How angular-tooling Compares
| Feature / Agent | angular-tooling | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Angular CLI usage, code generation, build configuration, and bundle optimization. Use when creating Angular projects, generating components/services/guards, configuring builds, running tests, or analyzing bundles. (triggers: angular.json, ng generate, ng build, ng serve, ng test, ng add, angular cli, bundle analysis)
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Angular Tooling ## **Priority: P2 (OPTIONAL)** ## CLI Essentials - **Command**: `ng generate component` (or `ng g c`) - **Flags**: Use `--dry-run` to preview output first. Add `--change-detection=OnPush` to set CD strategy at generation time. Use `--skip-tests` if spec is not needed. - **Workflow**: Always use `ng generate` — **never create files manually**. ```bash ng new my-app --style=scss --routing # Create project ng g c features/user-profile # Generate component ng g s services/auth # Generate service (providedIn: root) ng g guard guards/auth # Generate functional guard ng g interceptor interceptors/auth # Generate functional interceptor ng g pipe pipes/truncate # Generate standalone pipe ``` ## Code Generation Flags - `--dry-run` — Preview output without writing files. Always use `--dry-run` first for unfamiliar generators. - `--skip-tests` — Skips spec file generation. - `--flat` — Skips subfolder creation. - `--change-detection=OnPush` — Sets CD strategy on generation. - `--style=scss` — Sets stylesheet format. ## Build Configuration - **Dev**: `ng serve --open` - **Prod**: `ng build -c production`. Output goes to `dist/my-app/browser/`. - **SSR**: `ng add @angular/ssr` then `ng build` (adds `server/` output). - **Coverage**: `ng test --code-coverage --watch=false`. Coverage output goes to `coverage/` directory. ## Bundle Analysis ```bash ng build -c production --stats-json npx esbuild-visualizer --metadata dist/my-app/browser/stats.json --open ``` - **Note**: Check `angular.json` budgets — do not hand-edit `angular.json budgets` values; analyze the bundle first to understand what's large. ## Update Angular - **Command**: `ng update` to check available updates. - **Apply**: `ng update @angular/core @angular/cli` — this runs official **codemods** to migrate your code. - **Rule**: **Never use --force**; fix peer dependency conflicts properly instead. ## Anti-Patterns - **No manual file creation**: Always use `ng generate` for consistency and proper registration. - **No `ng update --force`**: Fix peer dependency conflicts instead of skipping checks. - **No hand-editing angular.json budgets**: Lower budgets cause CI failures; analyze bundles first. ## References - [Angular CLI Docs](https://angular.dev/tools/cli)
Related Skills
swift-tooling
Configure SPM packages, SwiftLint, and build settings for Swift projects. Use when managing Swift packages with SPM, configuring build settings, or enforcing Swift code quality. (triggers: Package.swift, .swiftlint.yml, package, target, dependency)
react-tooling
Configure debugging, bundle analysis, and ecosystem tools for React applications. Use when setting up Vite/webpack build tooling, analyzing bundle size, debugging re-renders with React DevTools, or configuring ESLint and StrictMode for React projects. (triggers: package.json, devtool, bundle, strict mode, profile)
php-tooling
Configure PHP ecosystem tooling, dependency management, and static analysis. Use when managing Composer dependencies, running PHPStan, or configuring PHP build tools. (triggers: composer.json, composer, lock, phpstan, xdebug)
nextjs-tooling
Configure Next.js build tooling, deployment, and developer workflow. Use when setting up Turbopack, standalone Docker output, bundle analysis, CI caching, environment variable validation, or ESLint integration for Next.js projects. (triggers: next.config.js, package.json, Dockerfile, turbopack, output, standalone, lint, telemetry)
laravel-tooling
Configure Laravel ecosystem with custom Artisan commands, Vite asset bundling, Pint code styling, and Horizon queue monitoring. Use when creating Artisan commands, migrating from Mix to Vite, or configuring Pint code standards. (triggers: package.json, composer.json, vite.config.js, artisan, vite, horizon, pint, blade)
kotlin-tooling
Configure Gradle Kotlin DSL, Version Catalogs, and MockK for Kotlin projects. Use when configuring build.gradle.kts, setting up libs.versions.toml, adding MockK for tests, or choosing between Kotlin-compatible test assertion libraries. (triggers: build.gradle.kts, libs.versions.toml, detekt.yml, mockk, kts, version catalog, kotest)
JavaScript Tooling
Configure development tools, linting, and testing for JavaScript projects. Use when configuring ESLint, Prettier, or test runners for JavaScript projects. (triggers: .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, test, lint, build)
java-tooling
Configure Maven, Gradle, and static analysis for Java projects. Use when setting up Java build tooling, configuring Spotless or Checkstyle, managing JDK versions with sdkman, writing Dockerfiles for Java services, or adding SpotBugs/SonarLint. (triggers: pom.xml, build.gradle, build.gradle.kts, mvnw, gradlew, .sdkmanrc, spotbugs, checkstyle, spotless, eclipse-temurin)
golang-tooling
Go developer toolchain — gopls LSP diagnostics, linting, formatting, and vet. Use when setting up Go tooling, running linters, or integrating gopls with Claude Code. (triggers: gopls, golangci-lint, golangci.yml, go vet, goimports, staticcheck, go tooling, go lint)
dart-tooling
Dart static analysis, linting, formatting, and code-generation standards. Use when touching analysis_options.yaml, running build_runner, configuring dart format line length, setting up DCM metrics, or adding pre-commit hooks via lefthook — and whenever a CI job fails on analyze or format steps. (triggers: analysis_options.yaml, build.yaml, build_runner, lefthook.yml, dart format, dart_code_metrics)
angular-testing
Write Angular component tests using TestBed, ComponentHarness, and HttpTestingController with proper signal input handling. Use when writing component tests, mocking HTTP calls, or testing signal inputs. (triggers: **/*.spec.ts, TestBed, ComponentFixture, TestHarness, provideHttpClientTesting)
angular-style-guide
Naming conventions, file structure, and coding standards for Angular projects. Use when naming Angular files, organizing project structure, or following Angular style guide. (triggers: angular style, naming convention, file structure, angular-style-guide)