angular-ui-skills

Generates PrimeNG code and guidance for Angular projects using `primeng` with `@primeuix/themes` and `@primeuix/styles`. Covers installation, design-token theming (Aura / Lara / Nora / Material presets), Styled vs Unstyled modes, the PassThrough (`pt`) customization API, component usage across all categories (form controls, buttons, overlays, layout, data display, display, menus), ReactiveForms / Signal Forms integration, accessibility, and v18→v21 migration renames. Use when the user mentions PrimeNG, `primeng`, `p-*` components, Aura/Lara/Nora theme presets, OR when the Angular project's `package.json` contains `primeng` or `@primeuix/*` dependencies. Pairs with `angular-developer` for Angular fundamentals.

Generates Angular Material code and guidance for Angular projects using `@angular/material` with the Material 3 (M3) theming system. Covers installation, Sass-based theming via `mat.theme()` and the prebuilt palettes, density and typography customisation, component usage across all categories (form controls, buttons, overlays, layout, data display, navigation), `@angular/cdk` primitives (Overlay, Portal, Drag-Drop, Virtual Scroll, A11y), ReactiveForms / Signal Forms integration via `mat-form-field`, accessibility, and the M2 → M3 migration. Use when the user mentions Angular Material, `@angular/material`, `mat-*` components, M3 / Material 3, design tokens, OR when the Angular project's `package.json` contains `@angular/material`. Pairs with `angular-developer` for Angular fundamentals.

Generates NG-ZORRO code and guidance for Angular projects using `ng-zorro-antd`. Covers installation, LESS-variable theming (default, dark, compact, aliyun presets), the experimental dynamic CSS-variable theme, component usage across all categories (general, layout, navigation, data entry, data display, feedback), ReactiveForms / Signal Forms integration via `nz-form`, internationalisation (`provideNzI18n`), accessibility, and the module → standalone migration. Use when the user mentions NG-ZORRO, ng-zorro, ng-zorro-antd, Ant Design for Angular, `nz-*` components, `Nz*Module`, OR when the Angular project's `package.json` contains `ng-zorro-antd`. Pairs with `angular-developer` for Angular fundamentals.

Generates Spartan/ng UI code and guidance for Angular projects using @spartan-ng/helm (styled components copied into the repo) and @spartan-ng/brain (headless primitives). Covers installation, Tailwind theming (v3 and v4), component usage across all categories (forms, overlays, layout, display, data), Brain primitives, ReactiveForms / Signal Forms integration, and accessibility. Use when the user mentions Spartan, spartan-ng, @spartan-ng, hlm-* or brn-* components, OR when the Angular project's package.json contains @spartan-ng/* dependencies. Pairs with angular-developer for Angular fundamentals.

Cross-cutting UI quality and dashboard-design skill. Covers the three tells of an amateur dashboard (data shapes the UI, progressive disclosure, hidden UI), plus the Refactoring UI principles (hierarchy, spacing, typography, color, depth, finishing touches) and how to apply each in Angular projects using Spartan/ng, PrimeNG, NG-ZORRO, or Angular Material. Use when the user asks to polish, refine, redesign, or "make this look better"; when building a dashboard, table, KPI surface, or data-heavy view; when the project has visual quality issues (low hierarchy, ambiguous spacing, grey-on-color text, color used as the only signal); or when the user mentions hierarchy, density, spacing, typography, palette, shadows, or empty states. Pairs with one of the library-specific skills (spartan-ng-developer, primeng-developer, ng-zorro-developer, angular-material-developer) for the implementation surface, and with angular-developer for the Angular fundamentals.