
Generate, update, and maintain documentation for Angular Awesome components. Use when creating or updating rules.md, example.md, or toast/component docs, running the doc generator (generate-docs.js), updating the CHANGELOG.md, updating the components index, or syncing version badges across the docs site.
Integrate Angular Awesome form controls (wa-input, wa-select, wa-checkbox, wa-switch, wa-slider, wa-textarea, wa-combobox, wa-color-picker, wa-number-input, wa-radio, wa-file-input) with Angular Reactive Forms and Template-Driven Forms. Use when binding [(ngModel)], using FormControl/FormGroup, implementing custom validation, handling wa-input/wa-change events, or building form layouts with Web Awesome components.
Write and maintain tests for Angular Awesome wrapper directives, components, and services. Use when creating spec files for wa-* components, testing form control integration, testing event emission, testing toast/service behavior, running headless or BrowserStack tests, or debugging test failures in Angular Awesome.
Migrate Angular Awesome component wrappers when the upstream Web Awesome API changes. Use when replacing custom implementations with official web components, updating property names or types, removing deprecated fields, aligning placement/position values, updating tests for new APIs, and updating docs/changelog for breaking changes.
Create a new Angular Awesome wrapper directive or component for a Web Awesome web component. Use when adding a new wa-* component wrapper, scaffolding a directive with its spec/rules/example files, wiring it into public-api.ts, updating the changelog, and regenerating docs. Covers the full end-to-end flow from llms.txt API extraction through to build verification.
Use Angular Awesome wrapper directives for Web Awesome web components in Angular 20+ projects. Trigger when tasks mention wa-* components (wa-button, wa-input, wa-dialog, wa-toast, wa-select, wa-checkbox, etc.), Angular Awesome directives, Web Awesome Angular integration, component variants/appearance/size tokens, slot projection, form control binding, or angular-awesome imports. Covers component usage, layout utilities, services (toast), theming, and accessibility.
Theme and style Angular Awesome components using Web Awesome design tokens, CSS custom properties, CSS parts, variant/appearance/size tokens, and layout utilities. Use when customizing component appearance, applying brand colors, overriding default styles, using CSS shadow parts, or configuring layout directives (cluster, stack, grid, gap, align, flank, frame, split).