| name | create-enterprise-react-app |
| description | Scaffold and verify a production-ready enterprise React application shell. Use when creating a new React admin project, initializing a blank Vite workspace, or applying the React 19, Ant Design 6, React Router 7, TanStack Query, Zustand, Axios, Tailwind CSS 4, Storybook, Vitest, and Playwright architecture baseline. |
React企业级空白项目创建 / Enterprise React Blank Project Creator
Overview
Create a new, blank enterprise React project with clear UI, routing, state,
request, security, testing, and build boundaries. Use the bundled deterministic
template for an empty destination; adapt the process instead of overwriting
files when the user asks to apply the baseline to an existing project.
Typical Requests
- "Create a blank enterprise React admin project in this directory."
- "Initialize a Vite 8 + React 19 project using Ant Design and TanStack Query."
- "Use the enterprise React baseline for a new back-office application."
Inputs And Outputs
Require a target directory. Accept an optional npm package name and display
title. Infer the package name from the target directory and the title from the
package name when they are omitted.
Deliver a runnable project containing:
- a responsive blank application shell and route-level lazy page;
- Ant Design theme tokens plus Tailwind layout utilities without Preflight;
- TanStack Query, Zustand, and a typed Axios boundary;
- Vitest, Storybook accessibility checks, and Playwright browser checks;
- strict TypeScript, ESLint flat config, Prettier, and production build scripts.
Treat successful dependency installation, typecheck, lint, tests, production
build, and a nonblank browser render as completion. Report any check that could
not run instead of claiming success.
Workflow
- Inspect the target directory, its nearest
package.json, Node version, package
manager configuration, and existing user changes. Require Node.js 20.19+ before
installing the baseline; stop with the exact detected version when the runtime
is older. Do not overwrite a nonempty directory.
- Read references/architecture.md before changing
dependency versions, project boundaries, security behavior, styling strategy,
or quality gates.
- For a new empty target, run the bundled
scripts/create_project.py using its
path inside this Skill package. Pass the target directory, plus --name or
--title only when the user supplied them. Use --dry-run when destination
safety is uncertain.
- For an existing project, inspect its architecture first and apply only the
requested compatible changes. Do not run the template script against it.
- Enable Corepack when available, install with the generated project's pinned
pnpm version, and preserve the generated lockfile. Dependency installation in
the requested project is a normal implementation step; ask only when the user
explicitly requested files without installation or installation would affect
another project.
- Run
pnpm typecheck, pnpm lint, pnpm test, pnpm build, and
pnpm build-storybook. Run PW_PORT=<available-port> pnpm test:e2e when a
compatible Playwright browser is already installed. Installing a new browser
binary requires explicit user approval.
- Start the development server on an available port. Verify the desktop and a
narrow mobile viewport, the sidebar toggle, semantic heading/navigation
structure, visible keyboard focus, browser console, and nonblank rendering.
- Report the project path, URL, commands run, real results, compatibility
fallbacks, and remaining warnings. Do not commit, push, deploy, or publish
without an explicit request.
Decision Rules
- Keep TanStack Query as the owner of server state. Keep Zustand limited to
navigation state, display preferences, and other client-only state.
- Keep Axios inside
src/services; pages and presentational components must not
import it directly.
- Prefer route-level lazy loading before
manualChunks. Add ECharts, XLSX,
drag-and-drop, editors, and similar large packages only when a feature needs
them.
- Prefer
HttpOnly + Secure + SameSite cookies. Do not persist access tokens in
localStorage. Treat frontend permissions as visibility controls, never as the
security boundary.
- Let Ant Design own complex interactive widgets. Use Tailwind for layout,
spacing, and responsive utilities, and do not globally reset Ant Design
controls.
- Keep the pinned compatible baseline unless the user asks for newer versions.
When updating a major version, verify ecosystem peer compatibility and rerun
every quality gate.
Guardrails
- Refuse to scaffold over existing files. If the target is nonempty, stop and
inspect whether the request is an integration task.
- Do not invent backend contracts, authentication endpoints, organization rules,
tokens, private registries, or remote repository URLs.
- Do not initialize Git, commit, push, install global tools, install browser
binaries, deploy, or publish unless the user explicitly authorizes that action.
- Do not hide build-size, peer-dependency, browser, or accessibility warnings.
Validation
When changing this Skill itself, run:
python3 scripts/test_create_project.py
python3 "${CODEX_HOME:-$HOME/.codex}/skills/.system/skill-creator/scripts/quick_validate.py" .
Also parse agents/openai.yaml as YAML and scan the package for absolute home
paths, secrets, TODO markers, and unused resource directories.
