ant-design-pro/CLAUDE.md

CLAUDE.md

Project

Ant Design Pro — React enterprise boilerplate on Umi Max v4, antd v6, ProComponents v3.

Commands

npm start (dev+mock), npm run dev (no mock), npm run build (utoopack), npm run lint (Biome+tsc), npm run test (Jest), npx antd lint ./src (antd-specific checks).

Other: npm run openapi (regenerate src/services/), npm run simple (irreversible — commit first), npm run biome (auto-fix), npm run tsc (type-check only).

Critical Rules

• Never edit src/services/ant-design-pro/ — auto-generated, regenerate with npm run openapi
• Biome only — no ESLint, no Prettier. Both npm run lint and npx antd lint ./src must pass before commit
• Always npx antd info <Component> before writing antd code — don't guess APIs from memory
• npm run simple is irreversible — always commit/branch first
• Conventional commits required (commitlint enforced)
• TypeScript strict · Node ≥ 20 · package-lock.json (not yarn/pnpm)
• .umi dir is auto-generated — delete src/.umi and restart if dev server acts up

Architecture Essentials

Config: config/config.ts (defineConfig), config/routes.ts (declarative routes). Route name → menu.xxx i18n key; access field gates visibility.

Convention files (src/): app.tsx (runtime config + getInitialState), access.ts (permissions), global.tsx (side effects), loading.tsx, typings.d.ts.

Auth: getInitialState() → GET /api/currentUser; 401 → redirect login. access.ts: canAdmin = currentUser.access === 'admin'. Mock creds: admin/ant.design or user/ant.design.

State: useModel('filename') for global hooks (src/models/). useModel('@@initialState') for currentUser/settings. ProTable request prop for most data loading. @tanstack/react-query for complex server state.

Styling priority: Tailwind CSS v4 (layout) → antd-style v4 / createStyles (theme tokens) → CSS Modules → Less (legacy only).

Request: built-in request from @umijs/max, configured in src/requestErrorConfig.ts. Per-page service.ts for non-generated APIs.

i18n: 8 locales in src/locales/. useIntl().formatMessage({ id, defaultMessage }).

Mock: mock/ (global) + src/pages/**/_mock.ts (co-located). Express-style handlers.

Cloudflare Worker: cloudflare-worker/ — separate Hono app, own package.json, not an npm workspace.

AI Skills

This project ships with two built-in Claude Code Skills (.claude/skills/). If you already have these skills in your project, no installation is needed — just run them directly. To update to the latest skill definitions, run npx skills add ant-design/ant-design-pro.

/pro-upgrade — Project Upgrade

Run /pro-upgrade in Claude Code to auto-upgrade the project to the latest Ant Design Pro version. It diffs the latest template against this project and merges framework changes while preserving business code. Works for any version gap (v5→v6, v6.x→latest, etc.).

/antd — Ant Design CLI

Run /antd in Claude Code for any antd-related work. It provides access to @ant-design/cli with offline metadata for antd v3/v4/v5/v6. Key commands:

• npx antd info <Component> — look up props/API before writing code (mandatory)
• npx antd lint ./src — check for deprecated or problematic usage (must pass before commit)
• npx antd demo <Component> <demo> — get working code examples
• npx antd migrate <from> <to> — migration checklist between major versions

Page Co-location

Each page dir: index.tsx, optional service.ts, _mock.ts, data.d.ts, style files. Keep page-specific code with the page.