# React New Project

> Create a new React project using Vite, TypeScript, and Feature-based architecture.

- Skill: `majiayu000/react-new-project` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/react-new-project`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/react-new-project/raw
- Safety review: pending (external: skill-scanner PASS, skillspector CAUTION)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/react-new-project

---


# React + Vite + TypeScript Project Generator

This skill guides the creation of a modern React application using Vite and organizes it into a scalable feature-based architecture.

## Prerequisite

- Node.js and npm installed

## Directory Structure (Feature-Based)

The goal is to move away from purely technical folders (`components`, `hooks`) to domain-oriented folders (`features`).

```
project-name/
├── src/
│   ├── app/                # Global app setup (providers, router, store)
│   ├── features/           # Feature-based modules
│   │   ├── auth/           # Example feature
│   │   │   ├── components/
│   │   │   ├── hooks/
│   │   │   └── types/
│   │   └── dashboard/
│   ├── shared/             # Shared utilities and UI components
│   │   ├── ui/             # Generic UI components (Buttons, Inputs)
│   │   └── utils/          # Helper functions
│   ├── App.tsx
│   └── main.tsx
└── ... config files
```

## Step-by-Step Instructions

### 1. Initialize Vite Project

```bash
# Create project using the React-TypeScript template
npm create vite@latest __PROJECT_NAME__ -- --template react-ts

cd __PROJECT_NAME__
```

### 2. Install Dependencies

```bash
npm install
```

### 3. Setup Folder Structure

Remove default boilerplate and create the architecture:

```bash
# Clean up default assets if desired (optional)
# rm src/assets/react.svg

# Create core directories
mkdir -p src/app
mkdir -p src/features
mkdir -p src/shared/ui
mkdir -p src/shared/utils
mkdir -p src/shared/hooks
```

### 4. Basic Configuration

- Ensure `vite.config.ts` is set up (defaults are usually fine).
- Recommend setting up path aliases (e.g., `@/` pointing to `src/`) in `tsconfig.json` and `vite.config.ts` if the user agrees, but start with standard relative paths for simplicity unless requested.

## Verification

Run the dev server to ensure it starts:

```bash
npm run dev
```


## Parent Hub
- [_frontend-mastery](../_frontend-mastery/SKILL.md)


## Part of Workflow
This skill is utilized in the following sequential workflows:
- [_workflow-feature-lifecycle](../_workflow-feature-lifecycle/SKILL.md)