From buyoung-skills
Guides React 19 + Vite SPA development with composition patterns (compound components, state lifting), performance optimizations (React.lazy, Suspense, code splitting, useMemo), and UI best practices (accessibility, ARIA, forms). Proactively activates on React hooks, Vite config, performance issues.
npx claudepluginhub buyoung/skills --plugin backend-skillsThis skill uses the workspace's default tool permissions.
Comprehensive guidelines for building React 19 SPA applications with Vite. Combines composition patterns, performance optimization, and web interface best practices into a single reference optimized for AI agent workflows.
Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
Comprehensive guidelines for building React 19 SPA applications with Vite. Combines composition patterns, performance optimization, and web interface best practices into a single reference optimized for AI agent workflows.
use(), ref as prop, React Compiler supportReact.lazy() + dynamic import(), env variables, HMRComponent architecture and state management patterns for scalable React apps.
| Priority | Category | Impact |
|---|---|---|
| 1 | Component Architecture | HIGH |
| 2 | State Management | MEDIUM |
| 3 | Implementation Patterns | MEDIUM |
| 4 | React 19 APIs | MEDIUM |
Key topics:
use() replaces useContext(), ref as regular propPerformance optimization patterns adapted for Vite + React 19 SPA. Next.js-specific patterns removed; Vite equivalents provided.
| Priority | Category | Impact |
|---|---|---|
| 1 | Async Optimization | CRITICAL |
| 2 | Bundle Size | CRITICAL |
| 3 | Client-Side Data Fetching | MEDIUM-HIGH |
| 4 | Re-render Optimization | MEDIUM |
| 5 | Rendering Performance | MEDIUM |
| 6 | JavaScript Performance | LOW-MEDIUM |
| 7 | Advanced Patterns | LOW |
Key topics:
Promise.all() and dependency-based parallelizationReact.lazy() + Suspense for code splitting (Vite)setState, lazy state initializationuseTransition for non-urgent updatescontent-visibility: auto for long listsuseRef for transient valuesUI/UX patterns for accessibility, forms, animation, performance, and content quality.
| Category | Focus |
|---|---|
| Accessibility | ARIA, semantic HTML, keyboard handlers |
| Focus States | focus-visible, no bare outline-none |
| Forms | autocomplete, correct type, paste allowed |
| Animation | prefers-reduced-motion, compositor-only props |
| Typography | Ellipsis, curly quotes, tabular-nums |
| Content Handling | Truncation, empty states, long content |
| Images | Explicit dimensions, lazy loading |
| Performance | Virtualization, no layout reads in render |
| Navigation & State | URL reflects state, deep-linkable UI |
| Touch & Interaction | touch-action, overscroll-behavior |
| Dark Mode | color-scheme, theme-color meta |
| Locale & i18n | Intl.DateTimeFormat, Intl.NumberFormat |
Vite-specific configuration, conventions, and optimization patterns.
Key topics:
import.meta.env)manualChunks, rollupOptions)