react-ts-setuplisted

Scaffold a new React + TypeScript frontend repo the right way with Vite — asks the key decisions up front (package manager, Node manager + version, UI framework + theme colours, CI provider, dev Docker), then wires Vite + React Compiler, ESLint (flat) + Prettier, Vitest + Testing Library, husky + lint-staged + pre-commit hooks, .vscode settings, env templates, a dev Dockerfile, CI pipelines, and a README — keeping the Node version in lockstep across every file and leaving lint/typecheck/test/build green. Use this whenever starting a new frontend, React, or TypeScript web project, scaffolding a single-page app, or asked to "set up", "bootstrap", or "initialize" a React/Vite repo. For refactoring existing frontend code, use senior-frontend-refactor instead.
bcmyguest/personal-skills · ★ 0 · Code & Development · score 58

Install: claude install-skill bcmyguest/personal-skills

# Setting up a React + TypeScript project Scaffold every new React SPA with **Vite** (it owns dev server, build, and pairs natively with Vitest). Work top to bottom; confirm the decisions in step 0 before scaffolding, because they change dependencies, config, and which later steps apply. The whole point of this skill is a repo where **one `git clone` + install gets a contributor to green** — lint, typecheck, test, and build all pass, the editor formats on save, and commits are guarded. The recurring failure mode is a Node version that drifts between `.nvmrc`, CI, and Docker; the steps below keep it in **one** place on purpose. > Versions move fast in this ecosystem. Don't hard-code dependency versions in > `package.json` by hand and don't copy version numbers from this skill — let > `create-vite` and `pnpm add` install the newest releases, and trust the lockfile. **Steps:** (0) ask the decisions → (1) scaffold with Vite → (2) pin Node everywhere → (3) ESLint + Prettier → (4) React Compiler + strict TS → (5) Vitest + Testing Library → (6) UI framework + theme → (7) husky + lint-staged + pre-commit hooks → (8) `.vscode` settings → (9) env files → (10) `.gitignore` check → (11) dev Docker (if chosen) → (12) CI (if chosen) → (13) README → (14) verify lint/typecheck/test/build all green. Steps 6, 11, and 12 depend on the step-0 answers. ## 0. Ask the decisions up front Don't assume — ask, then use the answers to decide which steps apply: | Decision | Options