What problem does it solve? Building the user-facing layer of web applications requires consistent decisions across components, state, data fetching, layout, performance, and testing. This Skill provides a framework-agnostic frontend engineering methodology with concrete patterns and decision matrices so implementation choices are deliberate rather than ad hoc. ## Core Features & Use Cases - Component Architecture: Composition patterns (atomic design, compound components, render props), props/state interface design, and accessibility fundamentals for every component. - State & API Integration: State classification (local, shared, server, URL, form), data fetching patterns, caching strategy, auth token flows, and real-time updates via WebSocket or SSE. - Responsive Layout & Testing: Grid vs Flexbox vs Container Queries decision matrix, content-driven breakpoints, cross-device testing with Playwright emulation, component testing with Vitest and Testing Library, visual regression, and axe-core accessibility testing. - Use Case: When building a dashboard page, use this Skill to design the component tree, choose React Query for server state, implement a responsive card grid with container queries, and add Playwright integration tests with axe-core accessibility checks. ## Quick Start Use the frontend-engineering skill to design the component architecture and state management approach for a responsive product listing page with integration tests.
