ReddRadar
Agent skill
tooling-setup
Use when setting up new projects or updating tool configurations. Configures Vite, TypeScript, Biome, and Vitest for React 19 projects. Covers build configuration, strict TypeScript setup, linting/formatting, and testing infrastructure.
Install this agent skill to your Project
npx add-skill https://github.com/MadAppGang/claude-code/tree/main/plugins/frontend/skills/tooling-setup
SKILL.md
Tooling Setup for React 19 Projects
Production-ready configuration for modern frontend tooling with Vite, TypeScript, Biome, and Vitest.
1. Vite + React 19 + React Compiler
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [
react({
babel: {
// React Compiler must run first:
plugins: ['babel-plugin-react-compiler'],
},
}),
],
})
Verify: Check DevTools for "Memo ✨" badge on optimized components.
2. TypeScript (strict + bundler mode)
// tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"moduleResolution": "bundler",
"jsx": "react-jsx",
"verbatimModuleSyntax": true,
"isolatedModules": true,
"strict": true,
"noUncheckedIndexedAccess": true,
"exactOptionalPropertyTypes": true,
"noFallthroughCasesInSwitch": true,
"types": ["vite/client", "vitest"]
},
"include": ["src", "vitest-setup.ts"]
}
Key Settings:
moduleResolution: "bundler"- Optimized for Vitestrict: true- Enable all strict type checksnoUncheckedIndexedAccess: true- Safer array/object accessverbatimModuleSyntax: true- Explicit import/export
3. Biome (formatter + linter)
npx @biomejs/biome init
npx @biomejs/biome check --write .
// biome.json
{
"formatter": { "enabled": true, "lineWidth": 100 },
"linter": {
"enabled": true,
"rules": {
"style": { "noUnusedVariables": "error" }
}
}
}
Usage:
npx biome check .- Check for issuesnpx biome check --write .- Auto-fix issues- Replaces ESLint + Prettier with one fast tool
4. Environment Variables
- Read via
import.meta.env - Prefix all app-exposed vars with
VITE_ - Never place secrets in the client bundle
// Access environment variables
const apiUrl = import.meta.env.VITE_API_URL
const isDev = import.meta.env.DEV
const isProd = import.meta.env.PROD
// .env.local (not committed)
VITE_API_URL=https://api.example.com
VITE_ANALYTICS_ID=UA-12345-1
5. Testing Setup (Vitest)
// vitest-setup.ts
import '@testing-library/jest-dom/vitest'
// vitest.config.ts
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
test: {
environment: 'jsdom',
setupFiles: ['./vitest-setup.ts'],
coverage: { reporter: ['text', 'html'] }
}
})
Setup Notes:
- Use React Testing Library for DOM assertions
- Use MSW for API mocks (see tanstack-query skill for MSW patterns)
- Add
types: ["vitest", "vitest/jsdom"]for jsdom globals in tsconfig.json
Run Tests:
npx vitest # Run in watch mode
npx vitest run # Run once
npx vitest --coverage # Generate coverage report
Package Installation
# Core
pnpm add react@rc react-dom@rc
pnpm add -D vite @vitejs/plugin-react typescript
# Biome (replaces ESLint + Prettier)
pnpm add -D @biomejs/biome
# React Compiler
pnpm add -D babel-plugin-react-compiler
# Testing
pnpm add -D vitest @testing-library/react @testing-library/jest-dom
pnpm add -D @testing-library/user-event jsdom
pnpm add -D msw
# TanStack
pnpm add @tanstack/react-query @tanstack/react-router
pnpm add -D @tanstack/router-plugin @tanstack/react-query-devtools
# Utilities
pnpm add axios zod
Project Scripts
{
"scripts": {
"dev": "vite",
"build": "tsc --noEmit && vite build",
"preview": "vite preview",
"test": "vitest",
"test:run": "vitest run",
"test:coverage": "vitest --coverage",
"lint": "biome check .",
"lint:fix": "biome check --write .",
"format": "biome format --write ."
}
}
IDE Setup
VSCode Extensions:
- Biome (biomejs.biome)
- TypeScript (built-in)
- Vite (antfu.vite)
VSCode Settings:
{
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
"[typescript]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[typescriptreact]": {
"editor.defaultFormatter": "biomejs.biome"
}
}
Related Skills
- core-principles - Project structure and best practices
- react-patterns - React 19 specific features
- testing-strategy - Advanced testing patterns with MSW
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
MadAppGang/claude-code
test-skill
A test skill for validation testing. Use when testing skill parsing and validation logic.
MadAppGang/claude-code
bad-skill
MadAppGang/claude-code
claudish-usage
CRITICAL - Guide for using Claudish CLI ONLY through sub-agents to run Claude Code with OpenRouter models (Grok, GPT-5, Gemini, MiniMax). NEVER run Claudish directly in main context unless user explicitly requests it. Use when user mentions external AI models, Claudish, OpenRouter, or alternative models. Includes mandatory sub-agent delegation patterns, agent selection guide, file-based instructions, and strict rules to prevent context window pollution.
MadAppGang/claude-code
release
Plugin release process for MAG Claude Plugins marketplace. Covers version bumping, marketplace.json updates, git tagging, and common mistakes. Use when releasing new plugin versions or troubleshooting update issues.
MadAppGang/claude-code
claudish-integration
MadAppGang/claude-code
openrouter-trending-models
Fetch trending programming models from OpenRouter rankings. Use when selecting models for multi-model review, updating model recommendations, or researching current AI coding trends. Provides model IDs, context windows, pricing, and usage statistics from the most recent week.
Didn't find tool you were looking for?