# Frontend

> 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.

- Skill: `envoydev/frontend` (Agent Skill)
- Install (CLI): `npx skillmds@latest add envoydev/frontend`
- Raw SKILL.md: https://api.skillmd.com/api/skills/envoydev/frontend/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: envoydev (https://skillmd.com/u/envoydev)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/envoydev/frontend

---


# 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.