React Starter Skill

Scaffold modern React projects with a production-ready tech stack.

Tech Stack: React, Vite, Tailwind CSS v4, TanStack Query, Zustand, React Router, Lingui, shadcn/ui, lucide-react

Quick Start

1. Detect Package Manager

Check which package manager is installed on the user's system. Use the first available in this priority order:

1. pnpm (preferred)
2. yarn
3. npm

2. Create Project

mkdir <project-name> && cd <project-name>
<pkg> create vite . --template react-ts

Replace <pkg> with the detected package manager (pnpm, yarn, or npm).

3. Remove ESLint (use Biome instead)

The Vite template includes ESLint by default. Remove it since we use Biome:

# Remove ESLint config file
rm -f eslint.config.js .eslintrc* .eslintignore

# Remove ESLint dependencies from package.json
<pkg> remove eslint eslint-plugin-react-hooks eslint-plugin-react-refresh @eslint/js globals typescript-eslint 2>/dev/null || true

4. Install Dependencies

See dependencies.md

5. Create Directory Structure

See project-structure.md

6. Add Configuration Files

See config-files.md

7. Add Code Patterns

See code-patterns.md

8. Initialize i18n (Extract, Translate, Compile)

CRITICAL: This step is REQUIRED before the project can run. The I18nProvider imports compiled message files that don't exist until you complete all three sub-steps below.

7.1 Extract messages

<pkg> run i18n:extract

This generates PO files in src/locales/{locale}/messages.po.

7.2 Translate PO files

You MUST translate each locale's PO file now. Do the following:

1. Read each PO file: src/locales/{locale}/messages.po
2. For every entry where msgstr "" is empty, translate the msgid to the target language
3. Update the file with translations using the Edit tool

Locale to language mapping (matches constants/languages.ts):

• en → English
• es → Spanish (Español)
• ja → Japanese (日本語)
• ko → Korean (한국어)
• vi → Vietnamese (Tiếng Việt)
• tw → Traditional Chinese (繁體中文)
• fr → French (Français)
• pt → Portuguese (Português)

Example transformation:

# Before
msgid "Hello"
msgstr ""

# After (for ja)
msgid "Hello"
msgstr "こんにちは"

7.3 Compile messages

After translating all PO files:

<pkg> run i18n:compile

This generates src/locales/{locale}/messages.ts files required by I18nProvider.

9. Verify Project

<pkg> run dev

The project should now start without errors.

References

File	Description
dependencies.md	All npm packages
project-structure.md	Full directory structure
config-files.md	Vite, Tailwind, Lingui, TypeScript configs
code-patterns.md	Axios, Zustand, Provider, Router patterns