Use When
- Delivering Vue or Nuxt UI with SSR, SSG, or hybrid rendering
- Component architecture, accessibility, or performance needs review
Workflow
- Define rendering strategy per route (SSR, SSG, or client).
- Use composables for reusable logic.
- Keep components focused and testable.
- Implement accessibility and interaction states.
- Verify performance and hydration behavior.
Required Checks
- Stable component props and emitted events
- Predictable data fetching boundaries
- Route-level error and loading states
- Tests for critical user flows
Decision Framework
- Prefer the simplest architecture that preserves maintainability under team growth.
- Make rendering, state, and API boundary decisions explicit before implementation.
- If a feature affects critical user journeys, require performance and accessibility checks.
- If introducing dependencies, justify bundle and long-term maintenance cost.
Common Rationalizations And Rebuttals
- "We can optimize later." -> Performance debt compounds quickly; set budgets now.
- "Accessibility is polish." -> Accessibility is core behavior and should ship with the feature.
- "One global state store is easiest." -> Over-centralization increases coupling and slows iteration.
Evidence Pack
- UX state coverage (loading, empty, error, success) for changed flows
- Accessibility checks for keyboard, focus, and semantics
- Performance snapshot for key routes or interactions
- Test evidence for critical user paths
Exit Criteria
- Workflow decisions are documented and implementation-ready
- Validation evidence exists for quality, reliability, and compatibility
- Operational readiness and rollback expectations are explicit