Ant Design Web Application Design System (Middle & Back Office Priority)

This skill provides a battle-tested implementation approach for React 19 + TypeScript + Ant Design 6, along with a fully runnable template. Its core is not a specific set of pages, but rather:

A configurable design system referencing Ant Design's official Design Tokens.
Two switchable application shells (sidebar / top).
A set of battle-tested page recipes, covering 36 forms including middle platforms, portals, documentation, dashboards, and AI workbenches.
A mandatory component reuse-first rule: check antd / existing libraries / existing components first, then write custom code.

The goal is a "native antd" look and feel: components, spacing, states, and themes all coming from Ant Design, not building another design system on top of antd.

When the skill is loaded, the resource block will provide the absolute directory of this skill. Below, <SKILL_DIR> represents it; replace it with the actual path before executing commands. The skill directory contains:

SKILL.md
design.md                               # Machine-readable design language (templated from the official design.md)
scripts/scaffold.mjs                    # One-command project generation (rename + optional install)
scripts/scan-ui.mjs                     # Scan existing components/dependencies/antd usage, before any UI code
scripts/fetch-antd-docs.mjs             # Batch refresh component documentation snapshots by the project's antd version
scripts/check-antd-docs.mjs             # Initial self-check: project antd version vs. documentation snapshots
assets/template/                        # Complete runnable template (no node_modules / dist)
assets/preview/                         # Screenshots
references/antd-official.md             # Ant Design official design language and basic information (built-in)
references/for-agents.md                # Official For Agents prompts, CLI / MCP / LLMs workflows
references/ecosystem.md                 # Official ecosystem libraries and community recommendations, selection order
references/antd-design-language.md      # Official design language, Tokens, configuration mapping
references/component-reuse.md           # Mandatory: reuse lookup, antd component mapping, custom rules
references/app-patterns/README.md       # Pattern index: read this first, choose only one
references/app-patterns/_common.md      # Common shell/width/density/state/acceptance criteria
references/app-patterns/*.md            # 36 type files, read only the matched one per task
references/architecture.md              # Provider, authentication, shell, service layer
references/fullstack-design.md          # Frontend-backend separation, API contracts, data models, React state ownership
references/backend-design.md            # Backend paradigm: layering, authentication, transactions, idempotency, audit, security
references/ant-motion.md                # Ant Motion animation specifications, component integration, performance & accessibility
references/code-quality.md              # Alibaba frontend conventions + React 19/TS code quality & review checklist
references/components/README.md         # Index of 36 commonly used component documentation snapshots (read 1–2 as needed)
references/components/manifest.json     # Snapshot version, file sizes & SHA-256, basis for self-check
references/components/*.md              # antd 6.7.0 Chinese component documentation snapshots
references/ux-scenarios.md              # Loading/empty/error/batch/long-task/permissions and other UI/UX scenarios
references/page-recipes.md              # List/modal/detail/permissions/dashboard recipes
references/design-rules.md              # Visual and interaction specifications

Invocation Boundaries (Priority over Recipes Below)

Global Explicit Use Only: This skill may only be loaded and executed when the user explicitly requires using the Ant Design / antd design language, or names the $antd-admin-template. When a user explicitly stipulates that "design work must use this skill" for a specific project, the project's AGENTS.md can record this ongoing authorization; design work for that project must read and use this skill for assistance; other projects do not inherit this exception.
General frontend design, admin panels, documentation, portals, dashboards, CRUD, theme configuration, "don't use Tailwind", or projects that already depend on antd do not constitute invocation authorization. Do not self-select this skill based on these keywords.
Authorization is determined based on the current task scope. One invocation does not mean all future design tasks should use antd; project-wide ongoing authorization only takes effect within its explicitly defined scope; mentioning, installing, or reviewing this skill does not imply a requirement to use it for interface design.
Respect the existing project's product positioning, DESIGN.md, AGENTS.md, component system, and package manager; only use the necessary references within the scope of authorization, do not automatically migrate the design language or copy the entire template.
The page recipes and new project acceptance criteria below should be adopted based on actual needs; for partial modifications to existing projects, do not forcibly add login, RBAC, multiple business pages, design settings, or admin shells. Do not forcibly apply BasicLayout to portals and marketing pages.
agents/openai.yaml sets policy.allow_implicit_invocation: false. Do not change to automatic invocation, and do not install in cross-tool shared skill directories.

Inspiration and Source Attribution

The AI-friendly design organization of this skill is inspired by the Ant Design Official For Agents page: enabling Agents to query component knowledge for the actual version rather than guessing APIs based solely on training memory; and referencing LLMs.txt and design.md to provide component knowledge, semantic structure, and design language as consultable resources.

This is an independently organized community skill, not an official Ant Design skill or an officially endorsed project. Snapshots are archival references and do not represent the current latest version; verify against the target project's actual dependencies when using. See THIRD_PARTY_NOTICES.md for built-in official documentation materials and their licenses.

Delivery Standards

The following are reference acceptance criteria for fully new applications; select based on authorized application form and scope; existing projects should use their own constraints:

pnpm typecheck and pnpm build both pass.
Application form matches shell: middle/back office uses sidebar navigation; portal/tool-type uses top navigation; content width and density are reasonable.
Complete back office requiring identity and permission management provides login, protected layout, business pages, and 403/404 as needed; public content or partial modifications should not forcibly add these structures.
Usable at both 1440px and 390px widths; mobile sidebar becomes a drawer.
Light/dark theme, brand color, navigation layout, content width, density, and border radius are configurable and persistent.
Do not introduce Tailwind, shadcn, or a second component library; colors come from tokens.
Page text should match user language (default Chinese).
New domains should specify frontend-backend boundaries, API contracts, and data models; if using Mock, clearly indicate replacement points.
Asynchronous pages cover loading / empty / error / forbidden states; dangerous operations require secondary confirmation; long tasks are traceable.
Before writing pages, read design.md; verify component APIs using the official CLI or corresponding version documentation (state the version if no CLI is available).
When entering an existing project, first run the component documentation snapshot self-check; if versions are inconsistent, refresh first or clearly state differences; do not use old snapshots to pretend to be current APIs.
Code conforms to references/code-quality.md: no lazy any types, complete Hooks dependencies, comprehensive state/error/permission handling, no deep .ant-* overrides; if lint scripts exist, lint must pass.
Animations conform to references/ant-motion.md: backend component-level ≤ 300ms, supports prefers-reduced-motion; do not introduce old rc-* animation libraries for decoration.

Ant Design Official Baseline (Built-in)

antd is a React UI component library based on the Ant Design design system, suitable for enterprise-level middle/back offices and desktop websites. The current template uses antd 6.7 + @ant-design/icons 6.3 + React 19. antd 6 requires React >= 18, supports only modern browsers, enables CSS Variables by default, and supports SSR and Electron.

Four Core Design Values:

Natural: Intuitive, reduces cognitive load; less invention, less decoration.
Deterministic: Consistent components, tokens, and page patterns for cross-page consistency.
Meaningful: Every interface serves a clear work goal; one primary action, immediate feedback.
Growing: Composable and extensible, evolving with business and users.

Visual Baseline (Official Specification) :

Item	Baseline
Canvas / Grid	1440px; 4px base grid, 8px main rhythm; 24-column grid
Primary Font	14px / 22px; system font stack; font weights 400/600
Brand Color	`#1677ff` (6th in the default blue palette)
Functional Colors	Success `#52c41a` / Warning `#faad14` / Error `#ff4d4f`
Neutral Colors	88% / 65% / 45% / 25%; Border `#d9d9d9`; Background `#f5f5f5`
Border Radius	2 / 4 / 6 / 8; default 6
Spacing	4 / 8 / 16 / 24 / 32 (4px grid)
Layout	Left-right (fixed navigation) or top-bottom (scaling center)
Animation	Restrained, 0.1–0.3s; no decorative animations for middle/back office

Three Token Layers: Seed (brand/radius/font size) → Map (derived colors/text/border) → Alias (component-level). Pages only read theme.useToken(), never hardcode visual values.

Official Ecosystem (see references/ecosystem.md for details) :

Library	Purpose
`antd` + `@ant-design/icons`	Core components and icons (antd 6 ↔ icons 6)
`@ant-design/pro-components`	ProLayout / ProTable / ProForm; stable 2.x peer is still antd ^5, antd 6 needs 3.x beta and pin version
`@ant-design/charts`	Complex statistical charts; no antd peer, theme alignment needed manually
`@ant-design/x` + `@ant-design/x-markdown`	AI Chat / Copilot / Streaming Markdown; peer `antd ^6.1.1`
`@xyflow/react`	Workflow/Topology canvas; alternative to Pro Flow (peer still v5 under antd 6)
`antd-mobile`	Mobile H5 (independent product line)
`antd-mini`	Alipay/WeChat Mini Programs
`@ant-design/web3`	Web3 / Wallet
Ant Design CLI	Project inspection and v5→v6 migration
Ant Motion / Landing / Pro	Animations, landing page templates, full scaffolding

See references/ecosystem.md for ecosystem selection, version matrix, size, and compatibility checks. Do not downgrade antd to v5 just for one Table; do not directly install Pro Flow / Pro Chat / Pro Editor on antd 6.

Design Contract: design.md is the machine-readable version; read it before writing pages; the visual table in this file is a summary; in case of conflict, design.md + the project's actual antd version takes precedence.

Official Links: ant.design · Design Values · Colors · Layout · Typography · Community Pick · CLI · For Agents · design.md.

Official For Agents Specification (Mandatory)

The official specification clearly states: The current version may contain breaking changes; component APIs, conventions, and file structures may differ from training data; read the specification before writing code, do not write antd APIs from memory.

Before writing any UI:

Read design.md and references/for-agents.md.
Confirm the project's actual version: antd info --version, or read package.json.

Look up component APIs and runnable Demos:

npx -y @ant-design/cli info <Component> --format json
npx -y @ant-design/cli demo <Component> <demo-name>
npx -y @ant-design/cli token <Component> --format json
npx -y @ant-design/cli semantic <Component> --format json

If able to install the official skill, run npx skills add ant-design/ant-design-cli; for MCP integration, see references/for-agents.md.
Before delivery, try running npx -y @ant-design/cli lint ./src; then run pnpm typecheck && pnpm build.

Debug order: antd env → antd doctor → antd info --version → antd lint. Migration order: antd migrate → antd changelog → antd lint. When the CLI is not available, fall back to https://ant.design/components/<name>.md and the local design.md, and state the actual version used in the delivery.

See references/for-agents.md for the official prompt original text, full command table, MCP configuration, and fallback process.

CLI Across the Lifecycle:

Stage	Command	Purpose
Design Alignment	`npx -y @ant-design/cli design.md`	Get the current version's design language; compare with this skill's `design.md`
Selection / API Lookup	`info` / `demo` / `token` / `semantic`	First look at real props, runnable demos, component tokens & semantic DOM
Write Code	Read `references/components/<component>.md`	Offline snapshot fallback; only read 1–2 matched components
Delivery Check	`lint` + `typecheck` + `build`	Check deprecated APIs, types, and build together
Migration	`migrate` → `changelog` → `lint`	v5→v6 or cross-version upgrade
Diagnosis	`env` → `doctor` → `info --version` → `usage`	Environment, version, and component usage surface check

Animation and Code Quality (Mandatory)

Animation

Before writing any transition/entry/scroll effects, read references/ant-motion.md. Default strategy:

Back Office/Tool/SaaS: Only use antd built-in motion + CSS tokens; component-level 100/200/300ms, page-level not exceeding 300ms; no full-screen transitions.
Portal/Website/Landing Page: May use a small amount of narrative animations; page-level 150/300/450/600ms; keep only one main timeline per screen.
Ant Motion Component Library: rc-tween-one / rc-queue-anim / rc-scroll-anim / rc-banner-anim were all discontinued in 2022, peers do not declare React 19, and they rely on findDOMNode; do not install them by default into antd 6 core back offices. If marketing animations are genuinely needed, pin the version, perform real browser verification, and prepare CSS/IntersectionObserver fallbacks.
Must support prefers-reduced-motion; do not use animation to convey the only information; do not let animations block input/routing/loading.

Code Quality

Read references/code-quality.md before writing code. It adapts the Alibaba frontend conventions (naming, TypeScript, React Hooks, accessibility, engineering standards) to React 19 + antd 6:

strict mode + no lazy any usage; no unwarranted @ts-ignore / non-null assertions.
Functional components + Hooks called at the top level; dependency arrays complete; do not use effects to derive state.
Stable list keys; asynchronous pages cover all five states; dangerous operations require confirmation; server data does not go into global stores.
Colors/spacing/border radius come from tokens; do not override .ant-* deep structures; no horizontal overflow at 390px.
Interactive elements are keyboard operable, have visible focus, and readable names; contrast meets WCAG AA.
If the project has lint, run pnpm lint / pnpm stylelint before delivery; if no lint, manually review per code-quality.md §11, and note "lint not configured" in the delivery note.

Optional integration with the official F2E tool:

npx f2elint
# Select React + TypeScript, enable ESLint / Stylelint / Prettier / lint-staged / commitlint as needed

Do not overwrite existing ESLint/Stylelint configurations; merge rules first. Class component / ReactDOM.render rules in F2E documentation do not apply to React 19.

Initial Self-Check (Do This First When Entering an Existing Project)

The skill includes 36 antd 6.7.0 Chinese component documentation snapshots in references/components/. The project's antd version may differ, do not assume the snapshot is the current API.

# 1) Align the project's installed antd version with the snapshots
node <SKILL_DIR>/scripts/check-antd-docs.mjs <project-directory>

# 2) If inconsistent, refresh based on the project version (requires official CLI; can specify local CLI if network/sandbox restricted)
node <SKILL_DIR>/scripts/fetch-antd-docs.mjs --project <project-directory>
# Or explicitly: --version 6.7.0

Exit code 0: Versions match and all 36 files are complete (size/hash intact).
Exit code 1: Version mismatch or files modified; refresh as prompted, or align the project's antd to the snapshot version.
Exit code 2: Cannot determine project antd version; run pnpm install first, or pass --target.
If the CLI fails to write to HOME in a sandbox/CI, set ANTD_CLI_HOME=/tmp/antd-home; if a local CLI exists, use ANTD_CLI_BIN=/path/to/antd.
After passing the self-check, read the index in references/components/README.md, open only 1–2 components you are currently writing, do not load them all.

Component Reuse Gate (Mandatory, Before Any UI Code)

Before writing JSX, the following steps must be completed in order:

Scan the project: Run node <SKILL_DIR>/scripts/scan-ui.mjs <project-directory> to see installed UI dependencies, existing components in src/components / src/layouts, and antd usage frequency.
Search existing components: Use tools to search src/components, feature directories, and similar pages; if something can be reused, do not write new code.
Check antd: Are Table / Form / Modal / Drawer / Descriptions / Tree / Upload / Empty / Result etc. already covered? If the CLI is available, run antd info <Component> / antd demo <Component> first, then select based on the mapping table in references/component-reuse.md.
Check official extensions: @ant-design/pro-components, @ant-design/charts, @ant-design/x, antd-mobile; then consider mature third-party libraries.
Customize only as a last resort: Place in src/components, use theme.useToken(), and explain why reuse was not possible.

Skipping steps 1–4 and directly writing a dropdown, table, modal, switch, date picker, toast, or empty state is considered incomplete. Delivery must include a statement like "reused / added custom component".

See references/component-reuse.md for detailed rules, component mappings, and anti-patterns.

Workflow

0. Initial Self-Check

When entering an existing project, first run:

node <SKILL_DIR>/scripts/check-antd-docs.mjs <project-directory>

If it fails, refresh the snapshots or align the antd version first; do not write component APIs with version drift. For new projects, run this after scaffold and dependency installation.

1. First, Align on Five Things

Only ask necessary questions when information is insufficient, do not interrogate:

Brand Name: Used for APP_NAME, login page, and title.
Application Form: Middle/back office / Portal / Tool-type SaaS / Data dashboard / Documentation / AI workbench / Project board / E-commerce / Customer service / Settings center, etc.
Business Objects and Pages: e.g., "Order list + Order details + Refund approval".
Roles and Permissions: At least distinguish between admin and regular members; decide if a permission tree is needed.
Data Source: Use in-memory Mock first, or connect directly to real APIs?

If information is sufficient, start directly; do not get stuck in the planning phase.

2. Define Architecture, Data Models, and React State Boundaries

When involving real backends, new domain objects, or complex interactions, first read references/fullstack-design.md; to design/review the server side, read references/backend-design.md first, then write pages. At minimum, produce:

3–6 core entities: Relationships, unique constraints, tenant isolation, state machines, audit fields.
API Contracts: List/detail/write operations, pagination, error codes, idempotency, concurrency control.
State Ownership: What goes in the URL (filters/pagination), server cache, form state, local UI state, global session.
Backend Constraints: Server-side authentication, transaction boundaries, idempotency keys, optimistic locking, audit tables, no leakage of internal information in errors.
Mock Signature: First implement according to the real interface shape, replace only the service internals later.

Writing JSX without a contract is considered incomplete. Frontend permissions are only for display; the server must re-authenticate; backend acceptance follows the checklist in backend-design.md §14.

3. Select Shell and Presets

First, choose the form based on the four questions in references/app-patterns/README.md; only read the matched type file(s) + _common.md, do not load everything:

Form	Preset / Shell	Width	Density	Page Recipe
Middle/Back Office / Operations	Standard middle office · Sidebar	Fluid	Default	List + Detail + Permissions
Portal / Website	Portal Website · Top	Fixed 1200	Loose	Landing + Features + CTA
Tool-type SaaS	Top · Custom	Fluid/Fixed	Compact	Workspace + History + Settings
Data Dashboard / Monitoring	Data Dense · Sidebar/No shell	Fluid	Compact	Metrics + Charts + Rankings
Documentation / Knowledge Base	Portal · Top	Fixed	Default	Left tree + Content + Right TOC
Project / Kanban	Standard middle office · Shell	Fluid	Compact	Horizontal board columns
AI Chat / Copilot	Top/No shell	Fixed/Fluid	Default	Conversations + Message stream + Context
E-commerce / Products	Portal · Top	Fixed	Default	Product grid + Detail + Checkout
Customer Service / Tickets	Data Dense · Sidebar	Fluid	Compact	Queue + Conversation + Detail
Login / Onboarding	No shell	Fixed 420/720	Default	Form + Steps

If first-level modules ≤ 5, prefer top navigation; if there are many modules requiring long-term switching, use sidebar navigation. Do not turn "all applications" into a sidebar back office. See references/app-patterns/README.md for the full 36 forms, layout diagrams, and component selection.

On-Demand Reading Protocol:

Only locate the form in the summary table of README.md; do not open type files first.
Read _common.md once to determine the shell, width, density, and common states.
Only open 1 matched type file; at most 2 for hybrid forms, and explain the combination rationale.
Read page-recipes.md only when a code skeleton is needed; do not invent from scratch.
Do not claim to have read type files that were not opened in the delivery.

4. Generate the Project

# Replace <SKILL_DIR> with the absolute path from the skill resource block
node <SKILL_DIR>/scripts/scaffold.mjs <target-dir> --name "<Brand Name>"
# To install dependencies along with the scaffold:
node <SKILL_DIR>/scripts/scaffold.mjs <target-dir> --name "<Brand Name>" --install

The script copies the template, replaces APP_NAME, package name, and localStorage prefix. Do not skip the script and manually copy the template, then rename files one by one.

After generation, run once:

cd <target-dir>
pnpm typecheck
pnpm dev

5. Modify Brand and Information Architecture

Brand Name: APP_NAME in src/config/constants.ts (already written by scaffold).
Default Design: DEFAULT_APP_CONFIG and DESIGN_PRESETS in src/config/design.ts.
Menu: siderMenuItems in src/config/menu.tsx; quick search: appPages in the same file.
Routes: src/router/index.tsx; each business route must have handle: { title: 'Page Name' }.
Demo Login Account: src/services/auth.ts.

Menu and routes must be synchronized: the menu item's key must equal the route path, otherwise highlighting and navigation will be misaligned.

6. Adjust Design Configuration

Default configuration and presets are concentrated in src/config/design.ts:

interface AppConfig {
  mode: 'light' | 'dark' | 'system';
  primaryColor: string;
  navLayout: 'side' | 'top';
  siderTheme: 'dark' | 'light';
  contentWidth: 'fluid' | 'fixed';
  density: 'compact' | 'default' | 'comfortable';
  borderRadius: number;
  grayMode: boolean;
}

To change the product's default form: modify DEFAULT_APP_CONFIG.
To change recommended combinations: modify DESIGN_PRESETS.
To add a new configuration item: extend AppConfig → add default value → expose a setter in AppConfigContext → add a control in DesignDrawer → consume it in App.tsx / layout.
Configuration is persisted in localStorage (default key nova-admin:design).
If the product does not allow users to change the layout, remove the corresponding Segmented from DesignDrawer, rather than hiding the entire panel.

7. Implement Business Pages

Write pages following the skeletons in references/page-recipes.md, do not reinvent the wheel each time:

List page = PageContainer + Filter Card + Table Card (toolbar, batch operations, pagination).
Create/Edit = Independent Modal component + Form validation + service layer call.
Detail page = Descriptions + Timeline + Status Tag.
Dashboard = Metric cards + Charts + Recent records; the template includes dependency-free SVG charts.
Permissions = Role table + Tree permission drawer.
Portal/Tool page = Top navigation + Fixed-width content; marketing sections can be custom but still use antd Tokens and components.
Component APIs: Look up references/components/README.md or the official CLI first; only read the current component, do not write props from memory.
Interaction details: Select scenarios from references/ux-scenarios.md: first cover the five states, then supplement batch operations, long tasks, conflicts, permission requests, etc.
Animation: Follow references/ant-motion.md: back office default only does component-level 100–300ms feedback; no line-by-line entry, parallax, or full-screen transitions.
Code quality: Follow references/code-quality.md: check types, Hooks, accessibility, error handling, naming, and file boundaries together; do not pile up pages first and fix later.
The template includes three built-in extended examples: /welcome portal/website, /workspace/board project kanban, /docs document center; can be referenced and reused for AI, e-commerce, customer service, CRM, HR, finance, IoT, and other forms.

When adding new domain data, update src/types, src/services, and route/page components simultaneously. Add APIs in src/services/<domain>.ts; add types in src/types/<domain>.ts; add routes in src/router/index.tsx; add pages in src/pages/<domain>/; add menu items in src/config/menu.tsx.

8. Verification and Delivery

Run pnpm typecheck && pnpm build at the root. If the project has lint scripts, also run pnpm lint.
Review any @ts-ignore / non-null assertion / any / eslint-disable; each must have a clear justification (// TODO: ... / // FIXME: ...), otherwise they are incomplete.
If the @ant-design/cli is available, run npx -y @ant-design/cli lint ./src to check for deprecated API usage.
If using Mock, place it in src/mock/<domain>.ts and note in the delivery which .env variable or configuration switches to the real backend.
Check page loading states: if there is no loading at all, it is considered incomplete. Use Suspense for route-level loading; use Spin for partial loading.
Check empty states: if a menu item has no data, show <Empty /> or <Result status="404" />. If the page assumes there will always be data, it is considered incomplete.
Check error states: if an API call fails without any user-visible feedback (toast, Alert, Result), it is considered incomplete.
Check responsive behavior: resize to 390px; if there is horizontal overflow or elements overlap, it is incomplete.
Check dangerous operations: delete batch / delete single item must have Modal.confirm or Popconfirm; if clicking directly triggers deletion, it is incomplete.
Check permissions: if the page lists permissions but the user can still see unauthorized operations (buttons/columns), it is incomplete.
At 1440px width, confirm there is no horizontal scrollbar; at 390px width, confirm the sidebar becomes a drawer and the content has no horizontal overflow.
Check keyboard navigation: use Tab to cycle through interactive elements; ensure focus is visible and the focus order is logical.
Check color contrast: if low-contrast pairs are suspicious (e.g., light gray text on white background), measure at references/code-quality.md §8.
Delivery note must include: "Reused: [list]; Custom components: [list]; Project antd version: v6.7.0 (aligned / snapshot refreshed)".

If the project does not have one of the above checks configured (e.g., no typecheck/build/lint scripts), write in the delivery note: "[Check name] not configured, manual review done, risk of regression".

Design Rules Summary

Read references/design-rules.md for detailed visual and interaction rules; the following are key points from it:

State Consistency: Use theme.useToken() to get color/spacing/border radius; do not hardcode.
Layout Consistency: All page cards use a unified ant-card style; do not mix ant-card, ant-pro-card, and div with different shadows/radii.
Responsive: 1440px default, 390px breakpoint; use ant-row / ant-col or CSS Grid; ensure no overflow.
Interaction Feedback: All clickable areas have :hover / :active states; all forms have validation feedback; all loading states have timeouts and placeholders.
Typography: Use system fonts, primarily font-size: 14px; headings h1–h6 follow antd typography; do not manually specify fonts.
Icons: Use @ant-design/icons; introduce third-party icon libraries only if absolutely necessary.
Accessibility: Form elements have labels; images have alt; interactive elements have aria-label; color is not the sole indicator of state.

Acceptance Checklist (New Projects / Complete Feature Pages)

For every delivery, output a checklist in the following format (delete irrelevant items, add project-specific items):

### Acceptance Checklist

**Project**: [Name], **Antd Version**: [Version], **Shell**: [Sidebar/Top/None], **Width**: [Fluid/Fixed]

- [ ] `pnpm typecheck` passes
- [ ] `pnpm build` passes
- [ ] `antd lint` passes (or noted unavailable)
- [ ] All async pages cover loading / empty / error / forbidden states
- [ ] Dangerous operations have secondary confirmation
- [ ] Responsive: 1440px no scrollbar, 390px sidebar drawer, no overflow
- [ ] Theme switching works (light/dark/system)
- [ ] Brand color, layout, density, border radius are configurable and persist
- [ ] No `any` / unwarranted `@ts-ignore` / non-null assertions
- [ ] Component APIs verified via official CLI or version-specific docs
- [ ] Component reuse record: `scan-ui.mjs` run; reuse / custom components listed
- [ ] No Tailwind / shadcn / second component library introduced
- [ ] Data model and API contract defined (even if Mock)
- [ ] Animations: component-level ≤300ms, supports `prefers-reduced-motion`, no `rc-*` decoration
- [ ] Delivery note: "Reused: [list]; Custom components: [list]; Project antd version: [version] ([aligned/manual refresh/noted diff])"

License and Attribution

This is an independent community skill. Built-in Ant Design official documentation and related materials are subject to their own licenses; see THIRD_PARTY_NOTICES.md for details.

lzhbhlrPython/antd-admin-template

What is antd-admin-template?

Ask in your favorite AI

Documentation