# React CLI

> Use the xlab-web template of xlab-web-cli to create React + TypeScript + Vite frontend projects. Use when the user asks to scaffold a React frontend application or a web project requiring routing, internationalization, SSO, Sensors Data analytics, Argus session replay, or CI/CD deployment.

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

---


# react-cli frontend scaffold

Use the `xlab-web` template of `xlab-web-cli` to scaffold React + TypeScript + Vite frontend projects. Keep this skill scoped to `-t xlab-web`; do not use it for other CLI templates.

## xlab-web feature modules

| Parameter | Feature |
|---|---|
| `-r`, `--routes` | React Router and page navigation |
| `-l`, `--locale` | Chinese/English internationalization |
| `-s`, `--sso` | SSO authentication |
| `--sensors` | Sensors Data analytics via `SensorsBuried` |
| `--argus` | Argus user-session recording and replay |
| `-d`, `--deploy` | Docker, K8s, Nginx, and GitLab CI deployment |
| `-p`, `--prod <domain>` | Production ingress domain |
| `-S`, `--stag <domain>` | Staging ingress domain |
| `-D`, `--dev <domain>` | Development ingress domain |
| `-a`, `--all` | Enable routes, locale, SSO, Sensors Data, Argus, and deployment |

The generated xlab-web project includes React 18, Vite 5, TypeScript 5.9, ESLint 9, Prettier 3, Tailwind CSS 4, Husky 9, Less, Axios, and multi-environment configuration.

## Workflow

### 1. Determine the configuration

Extract the project name and required feature modules. Always use the `xlab-web` template. If the user does not specify feature modules, allow the CLI to prompt interactively.

### 2. Check prerequisites

Require Node.js 18 or later. Prefer pnpm for generated frontend projects; the CLI falls back to npm when pnpm is unavailable.

```shell
node -v
pnpm -v || npm -v
```

### 3. Install the CLI

```shell
npm install -g xlab-web-cli --registry https://nexus.openxlab.org.cn/repository/npm-all/
```

### 4. Create the project

```shell
# Enable every xlab-web feature
xlab-web-cli create project-name -t xlab-web -a

# Routing, SSO, Argus, and CI/CD
xlab-web-cli create project-name -t xlab-web -r -s --argus -d -p example.com

# Sensors Data analytics
xlab-web-cli create project-name -t xlab-web --sensors

# Use the interactive feature prompts for xlab-web
xlab-web-cli create project-name -t xlab-web
```

Treat `Success！Created at ...` followed by `Happy hacking!` as successful creation.

### 5. Run an xlab-web project

```shell
cd project-name
pnpm i
pnpm start
```

Use `npm install` and `npm start` if pnpm is unavailable.

## Generated integrations

### Frontend governance

The CLI initializes git, adds `frontend-governance` as the `.governance` submodule, runs its setup script when available, and creates these AI-tool instruction links:

```text
AGENTS.md                         -> .governance/AGENTS.md
CLAUDE.md                         -> .governance/AGENTS.md
.cursor/rules/governance.mdc     -> .governance/AGENTS.md
.github/copilot-instructions.md  -> .governance/AGENTS.md
```

It also extends the `prepare` script to initialize/update the submodule, run `.governance/setup.sh`, and restore `AGENTS.md`. It does not add `governance:update` or `governance:init` npm scripts.

To update governance manually:

```shell
git submodule update --init --remote
sh .governance/setup.sh
```

The deployment template includes `GIT_SUBMODULE_STRATEGY: recursive`.

### Sensors Data

When `--sensors` is enabled, the CLI adds `@migo/migo-copilot`, initializes `SensorsBuried`, and uses the project name as the default `biz` page property. With SSO enabled, it also associates the SSO user through `SensorsBuried.login`.

### Argus session replay

When `--argus` is enabled, the CLI:

- Adds `@argus/tracker` and its npm registry configuration.
- Generates `src/argus-tracker.ts`.
- Controls recording with `VITE_ENABLE_TRACKER`.
- Reads the project key from `VITE_ARGUS_PROJECT_KEY` in each environment file.
- Sends recordings to `https://aurora.openxlab.org.cn`.

Apply for a project key at `https://aurora.openxlab.org.cn/argus/projects`. Mark sensitive DOM content with `data-openreplay-obscured` or `data-openreplay-hidden`.

## Generated project structure

```text
project-name/
├── .governance/
├── .gitmodules
├── AGENTS.md
├── CLAUDE.md
├── .cursor/rules/governance.mdc
├── .github/copilot-instructions.md
├── deploy/                    # when --deploy is enabled
├── env/
├── src/
└── package.json
```

## Common issues

### Project name already exists

If the CLI reports `File ... is existed`, choose another project name or remove the existing directory only after confirming it is safe.

### Governance submodule fails

The failure is non-blocking. Check VPN and GitLab access, do not run the CLI with `sudo`, then retry:

```shell
git submodule add --branch main https://gitlab.pjlab.org.cn/cosmos/frontend-governance.git .governance
git submodule update --init --recursive
sh .governance/setup.sh
```

### Governance is empty in CI

Ensure the deployment CI configuration contains:

```yaml
variables:
  GIT_SUBMODULE_STRATEGY: recursive
```