Angular Frontend Design Skill

Purpose

Enable Copilot to design, architect, and implement high-quality Angular frontends in this skill pack, with a strong focus on standalone components, routing, design-system alignment, accessibility, and performance.

Capabilities

• •Propose component architectures using Angular standalone components and feature-oriented structure.
• •Recommend clean separation between smart (container) components and presentational components where useful.
• •Design templates (*.component.html) that use semantic HTML, minimal structural complexity, and clear layout.
• •Generate UI aligned with the design tokens (colors, spacing, typography, radii) from design-system/tokens.
• •Ensure accessibility and responsive behavior are considered from the start (landmarks, headings, ARIA, keyboard paths).
• •Improve component API ergonomics (inputs/outputs, event naming, content projection via ng-content).
• •Suggest patterns for reusable UI primitives (buttons, modals, form controls) that stay easy to compose.
• •Interactively exercise and validate Angular UI flows in a running browser using MCP Playwright tools (e.g. mcp_microsoft_pla_browser_click, mcp_microsoft_pla_browser_type, mcp_microsoft_pla_browser_hover, mcp_microsoft_pla_browser_wait_for).
• •Fetch up-to-date Angular and tooling documentation via Context7 tools (mcp_context7_resolve-library-id, mcp_context7_get-library-docs from the io.github.upstash/context7 server) before recommending patterns that rely on external APIs.

Constraints

• •Prefer modern Angular patterns: standalone components, typed forms, strong typing, and Angular CLI conventions.
• •Avoid legacy approaches such as overly complex module hierarchies or unnecessary shared modules.
• •Keep templates readable and avoid deeply nested structural directives when a simpler layout is possible.
• •Maintain consistency with the Angular skill pack’s existing file and folder structure.

Design Principles

• •Clarity: Components and templates should be easy to read and reason about.
• •Reusability: Favor composable building blocks over one-off, tightly-coupled components.
• •Design-System First: Visual decisions should use tokens and shared patterns, not ad-hoc values.
• •Accessibility & Performance: Design choices should support a11y and efficient rendering from the outset.

Example Focus Areas in This Repo

• •Application structure and root layout in src/app/app.component.ts and src/app/app.routes.ts.
• •Reusable UI primitives in src/app/components/button and src/app/components/modal.
• •Future feature components that build on top of the existing design system.