mylesmcook/frontend-react

Build, review, or debug React components using Base UI and StyleX with live official documentation lookup and source citations. Lead Base UI + StyleX component selection, anatomy, state styling, render composition, forms, and themed overlays, including in mixed shadcn projects. General StyleX compiler or authoring work belongs to stylex; plain React performance and existing shadcn edits do not trigger this workflow. Preserve existing stacks unless migration is requested.

Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.

Audit and fix HTML metadata including page titles, meta descriptions, canonical URLs, Open Graph tags, Twitter cards, favicons, JSON-LD structured data, and robots directives. Use when adding SEO metadata, fixing social share previews, reviewing Open Graph tags, setting up canonical URLs, or shipping new pages that need correct meta tags.

Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or explicit shadcn requests. A components.json file alone does not select this skill for unrelated components; Base UI + StyleX components use base-ui-stylex. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".

Set up, author, migrate, review, or debug StyleX styling in React and TypeScript applications. Use for @stylexjs/stylex compiler integration, stylex.create and stylex.props, tokens, themes, responsive styles, typed component style APIs, or Tailwind-to-StyleX migration; do not use for ordinary CSS or shadcn-only work unless StyleX is actually in scope. For Base UI + StyleX component behavior and composition, base-ui-stylex leads; this skill supports the general styling work.

Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Use when implementing complex type logic, creating reusable type utilities, or ensuring compile-time type safety in TypeScript projects.

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

Verify local web applications with Playwright CLI for live browser work and the repository's existing test runner for durable regressions. Use for UI flows, screenshots, console errors, accessibility checks, and browser debugging.