skills.rest
Choi-Keith
Choi-KeithCOMMUNITY
Explore all skills by this author →
GitHub

dev-antd

Guides component selection, theming, and migration decisions for Ant Design 6, Pro, and X projects.

Updated Aug 10, 2026
Search Tags:#theming#react#migration#component library#ssr#antd#ant design
One-click install
npx skills add https://github.com/Choi-Keith/skill-arsenal-ultra --skill dev-antd-choi-keith
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dev-antd
Source: https://github.com/Choi-Keith/skill-arsenal-ultra/tree/main/plugins/dev-skills/dev-frontend/skills/dev-antd
Command: npx skills add https://github.com/Choi-Keith/skill-arsenal-ultra --skill dev-antd-choi-keith

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @ant-design/cli, and includes references (resource) components.

What problem does it solve? Frontend developers working with Ant Design often guess component APIs from memory, misuse theme tokens, or break SSR and accessibility when combining antd 6, Ant Design Pro, and Ant Design X. This Skill enforces a documentation-first decision workflow backed by the offline @ant-design/cli so every component choice is grounded in official APIs. ## Core Features & Use Cases - Offline API Queries: Use @ant-design/cli commands (info, demo, doc, token, semantic) to retrieve component props, examples, and theme hooks without network access. - Decision Guidance: Provides rules for ConfigProvider baselines, token-first theming, SSR with StyleProvider, Pro routing/permissions/CRUD, and X streaming chat patterns. - Quality & Migration Tooling: Covers antd lint, doctor, usage analysis, changelog review, and version-to-version migration workflows. - Use Case: When adding a TreeSelect with remote search to an SSR React 19 app, query the CLI for the exact v6 API, apply token-based styling, and verify hydration and accessibility against the regression checklist. ## Quick Start Ask the agent to help you choose and configure an Ant Design component, for example to build a Pro CRUD table page with correct tokens and SSR setup.

Frequently Asked Questions about dev-antd

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I look up Ant Design component props without guessing?▼

Run antd info <Component> --format json using the @ant-design/cli to retrieve the exact props and API for your installed version. Follow with antd demo for baseline examples and antd doc for full documentation before writing any component code.

How do I migrate from antd 4 to antd 5 or 6?▼

Use antd migrate 4 5 --format json for the full migration guide, or scope it to one component with --component Select. Check breaking changes with antd changelog <from> <to> --format json before upgrading.

Does Ant Design 6 support SSR with React 18 or 19?▼

Yes, SSR is supported by combining ConfigProvider with StyleProvider so styles are extracted and hydrated correctly. The skill's checklist requires verifying style order and hydration for any SSR or streaming rendering mode.

What is the correct way to theme Ant Design components?▼

Apply themes in priority order: global tokens first, then component tokens, then alias tokens, with classNames and styles APIs for local overrides. Avoid global .ant-* selector overrides, which break with version upgrades.

Why should I avoid relying on internal .ant-* CSS selectors?▼

Internal .ant-* class names are undocumented implementation details that change between antd releases, so styles targeting them break silently on upgrades. Use documented token, classNames, and styles APIs instead.

Can I use the antd CLI offline or through MCP?▼

Yes, @ant-design/cli answers component, token, changelog, and lint queries entirely offline from local data. It can also run as an MCP server via antd mcp --version <x.y.z> to expose structured Ant Design knowledge tools.

Related Skills

Explore More Software Engineering Skills→
KlotzJesseKlotzJesse

react-dev

Create type-safe React components and hooks in TypeScript for React 18/19.

Community
Intermediate
htooayelwinicthtooayelwinict

fullstack-implementation

Automate end-to-end feature implementation in Laravel 12, Inertia.js, React 19, and TypeScript projects.

Community
Advanced
digirati-co-ukdigirati-co-uk
57

ssr-site

Standardize Madoc TS site SSR rendering and template token injection.

Official
Advanced
google-labs-codegoogle-labs-code
8.2k

shadcn-ui

Integrates and customizes shadcn/ui components in React applications using Tailwind CSS.

Official
Advanced