frontend (web frontend router)
Index mapping a web-frontend work area to the skill to load. It routes rather than copies - load the named skill for the actual guidance; the one deliberate exception is the Design quality section below, which lives in-skill (it replaced the removed frontend-design plugin). If you already know the leaf skill, go straight to it and skip this router. The .NET backend has its own index (dotnet); this is the web-frontend side.
Companion, not optional: load javascript (the base language layer - modules, async, errors) plus typescript (the type layer) for any TS/JS. Every row below is in addition to that language baseline.
Availability - required vs optional. In an Angular project the always-on spine is this router, the javascript + typescript language pair (every .ts / .js file), and angular-conventions (the framework layer, on any Angular file) - the convention rule already auto-attaches the latter two on .ts edits. Every other row below is an optional specialist, loaded only when its area is in play - angular-material (Material/CDK), angular-styling (CSS/SCSS), angular-security (hardening a feature), mobile (Ionic/Capacitor) - never up front, and installed only where the project's stack or evidence shows that area: a row whose skill is not in your skill list means the area is absent here, not a broken pointer - work from this router and skip the row. A plain non-Angular TypeScript project needs only the language pair; pure JS needs only javascript.
Area -> skill
| You are about to... |
Load |
| write or edit Angular components, services, signals, templates, routing, forms, a11y |
angular-conventions |
| write any TypeScript / JavaScript (the framework-agnostic language baseline) |
javascript + typescript (always; JS-only projects skip the type layer) |
| build distinctive, production-grade UI that avoids generic AI aesthetics |
the Design quality notes below (in-skill) |
build UI with Angular Material (@angular/material) + CDK components |
angular-material |
| write or edit CSS / SCSS in an Angular app - scoping, ViewEncapsulation, design tokens, responsive, a11y styling |
angular-styling |
| harden or review an Angular feature - XSS, sanitization, CSP, CSRF, auth-token storage, SSR/TransferState leaks |
angular-security |
| write, change, or review tests - Angular suites, or plain-TS/JS code outside a framework harness |
angular-testing / ts-js-testing |
| build an Ionic / Capacitor mobile or hybrid app |
mobile |
| look up current framework / library API docs |
the context7 MCP |
Example
'Add a profile page with a form, avatar upload, and a distinctive look' -> angular-conventions (the page, routing, typed form; typescript rides along auto-attached), angular-material when the controls are Material, angular-styling plus the Design quality bar below for the look, and angular-security to review the upload path. Load each at the step that touches its area - never all five up front.
Design quality (distinctive, production-grade UI)
House guidance for UI that looks intentional, not generic-AI-default. Apply it on greenfield or visual work, and skip it when you are reproducing a fixed design or Figma handoff faithfully. It owns the taste; the mechanism routes to angular-styling (CSS, tokens, responsive) and angular-material (theming).
- A real design system, not defaults. Commit to a deliberate type scale, a spacing rhythm, and a genuine color system (surfaces, accents, states) - not the framework's out-of-the-box palette and default margins.
- Layout with intent. Build hierarchy from scale, weight, and whitespace; align to a grid; give content room. Avoid the evenly-spaced, center-everything, single-column default.
- Motion with purpose. Transitions and micro-interactions that clarify a state change, not decoration - and respect prefers-reduced-motion.
- Design every state. Empty, loading, error, and success are part of the UI, not afterthoughts.
- Responsive by construction, accessible by default. Contrast, focus-visible, and keyboard paths are not optional; the a11y rules themselves stay in
angular-conventions / angular-styling.
Notes
- Angular is the house web framework. This router is for navigation, not enforcement - the path-scoped convention rule (Availability above) is the soft enforcement layer.
- Not every route target is a skill: context7 is an MCP server and the Design quality section is in-skill; the rest of the column are skills.
- No separate a11y row:
angular-conventions owns the a11y rules (including the runner-matched axe checks in specs), angular-styling the styling-side a11y. Cross-framework state management is intentionally unrouted - no house skill owns it.
frontend and mobile stay split on purpose: an Ionic/Capacitor app pulls a distinct native layer (Capacitor lifecycle, plugins, permissions) that plain web work never touches.
1---2name: frontend3description: Router and index for web frontend work - maps a frontend area (Angular framework code, TypeScript/JavaScript language, Material/CDK components, CSS/SCSS styling, client-side security, library docs) to the focused skill to load, plus the in-skill Design quality bar. Load when starting web UI work where the right skill is not yet obvious - a feature spanning components, styles, and security, or orienting in an unfamiliar frontend codebase; asks like 'add a profile page with a form and avatar upload' or 'make this dashboard look less generic' start here. Do NOT load when the leaf skill is already known - go straight to it (typescript is always the companion for TS/JS). For Ionic/Capacitor mobile see mobile; for .NET backend see dotnet.4---56# frontend (web frontend router)78Index mapping a web-frontend work area to the skill to load. It routes rather than copies - load the named skill for the actual guidance; the one deliberate exception is the Design quality section below, which lives in-skill (it replaced the removed frontend-design plugin). If you already know the leaf skill, go straight to it and skip this router. The .NET backend has its own index (`dotnet`); this is the web-frontend side.910**Companion, not optional:** load `javascript` (the base language layer - modules, async, errors) plus `typescript` (the type layer) for any TS/JS. Every row below is in addition to that language baseline.1112**Availability - required vs optional.** In an Angular project the always-on spine is this router, the `javascript` + `typescript` language pair (every `.ts` / `.js` file), and `angular-conventions` (the framework layer, on any Angular file) - the convention rule already auto-attaches the latter two on `.ts` edits. Every other row below is an optional specialist, loaded only when its area is in play - `angular-material` (Material/CDK), `angular-styling` (CSS/SCSS), `angular-security` (hardening a feature), `mobile` (Ionic/Capacitor) - never up front, and installed only where the project's stack or evidence shows that area: a row whose skill is not in your skill list means the area is absent here, not a broken pointer - work from this router and skip the row. A plain non-Angular TypeScript project needs only the language pair; pure JS needs only `javascript`.1314## Area -> skill1516| You are about to... | Load |17|---|---|18| write or edit Angular components, services, signals, templates, routing, forms, a11y | `angular-conventions` |19| write any TypeScript / JavaScript (the framework-agnostic language baseline) | `javascript` + `typescript` (always; JS-only projects skip the type layer) |20| build distinctive, production-grade UI that avoids generic AI aesthetics | the Design quality notes below (in-skill) |21| build UI with Angular Material (`@angular/material`) + CDK components | `angular-material` |22| write or edit CSS / SCSS in an Angular app - scoping, ViewEncapsulation, design tokens, responsive, a11y styling | `angular-styling` |23| harden or review an Angular feature - XSS, sanitization, CSP, CSRF, auth-token storage, SSR/TransferState leaks | `angular-security` |24| write, change, or review tests - Angular suites, or plain-TS/JS code outside a framework harness | `angular-testing` / `ts-js-testing` |25| build an Ionic / Capacitor mobile or hybrid app | `mobile` |26| look up current framework / library API docs | the context7 MCP |2728## Example2930'Add a profile page with a form, avatar upload, and a distinctive look' -> `angular-conventions` (the page, routing, typed form; `typescript` rides along auto-attached), `angular-material` when the controls are Material, `angular-styling` plus the Design quality bar below for the look, and `angular-security` to review the upload path. Load each at the step that touches its area - never all five up front.3132## Design quality (distinctive, production-grade UI)3334House guidance for UI that looks intentional, not generic-AI-default. Apply it on greenfield or visual work, and skip it when you are reproducing a fixed design or Figma handoff faithfully. It owns the *taste*; the mechanism routes to `angular-styling` (CSS, tokens, responsive) and `angular-material` (theming).3536- **A real design system, not defaults.** Commit to a deliberate type scale, a spacing rhythm, and a genuine color system (surfaces, accents, states) - not the framework's out-of-the-box palette and default margins.37- **Layout with intent.** Build hierarchy from scale, weight, and whitespace; align to a grid; give content room. Avoid the evenly-spaced, center-everything, single-column default.38- **Motion with purpose.** Transitions and micro-interactions that clarify a state change, not decoration - and respect prefers-reduced-motion.39- **Design every state.** Empty, loading, error, and success are part of the UI, not afterthoughts.40- **Responsive by construction, accessible by default.** Contrast, focus-visible, and keyboard paths are not optional; the a11y rules themselves stay in `angular-conventions` / `angular-styling`.4142## Notes43- Angular is the house web framework. This router is for navigation, not enforcement - the path-scoped convention rule (Availability above) is the soft enforcement layer.44- Not every route target is a skill: context7 is an MCP server and the Design quality section is in-skill; the rest of the column are skills.45- No separate a11y row: `angular-conventions` owns the a11y rules (including the runner-matched axe checks in specs), `angular-styling` the styling-side a11y. Cross-framework state management is intentionally unrouted - no house skill owns it.46- `frontend` and `mobile` stay split on purpose: an Ionic/Capacitor app pulls a distinct native layer (Capacitor lifecycle, plugins, permissions) that plain web work never touches.
envoydev