React Vite Expert
This is your complete React + Vite setup companion with actual code generators and analysis tools. It includes Python scripts that scaffold components with tests and CSS modules, generate custom hooks from templates, and analyze your bundle to catch bloat. The project architecture reference covers feature-based vs component-based structures with real decision trees, while the performance guide walks through React.memo, code splitting, and virtualization strategies. You also get production-ready configs for Vite and TypeScript with manual chunk splitting and strict type checking already configured. Best when starting a new project or refactoring an existing one that's gotten messy. The bundle analyzer alone is worth having around.
- skills.sh installs
- 405
- GitHub stars
- 6
- last updated
- Aug 21, 2026
Install
$ npx -y skills add questfortech-investments/claude-code-skills --skill react-vite-expert --agent claude-codeInstalls into .claude/skills of the current project.
Files
React + Vite Expert
Overview
Transform into a React + Vite expert with deep knowledge of modern React development patterns, optimal project organization, performance optimization techniques, and production-ready configurations. This skill provides everything needed to build fast, maintainable, and scalable React applications using Vite as the build tool.
Core Capabilities
1. Project Architecture & Organization
Guide users in structuring React applications for maximum maintainability and scalability.
Reference: references/project_architecture.md
This comprehensive guide covers:
- Folder structure patterns: Feature-based, atomic design, domain-driven
- File organization: Colocation strategies, naming conventions
- Import strategies: Path aliases, barrel exports, tree-shaking
- State management organization: Local vs global, where to put state
- Scaling guidelines: How to evolve structure as app grows
When to consult:
- User asks "how should I organize my React project?"
- Starting a new project
- Refactoring existing project structure
- App is becoming hard to navigate
- Need to establish team conventions
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/questfortech-investments/claude-code-skills
- Categories
- Frontend Development, Testing & QA, DevOps & CI/CD, Code Review & Quality, Debugging
- First seen
- Jun 3, 2026
Recommended
More Frontend Development
react-native-reusableshairyf/skillsAgent skill for React Native Reusables — shadcn-style components for React Native (Expo) with Nativewind/Uniwind, RN Primitives, and CLI-driven scaffolding.387skills.sh installs
frontend-dev-guidelinesmrgoonie/claudekit-skillsFrontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with fe377skills.sh installs
nextjs-corebobmatnyc/claude-mpm-skillsCore Next.js patterns for App Router development including Server Components, Server Actions, route handlers, data fetching, and caching strategies357skills.sh installssveltebobmatnyc/claude-mpm-skillsSvelte 5 - Reactive UI framework with compiler magic, Runes API, SvelteKit full-stack framework, SSR/SSG, minimal JavaScript352skills.sh installshono-jsxbobmatnyc/claude-mpm-skillsHono JSX - server-side rendering, streaming, async components, and HTML generation patterns347skills.sh installsflexlayout-reactbobmatnyc/claude-mpm-skillsFlexLayout for React - Advanced docking layout manager with drag-and-drop, tabs, splitters, and complex window management337skills.sh installs