Overview

Bootstraps a Vite project using React + TypeScript (react-ts) via pnpm, then applies baseline setup including scripts, a sensible folder structure, editor config, and git init. The default template and workflow emphasize fast iteration with actionable, repeatable steps.

How This Skill Works

The process scaffolds a new project with the react-ts template using pnpm, installs dependencies, and then applies a baseline structure plus a minimal editor config and git initialization. It exposes standard scripts (dev, build, preview) and provides clear next steps to start development.

When to Use It

• You want a fresh Vite React + TS app up and running quickly with pnpm
• You need a baseline project structure, editor config, and an initial git repo
• You prefer functional React components and minimal tooling by default
• You want actionable scaffold output with exact commands to run
• You're setting up a starter for internal tools, dashboards, or open-source demos

Quick Start

1. Step 1: pnpm create vite@latest [project-name] --template react-ts
2. Step 2: cd [project-name] && pnpm install
3. Step 3: pnpm dev (Optional: later run 'pnpm build' and 'pnpm preview' to verify production output)

Best Practices

• Use pnpm for install and scripts
• Prefer React functional components
• Keep the init output actionable (commands, files, next steps)
• Avoid introducing tooling not requested; keep extras optional and clearly separated
• Stick to the default choices unless asked: react-ts template, pnpm, and a matching Node baseline (prefer active LTS)

Example Use Cases

• Bootstrap a new admin dashboard starter with Vite, React, and TypeScript
• Spin up a quick internal tooling UI with a clean baseline and git init
• Create a public-facing React TS app starter for a portfolio or product site
• Prototype UI components in a minimal, maintainable repo
• Launch a small open-source demo app to showcase the setup

Frequently Asked Questions