What problem does it solve?
This Skill solves the common pain points of inconsistent frontend architecture choices that lead to poor performance, high technical debt, and unmaintainable codebases in web applications, especially as teams and feature sets scale.
Core Features & Use Cases
- Rendering strategy selection: Decision trees and comparisons for choosing between CSR, SSR, SSG, ISR, and streaming SSR based on content type, SEO needs, and personalization requirements.
- Application structure guidance: Feature-based folder layout recommendations to reduce cross-feature coupling and simplify feature maintenance and deletion.
- State architecture patterns: Clear categorization of server, UI, and URL state with recommended tooling (TanStack Query, Zustand, nuqs) and colocation principles.
- Typed API layer implementation: Patterns for abstracting API calls, using OpenAPI code generation, and tRPC for end-to-end type safety.
- Build and testing strategy: Configuration examples for Vite, TypeScript strict mode, and a testing pyramid using Vitest, MSW, and Playwright.
- Use Case: For a growing e-commerce platform, use this Skill to select ISR for product pages, structure code by feature (orders, products, auth), set up a typed API client, and implement a scalable testing workflow to reduce bugs and speed up feature releases.
Quick Start
Use the frontend-architecture skill to design the complete architecture setup for your new customer-facing SaaS dashboard, including rendering strategy, folder structure, state management, and testing configuration.
