Building React App From Scratch

The Death of the Boilerplate and the Config Trap

We built this so you don't have to. You know the drill. You spin up a new React project, and instead of shipping features, you spend three days fighting your build tool. The days of create-react-app are gone, and the gap left behind is filled with configuration hell. You're staring at a terminal full of red text because your TypeScript path aliases don't resolve, or your CSS modules are breaking in production, or your ESLint flat config is throwing warnings that look like errors.

The ecosystem has fragmented. You have to choose between Vite, Webpack, or something else, and then you have to configure it yourself. You need to set up TypeScript with the right jsx mode, configure Babel for React refresh, wire up path resolution, and ensure your linter catches actual issues without drowning you in noise. It's not just about picking a tool; it's about making sure every piece of the puzzle talks to every other piece without leaking memory or crashing the dev server. We've seen too many engineers waste weeks on setup that should take minutes. This skill exists to eliminate that setup tax.

What Bad Setup Costs You (Beyond the Hours)

When you ignore proper scaffolding, the cost isn't just time; it's technical debt that compounds. Every hour you spend debugging a vite.config.ts alias is an hour you're not shipping. But the real damage is downstream. A misconfigured build tool can lead to bloated bundles that kill your Core Web Vitals. A broken TypeScript setup can let type errors slip into production, causing runtime crashes that your users see but your CI misses.

Consider the hidden costs: security vulnerabilities in outdated dependencies because you're manually managing a package.json instead of using a curated manifest. The risk of shipping a dev server that doesn't support hot module replacement, slowing down your team's feedback loop. The frustration of onboarding a new developer who has to figure out why the linter is silent on unused imports. These aren't abstract problems. They're daily friction points that drain velocity. When your foundation is shaky, every feature build feels like a gamble. You need a setup that works out of the box, so you can focus on code, not configuration.

A Team's Migration from the Old Ways

Imagine a team that inherited a legacy React app built with an outdated boilerplate. The framework was sunset, and they needed to migrate to a modern stack without rewriting the entire codebase. The react.dev blog explicitly warned about this transition, noting that custom setups with tools like Vite or Webpack are the recommended path forward ^[1]. The team decided to roll their own configuration, thinking it would be straightforward.

They started with Vite, but hit a wall immediately. Their path aliases weren't resolving in the TypeScript compiler, even though Vite was happy. They spent two days tweaking tsconfig.json and vite.config.ts, only to realize the issue was a mismatch between the module resolution strategy and the JSX transform. They tried to add CSS modules, but the hot reload was broken, causing the dev server to crash every time they saved a style file. They needed React refresh, but their Babel config was outdated, and the new React 19 JSX transform was conflicting with the old setup.

This scenario is common. The react.dev documentation advises that if your app has unusual constraints or you prefer to solve these problems yourself, you can roll your own custom setup ^[2]. But "solving it yourself" shouldn't mean reinventing the wheel. The team eventually found that a structured approach to configuration was the only way to stabilize their build. They needed a validated setup that handled the edge cases: TypeScript strict mode, ESLint flat config, and optimized production builds. This is exactly what we've packaged into this skill.

What Changes Once the Skill Is Installed

When you install this skill, you're not just getting a template; you're getting a validated, production-grade foundation. The scaffolding script bootstraps your project with a directory structure that's ready for development. You get a vite.config.ts that handles path aliases, CSS modules, and optimized build settings out of the box. If you prefer Webpack, you get a webpack.config.js with Babel loader, React refresh, and code splitting configured correctly.

The TypeScript configuration is tuned for modern React, using jsx: preserve mode for maximum compatibility with build tools and strict type checking to catch errors early. The ESLint flat config is set up to lint your React and TypeScript code without false positives, and the Babel config ensures your JSX is transformed correctly. The validator script checks your dependencies and config files, exiting with an error if anything is wrong, so you catch issues before they become problems.

You also get embedded references that cover React core patterns and build tool specifics. You'll find guidance on using Fragment, Suspense, and useDeferredValue for stale UI patterns, as well as modern hooks patterns. The build tool comparison helps you decide between Vite and Webpack based on your project's needs. This setup lets you focus on building components, not debugging configs. It's the kind of foundation that lets you scale your app without worrying about the underlying tooling.

What's in the Pack

• skill.md — Orchestrator skill file that defines the workflow, references all templates, scripts, validators, references, and examples. Guides the AI agent through scaffold → configure → validate → build pipeline.
• templates/vite.config.ts — Production-grade Vite configuration with React plugin, TypeScript support, CSS modules, path aliases, and optimized build settings.
• templates/webpack.config.js — Production-grade Webpack 5 configuration with Babel loader, React refresh, TypeScript support, CSS handling, and code splitting.
• templates/package.json — Real dependency manifest with React, Vite/Webpack, TypeScript, Babel, ESLint, and all required dev dependencies for a from-scratch setup.
• templates/tsconfig.json — TypeScript configuration optimized for React + Vite with JSX preserve mode, path aliases, and strict type checking.
• templates/babel.config.js — Babel 7 configuration with presets for React JSX, TypeScript, and modern JavaScript, plus React refresh plugin.
• templates/eslint.config.js — Modern ESLint flat config with React, TypeScript, and Vite plugin rules for production-grade linting.
• scripts/scaffold.sh — Executable shell script that bootstraps the project: creates directory structure, copies templates, runs npm install, and validates the setup.
• validators/config-validator.sh — Validator script that checks package.json dependencies, config file syntax, and project structure. Exits non-zero on any failure.
• references/react-core.md — Embedded canonical React knowledge: Fragment component API, Suspense + useDeferredValue stale UI pattern, Activity component, state management patterns, and CSS layout patterns from react.dev.
• references/vite-guide.md — Embedded canonical Vite knowledge: CLI commands, programmatic API (createServer, preview), SSR build scripts, and production preview patterns from vitejs/vite docs.
• examples/worked-example.tsx — Production-grade React component demonstrating Fragment, Suspense, useDeferredValue, Activity, and modern hooks patterns.
• references/build-tools-comparison.md — Webpack vs Vite comparison with real config excerpts, migration patterns, and decision matrix for choosing tooling.

Install and Ship

Stop wasting time on configuration. Upgrade to Pro to install this skill and get a validated, production-ready React setup. Whether you're starting a new app or migrating from an old boilerplate, this skill gives you the foundation you need to ship faster. If you also need to build a component library later, this setup integrates seamlessly. For teams looking for a React app starter pack, this skill provides the deep configuration control that starter packs often lack. Install it, run the scaffold script, and start coding.