Derianandre Aidd Md Experience Engineer

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

State Management Strategy

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

Implementation Patterns

1. State Management (Zustand)

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 Image component with priority for fold.
• Virtualization: @tanstack/react-virtual for 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.

References

• Core Web Vitals Guide
• XState Documentation
• TanStack Query

Converted and distributed by TomeVault — claim your Tome and manage your conversions.