Setup Angular Web

This documentation was generated with the assistance of AI. Please report any inaccuracies.

Scaffold a new Angular web application with ng new, then layer on this catalog’s standard toolchain: Vitest coverage gates, ESLint (angular-eslint), Prettier, Stylelint for SCSS, Playwright e2e, Compodoc API docs, optional Storybook, and Sonar wiring.

Purpose

iru-setup-angular-web bootstraps an Angular workspace with npx -p @angular/cli@latest ng new <name> --standalone --style=scss --routing --skip-git --package-manager=npm --defaults --ssr=false (Angular 22’s own defaults already give a zoneless, Vitest-backed, standalone-component workspace) and then fills in everything that scaffold does not include out of the box: confirms angular.json’s `test target uses @angular/build:unit-test with runner: vitest, adds coverageReporters and an 80%-lines coverageThresholds gate, and installs a matching-major @vitest/coverage-v8 (the coverage collector ng new does not bundle); ng add angular-eslint plus eslint-config-prettier; a .prettierignore next to the CLI’s own .prettierrc; Stylelint 17 for SCSS (stylelint-config-standard-scss, with no-empty-source disabled to tolerate the CLI’s 0-byte root stylesheet); Playwright via ng add playwright-ng-schematics (fixing the schematic’s own hardcoded /MyApp/ title assertion); the catalog’s UI-contract test scaffolding (see Building user interfaces) — a Playwright component-testing project using the built-in mount() fixture against a component gallery served by a gallery configuration in angular.json, @axe-core/playwright, a shared e2e/support/ui-screenshots.ts helper, a sample screen spec capturing .ui-screenshots/ across left-to-right/right-to-left × light/dark with an accessibility check, and a .ui-quality.yml at the repository root; Compodoc; optional Storybook; and, when sonar is not none, sonar-project.properties pointing at the real coverage/<project>/lcov.info path. It is the Angular leaf of the TypeScript/Node bootstrap pipeline, parallel to iru-setup-react-web, iru-setup-react-native-app, and iru-setup-ionic-app.

Purpose group

TypeScript/Node Bootstrap

Plugin

Shipped by the iru-typescript plugin of the ai-catalog marketplace (install with /plugin install iru-typescript@ai-catalog; see Plugins).

Invocation

/iru-setup-angular-web

Inputs

Argument Required Description Default

args

No

Pre-resolved parameters passed by an orchestrating skill (e.g. Setup TypeScript Repository) as newline-separated key: value lines, parsed in Step 0 so this skill doesn’t re-ask about any field already resolved this way.

None — if absent or unrecognized, every field is asked interactively.

name

Yes (unless supplied via args)

The Angular workspace/project name, e.g. my-app — used for the ng new command and as <project> in the coverage/<project>/lcov.info path.

None

directory

No

Where to scaffold; . scaffolds directly into an already-empty repository root instead of a <name>/ subdirectory.

name itself

license

Yes (unless supplied via args)

Resolved via AskUserQuestion: Apache License 2.0, MIT License, No license, or Other.

None — user must choose

developer-name / developer-email / organization-url

Yes (unless supplied via args)

Not written into any Angular-generated file directly; recorded for `iru-check-license’s header generation once a license is chosen.

None

open-source

Yes (unless supplied via args)

Whether the repository is open source; drives the sonar recommendation together with visibility.

None

sonar

No

cloud, self-hosted, or none (+ sonar-organization/sonar-project-key/sonar-host-url when not none). cloud is recommended only for a repository that is both public and open source (SonarCloud is free only for public open-source projects, per its current pricing); otherwise none is recommended, with self-hosted SonarQube as the alternative.

cloud when public and open source; otherwise none recommended

storybook

No

Whether to also scaffold Storybook (@storybook/angular-vite) for isolated component development.

no

visibility

No

public, private, or internal — the GitHub repository’s visibility, used only to key the sonar recommendation. internal counts as private. If open-source: yes but visibility is private/internal, the skill warns and asks which is right.

Resolved only when the sonar question is asked: gh repo view --json visibility -q .visibility, else asked (Public recommended when open source)

ci

No

yes/no — whether the run invoking this skill generates GitHub Actions workflows at all; consulted only by the sonar question. With ci: no, none is recommended for Sonar since no CI would send reports (sonar-project.properties is still written if the user picks cloud/self-hosted, and the report says so).

yes implied

accessibility

No

enforce, report, off or none — the automated accessibility level of the UI tests (axe violations fail them, are listed, or are not run), written to .ui-quality.yml. Asked in Step 2 when unresolved. none opts out entirely (writes accessibility: none, installs no accessibility tooling and omits the accessibility attributes from the templates); a prior .ui-quality.yml value is never silently flipped in mode: existing.

