tenequm/claude-plugins
Overview
This skill configures and optimizes Vite 7 for React projects, covering dev server, build tooling, plugins, HMR, chunk splitting, the Environment API, and rolldown integration. It distills rules, example configs, and practical fixes to get a fast, reliable dev experience and production builds ready for Cloudflare Workers or static hosts. Use it to set up Vite, tune builds, manage plugins, or troubleshoot HMR and proxy issues.
How this skill works
The skill inspects Vite configuration patterns and plugin ordering, enforces ESM-style config, and recommends Vite 7-specific defaults (browser target, env prefix). It outlines plugin behaviors (@vitejs/plugin-react, @tailwindcss/vite, TanStack plugins, @cloudflare/vite-plugin), manual chunking via Rollup options, and rolldown-vite replacement steps. It also explains the Environment API and buildApp hook for multi-target builds.
When to use it
- Starting a new React project with Vite 7 and modern build targets
- Migrating to or adopting rolldown-vite for faster builds
- Configuring HMR, proxying, or server.warmup for development
- Optimizing bundle splitting and cacheable vendor chunks
- Deploying to Cloudflare Workers or producing multi-environment builds
Best practices
- Always use ESM import/export in vite.config.ts; use import.meta.url for path aliases
- Place TanStack Start or Router plugin before @vitejs/plugin-react; react() must be last among framework plugins
- Keep client-facing vars prefixed with VITE_; put secrets on the server
- Use build.rollupOptions.output.manualChunks for chunking (splitVendorChunkPlugin removed)
- Adopt rolldown-vite as a drop-in for large projects to speed builds
- Analyze bundles regularly with rollup-plugin-visualizer and set hidden sourcemaps for production
Example use cases
- Full-stack SSR app using tanstackStart(), cloudflare(), tailwindcss(), and react() in that order
- SPA with file-based routing via tanstackRouter({ autoCodeSplitting: true }) placed before react()
- Dev server behind a reverse proxy: configure server.hmr.clientPort and protocol settings
- Manual chunking to isolate react and TanStack libraries for long-term caching
- Switching to rolldown-vite by aliasing vite in devDependencies for dramatic build improvements
FAQ
React plugin provides JSX transforms and HMR that assume preceding plugins have modified routes or framework code; placing it last prevents route generation failures and HMR breakage.
How do I expose environment variables to client code?
Only variables prefixed with VITE_ are injected into import.meta.env. Keep secrets off client prefixes and augment ImportMetaEnv types in vite-env.d.ts for type safety.
14 skills
This skill configures and optimizes Vite 7 for React projects, guiding plugin order, environment handling, and rolldown integration.
This skill lints and formats frontend code using Biome 2.4, enabling type-aware checks, import organization, and CI-ready rules.
This skill helps you implement and manage x402 payments over HTTP 402 for paid APIs, paywalls, and AI workflows across multiple networks.
This skill helps you develop and deploy serverless Cloudflare Workers across the globe, enabling fast APIs, edge logic, and real-time processing.
This skill helps you build consistent Tailwind CSS themed UIs using shadcn/ui patterns, semantic tokens, and responsive dark mode across components.
This skill helps you discover, register, and evaluate AI agents on-chain using ERC-8004, improving trust and interoperability across networks.
This skill analyzes GitHub repositories remotely, compares codebases, and discovers trending code and projects without cloning, enhancing discovery and
This skill helps you build and test Solidity contracts efficiently with Foundry, streamlining forge tests, deployments, and debugging workflows.
This skill sets up a production-ready Python project with uv, ty, ruff, pytest, and just, ensuring linting, type checking, and testing readiness.
This skill speeds Python project setup and maintenance by harnessing uv for fast package and environment management and ruff for linting and formatting.
This skill guides you through web3 GTM strategies for protocols and solo founders, optimizing growth, partnerships, and developer adoption.
This skill helps you find and evaluate Claude skills for a specific task by semantic search, best-practices assessment, and fitness scoring.
This skill enables building Solana apps with ZK compression, generating and validating compressed state via Light Protocol for scalable, rent-free tokens and
This skill guides Solana development with Anchor and native Rust, outlining setup, testing, deployment, and security best practices.
