Menu
Configure Angular projects for web components (Angular Elements) with dual development and distribution configurations.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Consolidated Angular conventions for components, dependency injection, forms, HTTP, routing, signals, MSAL authentication, and A2UI generative UI. Use when working on Angular applications and you need modern Angular guidance or routing into a specific Angular concern. Triggers on component creation, inject(), signal forms, httpResource(), guards, route configuration, computed(), linkedSignal(), MSAL, Azure Entra, A2UI, agent-driven / generative UI, Angular architecture, load-once data loading, ensureLoaded guards, duplicate HTTP requests, refetch-after-CRUD elimination, and production bundle-size optimization (initial budget exceeded, main.js too big, tree-shaking, lazy-init).
Complete installation and configuration guide for ngx-markdown and its plugins in Angular projects. Use when setting up markdown rendering with syntax highlighting, diagrams, and advanced features.
Step-by-step guide for implementing Playwright E2E testing in Angular v20+ projects. Covers installation, configuration, test organization with fixtures and page objects, and best practices for modern standalone components with Vitest and Playwright integration.
Add a new demo to any module under demos/. Registers it in db.json, generates the component, adds the route, adds the markdown renderer, and creates an empty guide. Triggers on: add demo, create demo, new demo, register demo.
Step-by-step guide for migrating Angular projects from Karma/Jasmine to Vitest (Angular v20/21+). Includes dependency management, configuration setup, test file API migration, and best practices for zoneless/OnPush testing.
Expert guidance for creating accessible code conforming to WCAG 2.2 Level AA. Use for accessibility compliance, component architecture, keyboard navigation, focus management, contrast verification, and inclusive UI patterns.
| name | ng-register-elements |
| description | Configure Angular projects for web components (Angular Elements) with dual development and distribution configurations. |
Automatically set up any Angular 21+ project for web component distribution with dual configurations:
node scripts/ng-configure-element.js <project-path>
npm start # Dev with zoneless change detection
npm run serve:element # Preview element without zoneless
npm run build:element # Build web component for distribution
src/main.element.ts - Element entry pointsrc/app/app.config.element.ts - Element configuration (no zoneless)scripts/serve-element.sh - Element dev serverscripts/build-element.sh - Element build scriptpackage.json with new npm commandsDevelopment (npm start):
provideZonelessChangeDetection()Distribution (serve:element / build:element):
# Configure a project
node scripts/ng-configure-element.js demos/11-elements/skills-list
# Test all three modes
cd demos/11-elements/skills-list
npm start # Dev mode
npm run serve:element # Element preview
npm run build:element # Build for distribution
Angular, Elements, Web Components, standalone components, configuration, TypeScript, distribution