component-architecture
Load PROACTIVELY when task involves designing or building UI components. Use when user says \"build a component\", \"create a form\", \"add a modal\", \"design the layout\", or \"refactor this page\". Covers component composition and hierarchy, prop design and typing, render optimization (memo, useMemo, useCallback), compound component patterns, controlled vs uncontrolled forms, file organization, and accessibility for React, Vue, and Svelte.
performance-audit
Load PROACTIVELY when task involves optimizing speed, reducing bundle size, or improving responsiveness. Use when user says \"make it faster\", \"reduce bundle size\", \"fix slow queries\", \"optimize rendering\", or \"check Core Web Vitals\". Covers bundle analysis and tree-shaking, database query optimization (N+1, indexing), React rendering performance (re-renders, memoization), network waterfall optimization, memory leak detection, server-side performance, and Core Web Vitals (LCP, FID, CLS) improvement.