🌐 Modern Web Architect (Master Skill)

📑 Internal Menu

1. Architecture & Feasibility (FFCI)
2. React 19 & Next.js 15 Patterns
3. State Management & Data Fetching
4. High-Craft UI Design (DFII)
5. Performance & Optimization

1. Architecture & Feasibility (FFCI)

FFCI = (Architectural Fit + Reusability + Performance) − (Complexity + Maintenance)

• 10-15: Excellent - Proceed.
• 6-9: Acceptable - Proceed with care.
• < 6: Redesign or simplify.

2. React 19 & Next.js 15 Patterns

• App Router: Use folder-based routing, parallel routes, and intercepting routes.
• Server Components (RSC): Default to Server Components for data fetching. Use

  'use client'

  only for interactivity.
• Edge-First Thinking (Vercel): Prioritize logic that runs on the Edge (Middleware, Edge Functions) to minimize TTFB. Use Edge Runtime for high-performance dynamic routing.
• Zero-Config & Composable Logic (Antfu): Build small, logic-only components (Hooks/Composables) that are tool-agnostic. Prefer

  Vite

  for development and

  Vitest

  for lightening-fast testing.
• New Hooks: Leverage

  useActionState

  ,

  useOptimistic

  , and the

  use

  API.
• Suspense-First: Always wrap heavy components and data-fetching in

  <Suspense>

  . No manual

  isLoading

  flags.

3. State Management & Data Fetching

• Server State: Use TanStack Query (React Query) for caching and synchronization.
• Local/Global:

  • useState

    for component-level.

  • Zustand

    for complex global state.

  • Context

    for subtree configuration.
• Doctrine: "Props down, Actions up."
• Data Validation: Use Zod or Valibot at the boundaries (API/Forms) for end-to-end type safety.

4. High-Craft UI Design (DFII)

DFII = (Impact + Context Fit + Feasibility + Performance) − Consistency Risk

• Mandate:
  • ❌ No generic "AI UI" or default Tailwind/ShadCN layouts.
  • ✅ Custom typography, purposeful motion (Framer Motion), and textured depth.
  • ✅ One "Memorable Anchor" per page (Magic UI component e.g., Bento Grid).

5. Performance & Optimization

• Vercel Performance: Implement ISR (Incremental Static Regeneration) and PPR (Partial Prerendering) where possible.
• Turborepo Master: Use intelligent caching to speed up builds and tests in monorepos.
• Code Splitting: Dynamic imports (

  React.lazy

  ) for heavy modules.
• Rendering: Optimize for Core Web Vitals (LCP < 2.5s, CLS < 0.1).
• Images: Use Next.js

  <Image>

  for automatic optimization.
• Bundle: Audit dependencies using

  npm list

  or bundle analyzers to avoid bloat. Prefer lightweight libraries (e.g.,

  lucide-react

  over

  font-awesome

  ).

🛠️ Execution Protocol

1. Phase 1: Design Thinking: Define Tone and Aesthetic Direction.
2. Phase 2: Data Architecture: Map Server vs. Client components.
3. Phase 3: FFCI/DFII Check: Ensure the project is viable and high-impact.
4. Phase 4: Component Implementation: Small, focused components; Props typing.
5. Phase 5: Validation: Performance audit and Accessibility check.