ant-design/antd-skill

Overview

This skill is a single-file decision guide for Ant Design v6, Ant Design Pro 5, ProComponents, and Ant Design X v2. It gives concise component selection, theming, SSR, accessibility, performance, routing/access, CRUD, and AI/chat UI recommendations based only on official docs. Use it to produce verifiable, low-risk implementation plans rather than tutorials.

How this skill works

It classifies the request into core antd, Pro, or X and confirms versions and rendering mode (CSR/SSR/streaming). For each component it maps names to official route slugs and instructs to fetch CN docs first, EN fallback. It then outputs a short decision rationale, provider/theming baseline, and concrete SSR/a11y/perf verification checkpoints.

When to use it

• Choosing or comparing Ant Design components across antd@^6, Pro 5, or X v2
• Designing theming/token strategies and global provider setup
• Preparing server-side rendering or streaming with style/hydration checks
• Defining routing, menu, and access patterns for Pro applications
• Designing CRUD forms/tables or AI/chat UI patterns with X tools

Best practices

• Always map component names to the official slug and request CN docs first, EN fallback.
• Favor TypeScript and token-first theming: global tokens -> component tokens -> alias tokens.
• Use a single root ConfigProvider unless strict isolation is required; add StyleProvider for SSR.
• Avoid undocumented APIs and internal .ant-* selectors; do not invent props or events.
• Include short verification checks for SSR hydration order, accessibility, and key performance metrics.

Example use cases

• Decide between Table vs ProTable for a large paginated dataset with server sorting and stable rowKey guidance.
• Define global token overrides and component token tweaks for brand colors and spacing with risk/verification points.
• Plan SSR for a React 18 app: ConfigProvider + StyleProvider, CSS order verification, and hydration checkpoints.
• Design Pro route/menu/access mapping tied to backend enforcement and CRUD schema direction for forms and tables.
• Specify Ant Design X streaming scenario: message schema, deterministic tool rendering, and stop/retry behavior.