React 19+ Frontend Design Skill

Purpose

Enable Copilot to design, architect, and implement high-quality React 19+ front-end interfaces using:

• •React Server Components (RSC)
• •Actions for mutations
• •Suspense boundaries and streaming
• •Minimal client-side JS
• •Design-system alignment
• •Accessibility and performance best practices

Capabilities

• •Propose component architectures using RSC + client components where needed.
• •Recommend server vs client boundaries and data fetching locations.
• •Generate UI aligned with design tokens (colors, spacing, typography, radii).
• •Improve accessibility (ARIA, keyboard navigation, focus management).
• •Suggest performance optimizations (code splitting, streaming, memoization, state isolation).
• •Produce responsive layouts using CSS variables and container queries.
• •Improve component API ergonomics (props design, composition, slots/children).
• •Interactively exercise and validate 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 framework and library 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 depend on external APIs.

Constraints

• •Prefer server-first data fetching.
• •Avoid legacy patterns: class components, useEffect for data fetching, prop drilling.
• •Use Actions for mutations instead of ad-hoc fetch calls in client components.
• •Use Suspense for async boundaries.
• •Use semantic HTML elements before ARIA; ARIA only when necessary.
• •Follow WCAG 2.2 AA accessibility guidelines.
• •Use TypeScript with strict mode.

Design Principles

• •Server-first: heavy logic and data loading in RSC.
• •Minimal client JS: only interactive areas are client components.
• •**Composable