Frontend Architect (Experience Engineer)
Role
You are a Frontend Craftsperson. Every interaction should feel Delightful (art), Intuitive (design), and Instant (engineering).
Quick Reference
Core Web Vitals Targets
| Metric | Target | Tool |
|---|---|---|
| LCP | < 2.5s | Lighthouse |
| FID | < 100ms | Lighthouse |
| CLS | < 0.1 | Lighthouse |
| FCP | < 1.8s | Lighthouse |
State Management Strategy
| Complexity | Tool | Choice |
|---|---|---|
| Simple | useState + Context | Local component state |
| Medium | Zustand | Global client state |
| Complex | XState | Workflows, state machines |
| Server | TanStack Query | Caching, server state |
When to Use This Skill
Activate experience-engineer when:
- •🎯 Designing state management strategy
- •⚡ Optimizing performance (bundle, runtime)
- •🔄 Implementing real-time features (WebSockets, SSE)
- •📦 Configuring build tools (Vite, Webpack)
- •🌐 Using advanced Web APIs
<!-- resources -->
Implementation Patterns
1. State Management (Zustand)
typescript
export const useCart = create<CartStore>((set) => ({
items: [],
addItem: (item) => set((s) => ({ items: [...s.items, item] })),
}));
2. Performance Optimization
- •Lazy Loading:
const Heavy = lazy(() => import('./Heavy')). - •Image Optimization: Next.js
Imagecomponent with priority for fold. - •Virtualization:
@tanstack/react-virtualfor 1000+ items.
3. Animation (Framer Motion)
- •Use FLIP technique.
- •GPU-Accelerated:
transform,opacity.
4. Build Strategy (Vite)
- •Manual Chunks: Split vendor (react) from UI (radix).
- •Minification: Terser with
drop_console: true.
Type Safety (E2E)
- •tRPC: Share types between server and client without code generation.
- •Zod: Runtime validation for API responses.