tooling-setup

This skill provides a standardized, production-ready foundation for modern React 19 applications. It is designed for software engineers and frontend teams who prioritize performance, type safety, and maintainability. By integrating an opinionated stack of industry-standard tools, it eliminates the configuration overhead typically associated with setting up new repositories or modernizing legacy ones.

The setup includes integration for Vite as the build tool, configured specifically for React 19 with the React Compiler enabled via Babel. It enforces strict TypeScript standards using bundler-mode resolution to ensure high-quality, bug-resistant code. Biome is utilized as the all-in-one high-performance linter and formatter, replacing slower tools like ESLint and Prettier to improve developer velocity. Testing is handled by Vitest, supported by React Testing Library and MSW for robust DOM and API testing.

• React 19 project scaffolding with React Compiler optimized build pipelines

• Strict TypeScript configuration including noUncheckedIndexedAccess, verbatimModuleSyntax, and bundler-resolution

• Zero-config integrated Biome setup for linting, code style enforcement, and auto-formatting

• Professional testing infrastructure with Vitest, jsdom, and coverage reporting capabilities

• Environment variable management patterns for secure client-side configuration

• Standardized IDE integration with recommended VSCode settings for Biome and TypeScript

• Use this skill during the initial repository setup phase or when refactoring build pipelines to meet production standards.

• Expected inputs include a blank project directory or an existing codebase requiring dependency updates and configuration normalization.

• The output is a fully configured project environment, including package.json scripts, tsconfig.json, vite.config.ts, and biome.json configuration files.

• Ensure you have pnpm installed, as the dependency installation scripts are optimized for the pnpm package manager.

• The React Compiler verification can be monitored via the React DevTools browser extension by looking for the Memo badge on components.

• Always keep sensitive keys out of the bundle; use the VITE_ prefix for environment variables as demonstrated in the setup documentation.