Modern Web App Architecture (SPA/SSR/SSG/RSC)

Overview

Comprehensive guidance for designing and building modern web applications (including SPAs and hybrid rendering apps). This skill emphasizes trade-offs, explicit boundaries, and production-ready practices (performance, accessibility, security, testing, delivery).

Core principle: Everything in architecture is a trade-off. There are no "right" answers, only least-worst combinations for your specific context.

Operating Mode (How to Use This Skill)

When activated, work in this order:

1. Clarify context (5–10 questions max) → users, routes, SEO, interactivity, data, auth, team, constraints.
2. Choose a rendering strategy per route (not “one strategy for the whole app”).
3. Define boundaries → feature/domain modules, shared libraries, ownership, and stable interfaces.
4. Plan state + data → local/shared/global/server/URL state, cache strategy, invalidation, optimistic updates.
5. Plan non-functionals → performance budgets + measurement, accessibility plan, security posture, observability.
6. Produce artifacts → short recommendations with explicit trade-offs, plus concrete next steps (folder structure, ADRs, checklists).