enforce

on-existing

No

ask/keep/update/replace — how Step 1 treats each pre-existing artifact. keep/update/replace is applied to every one without asking (the warning is still printed); meant for scripted runs.

ask

mode

No

new or existing. existing marks the run as an update of an established repository, but never means "update silently" — Step 1 still warns and asks per pre-existing artifact unless on-existing says otherwise.

new

Outputs

  • A scaffolded Angular workspace (angular.json, package.json, src/) at the resolved directory.

  • angular.json’s `test target configured for Vitest with coverage reporters and an 80%-lines threshold, plus @vitest/coverage-v8 installed at the matching vitest major.

  • ESLint (eslint.config.js via angular-eslint, extended with eslint-config-prettier), a .prettierignore, Stylelint (.stylelintrc.json) for SCSS, and reformatted CLI-generated files (npx prettier --write .).

  • Playwright e2e (playwright.config.ts, e2e/example.spec.ts with its title assertion corrected to the real project name).

  • UI contract scaffolding (Step 10b): .ui-quality.yml at the repository root, e2e/support/ui-screenshots.ts (from the skill’s reference/ui-screenshots.ts), the gallery under playwright/gallery/ with tsconfig.gallery.json and gallery configurations in angular.json, a sample src/app/app.story.ts, and component/screen specs under e2e/ that write .ui-screenshots/ captures and run axe at the configured level; @axe-core/playwright and @types/node installed.

  • Compodoc wired via a docs npm script producing docs/api/.

  • Optionally, a Storybook scaffold (storybook: yes).

  • sonar-project.properties at the repository root, only when sonar is cloud or self-hosted.

  • A report that opens by repeating the announced mode (from scratch or updating an existing setup), lists per owned artifact the action taken (created / updated / replaced / kept as is / removed) and each mismatch a kept artifact leaves with this run’s choices, the visibility used for Sonar and where it came from, what ran or was skipped by design, plus explicit warnings to review generated files, run Prettier if not already run, and install Playwright browser binaries before ng e2e.

Execution flow

flowchart TD A[Start /iru-setup-angular-web] --> B{"Step 0: args supplied?"} B -- yes --> C[Parse key: value pairs from args] B -- no --> D[Treat every field as unset] C --> E["Step 1: Survey angular.json and\nevery artifact Steps 5-13 own"] D --> E E -- "nothing exists" --> F[Announce: scaffolding from scratch] E -- "workspace exists or mode: existing" --> G["Announce: updating an existing workspace; warn\nng new is never re-run"] G --> H{"on-existing keep/update/replace?"} H -- yes --> I[Apply it to every existing artifact] H -- no --> J["AskUserQuestion per artifact:\nUpdate / Keep as is / Replace / Stop"] J -- Stop --> K[Report untouched; end] J -- other --> L I --> L F --> L["Step 2: Collect name, directory, developer info,\nlicense, open-source, visibility, sonar, storybook,\naccessibility"] L --> M["Step 3: Look up tool versions\n(npm view, with Sept 2026 fallbacks)"] M --> N["Step 4: ng new scaffold\n(standalone, scss, routing, ssr=false;\nskipped when a workspace exists)"] N --> O["Step 5-6: Configure test target\n+ install @vitest/coverage-v8\nmatching vitest major"] O --> P["Step 7: ng add angular-eslint\n+ eslint-config-prettier"] P --> Q["Step 8: Confirm Prettier,\nadd .prettierignore, npx prettier --write ."] Q --> R["Step 9: Add Stylelint for SCSS"] R --> S["Step 10: ng add playwright-ng-schematics,\nfix hardcoded title assertion"] S --> S2["Step 10b: UI contract: .ui-quality.yml, gallery,\nui-screenshots helper, sample specs with axe"] S2 --> T["Step 11: Add Compodoc"] T --> U{"Step 12: storybook: yes?"} U -- yes --> V["npx storybook@latest init\n(unverified end-to-end)"] U -- no --> W{"Step 13: sonar != none?"} V --> W W -- yes --> X[Write sonar-project.properties] W -- no --> Y["Step 14: Report per-artifact actions,\nmismatches, warnings"] X --> Y

Dependencies

Invokes

None — iru-setup-angular-web is a leaf skill; it does not call any other skill in this catalog. It mentions iru-check-license in prose (to generate a LICENSE file and backfill headers once a license is chosen) without invoking it.

Invoked by

Related agents

None — this skill does not itself invoke iru-gate-runner, iru-isolated-skill-executor, or iru-change-summarizer.

Source

SKILL.md on GitHub — the file this page was generated from.