Agent skill · software engineering · erichowens
reactive-dashboard-performance
Expert in building blazing-fast reactive dashboards with comprehensive testing. Masters React performance patterns, testing strategies for async components, and real-world patterns from Linear,
Why this skill is useful
Provides specific performance optimization patterns and testing strategies for React dashboards that the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-07-14. 180 stars on the source repository.
What this skill does
Reactive Dashboard Performance Expert in building production-grade reactive dashboards that load in <100ms and have comprehensive test coverage. Core Expertise Performance Patterns (Linear, Vercel, Notion-grade) 1. Skeleton-First Loading Render skeleton immediately (0ms perceived load) Stream in data progressively Never show spinners for <200ms loads 2. Aggressive Caching React Query with staleTime: 5min, cacheTime: 30min Optimistic updates for mutations Prefetch on hover/mount 3. Code Splitting Route-based splitting (Next.js automatic) Component-level lazy() for heavy widgets Preload critical paths 4. Memoization Strategy useMemo for expensive computations React.memo for pure components useCallback for stable references Testing Reactive Dashboards 1. Mock Strategy Mock at service boundary (React Query, analytics) Never mock UI components (test real DOM) Use MSW for API mocking when possible 2. Async Handling 3. Timeout Debugging Timeouts mean: missing mock, wrong query, or component not rendering Use screen.debug() to see actual DOM Check console for unmocked errors 4. Test Wrapper Pattern Real-World Examples Linear Dashboard: Skeleton → Stale data → Fresh data (perceived <50ms) Vercel Dashboard: Prefetch on nav hover, optimistic deploys Notion Pages: Infinite cache, local-first, sync in background Diagnostic Protocol Integration Test Timeouts 1. Check what's actually rendering 2. Find unmocked dependencies Check console for "not a function" errors Look for network requests in test output Verify all contexts are provided 3. Fix async queries Use findBy instead of getBy Increase timeout if needed: waitFor(() => {...}, { timeout: 3000 }) Mock React Query properly 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills erichowens/reactive-dashboard-performance