Skip to main content

create-enterprise-react-app

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.

Source facts

Repository
whyzsm/tiny-agents
Last source activity
July 25, 2026 at 15:51
Detected SKILL.md language
English
Stars
2
Forks
0

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer
38 files

Showing SKILL.md

SKILL.md
Source instructions · Read-only preview
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 1. 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. 2. Read [references/architecture.md](references/architecture.md) before changing dependency versions, project boundaries, security behavior, styling strategy, or quality gates. 3. 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. 4. For an existing project, inspect its architecture first and apply only the requested compatible changes. Do not run the template script against it. 5. 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. 6. 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. 7. 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. 8. 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: ```bash 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.
View on GitHub