ant-design
Originally fromant-design/antd-skill
Installation
SKILL.md
Ant Design
S - Scope
- Target:
antd@^6+ React 18-19, withant-design-pro@^5/@ant-design/pro-componentsand@ant-design/x@^2when needed. - Focus: decision guidance only; no end-user tutorials.
- Source policy: official docs only; no undocumented APIs or internal
.ant-*coupling.
Default assumptions
- Language: TypeScript.
- Styling: tokens first, then
classNames/styles; avoid global overrides. - Provider: one root
ConfigProviderunless strict isolation is required.
Mandatory rules
- For component questions, first map the component name to the official route slug
{components}(lowercase kebab-case, e.g.TreeSelect -> tree-select,Button -> button), then request docs in this order (CN first, EN fallback):https://ant.design/components/{components}-cnhttps://ant.design/components/{components}
- Examples:
tree-select-cn -> tree-select,button-cn -> button.
- Use only documented antd/Pro/X APIs.
- Do not invent props/events/component names.
- Do not rely on internal DOM or
.ant-*selectors. - Theme priority: global tokens -> component tokens -> alias tokens.
P - Process
1) Classify
- Identify layer: core antd, Pro, or X.
- Confirm version, rendering mode (CSR/SSR/streaming), and data scale.
2) Request docs
- For each component, request
-cn.mdfirst, then.mdfallback. - If multiple components are involved, request each component page before deciding.
3) Decide
- Provider baseline: CSR ->
ConfigProvider; SSR ->ConfigProvider+StyleProvider. - Theming baseline: global tokens -> component tokens ->
classNames/styles. - Output recommendation + risk + verification points (SSR/a11y/perf).
O - Output
- Provide short decision rationale (1-3 sentences).
- Include minimal provider/theming strategy.
- Include concrete SSR/a11y/perf checks.
- For Pro: include route/menu/access and CRUD schema direction.
- For X: include message/tool schema and streaming state direction.
Regression checklist
- One root
ConfigProvider; SSR style order/hydration verified. - Tokens first; no broad global
.ant-*overrides. - Table has stable
rowKey; sort/filter/pagination entry is unified. - Select remote mode disables local filter when using remote search.
- Upload controlled/uncontrolled mode is explicit with failure/retry path.
- Pro route/menu/access remain consistent with backend enforcement.
- X streaming supports stop/retry and deterministic tool rendering.
Related skills
More from rolling-scopes/rsschool-app
nestjs-best-practices
NestJS best practices and architecture patterns for building production-ready applications. This skill should be used when writing, reviewing, or refactoring NestJS code to ensure proper patterns for modules, dependency injection, security, and performance.
43typescript-advanced-types
Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Use when implementing complex type logic, creating reusable type utilities, or ensuring compile-time type safety in TypeScript projects.
32typeorm
Guidelines for developing with TypeORM, a full-featured ORM for TypeScript and JavaScript supporting multiple databases
27