antd

GitHub

基于@ant-design/cli的Ant Design开发辅助技能,支持组件API查询、文档检索、调试诊断、版本迁移及项目分析。通过npx antd命令获取离线结构化数据,提升开发效率与准确性。

.claude/skills/antd/SKILL.md ant-design/ant-design-pro

触发场景

编写Ant Design组件代码 查询组件Props或Demo 调试Ant Design相关问题 进行Ant Design版本迁移 分析项目中Ant Design的使用情况

安装

npx skills add ant-design/ant-design-pro --skill antd -g -y
更多选项

非标准路径

npx skills add https://github.com/ant-design/ant-design-pro/tree/master/.claude/skills/antd -g -y

不安装直接使用

npx skills use ant-design/ant-design-pro@antd

指定 Agent (Claude Code)

npx skills add ant-design/ant-design-pro --skill antd -a claude-code -g -y

安装 repo 全部 skill

npx skills add ant-design/ant-design-pro --all -g -y

预览 repo 内 skill

npx skills add ant-design/ant-design-pro --list

SKILL.md

Frontmatter
{
    "name": "antd",
    "description": "Use when the user's task involves Ant Design (antd) — writing antd components, debugging antd issues, querying antd APIs\/props\/tokens\/demos, migrating between antd versions, or analyzing antd usage in a project. Triggers on antd-related code, imports from 'antd', or explicit antd questions.\n",
    "allowed-tools": [
        "Bash(antd *)",
        "Bash(antd bug*)",
        "Bash(antd bug-cli*)",
        "Bash(npx antd *)",
        "Bash(npx antd bug*)",
        "Bash(npx antd bug-cli*)"
    ]
}

Ant Design CLI

You have access to @ant-design/cli — a local CLI tool with bundled antd metadata for v3/v4/v5/v6. Use it to query component knowledge, analyze projects, and guide migrations. All data is offline, no network needed.

Setup

The CLI is installed as a dev dependency. Use npx antd to run it.

Always use --format json for structured output you can parse programmatically.

Scenarios

1. Writing antd component code

Before writing any antd component code, look up its API first — don't rely on memory.

# Check what props are available
npx antd info Button --format json

# Get a working demo as starting point
npx antd demo Button basic --format json

# Check semantic classNames/styles for custom styling
npx antd semantic Button --format json

# Check component-level design tokens for theming
npx antd token Button --format json

Workflow: antd info → understand props → antd demo → grab a working example → write code.

2. Looking up full documentation

When you need comprehensive component docs (not just props):

npx antd doc Table --format json        # full markdown docs for Table
npx antd doc Table --lang zh            # Chinese docs

3. Debugging antd issues

When code isn't working as expected or the user reports an antd bug:

# Collect full environment snapshot (system, deps, browsers, build tools)
npx antd env --format json

# Check if the prop exists for the user's antd version
npx antd info Select --version 5.12.0 --format json

# Check if the prop is deprecated
npx antd lint ./src/components/MyForm.tsx --format json

# Diagnose project-level configuration issues
npx antd doctor --format json

Workflow: antd env → capture full environment → antd doctor → check configuration → antd info --version X → verify API against the user's exact version → antd lint → find deprecated or incorrect usage.

4. Migrating between versions

When the user wants to upgrade antd (e.g., v3 → v4 or v4 → v5):

# Get full migration checklist
npx antd migrate 3 4 --format json    # v3 → v4
npx antd migrate 4 5 --format json    # v4 → v5

# Check migration for a specific component
npx antd migrate 4 5 --component Select --format json

# See what changed between two versions
npx antd changelog 4.24.0 5.0.0 --format json

# See changes for a specific component
npx antd changelog 4.24.0 5.0.0 Select --format json

Workflow: antd migrate → get full checklist → antd changelog <v1> <v2> → understand breaking changes → apply fixes → antd lint → verify no deprecated usage remains.

5. Analyzing project antd usage

When the user wants to understand how antd is used in their project:

# Scan component usage statistics
npx antd usage ./src --format json

# Filter to a specific component
npx antd usage ./src --filter Form --format json

# Lint for best practice violations
npx antd lint ./src --format json

# Check only specific rule categories
npx antd lint ./src --only deprecated --format json
npx antd lint ./src --only a11y --format json
npx antd lint ./src --only performance --format json

6. Checking changelogs and version history

When the user asks about what changed in a version:

# Specific version changelog
npx antd changelog 5.22.0 --format json

# Version range (both ends inclusive)
npx antd changelog 5.21.0..5.24.0 --format json

7. Exploring available components

When the user is choosing which component to use:

# List all components with categories
npx antd list --format json

# List components for a specific antd version
npx antd list --version 5.0.0 --format json

8. Collecting environment info

When you need to understand the project's antd setup, or prepare info for a bug report:

# Full environment snapshot (text — paste into GitHub Issues)
npx antd env

# Structured JSON for programmatic use
npx antd env --format json

# Scan a specific project directory
npx antd env ./my-project --format json

9. Reporting antd bugs

When the user asks you to report an antd bug:

# Step 0: Collect environment info for reference (optional)
npx antd env --format json

# Step 1: Preview for user review
npx antd bug --title "DatePicker crashes when selecting date" \
  --reproduction "https://codesandbox.io/s/xxx" \
  --steps "1. Open DatePicker 2. Click a date" \
  --expected "Date is selected" \
  --actual "Component crashes with error" \
  --format json

# Step 2: Show to user, ask for confirmation

# Step 3: Submit after user confirms
npx antd bug --title "DatePicker crashes when selecting date" \
  --reproduction "https://codesandbox.io/s/xxx" \
  --steps "1. Open DatePicker 2. Click a date" \
  --expected "Date is selected" \
  --actual "Component crashes with error" \
  --submit

10. Reporting CLI issues

When the user asks to report a CLI bug:

npx antd bug-cli --title "antd info Button returns wrong props" \
  --description "When querying Button props for version 5.12.0, the output includes props that don't exist" \
  --steps "1. Run: npx antd info Button --version 5.12.0 --format json" \
  --expected "Props matching antd 5.12.0 Button API" \
  --actual "Props include 'classNames' which was added in 5.16.0" \
  --format json

Show the report to the user and confirm before submitting with --submit.

Opt-out: If the environment variable ANTD_NO_AUTO_REPORT=1 is set, skip all bug-reporting suggestions entirely.

11. Using as MCP server

If working in an IDE that supports MCP (Claude Desktop, Cursor, etc.), the CLI can also run as an MCP server:

{
  "mcpServers": {
    "antd": {
      "command": "npx",
      "args": ["antd", "mcp"]
    }
  }
}

This provides 7 tools (antd_list, antd_info, antd_doc, antd_demo, antd_token, antd_semantic, antd_changelog) and 2 prompts (antd-expert, antd-page-generator) via MCP protocol.

Global Flags

Flag Purpose
--format json Structured output — always use this
--version <v> Target a specific antd version (e.g. 5.20.0)
--lang zh Chinese output (default: en)
--detail Include extra fields (description, since, deprecated, FAQ)

Key Rules

  1. Always query before writing — Don't guess antd APIs from memory. Run antd info first.
  2. Match the user's version — This project uses antd v6. The CLI auto-detects from node_modules if no flag is given.
  3. Use --format json — Every command supports it. Parse the JSON output rather than regex-matching text output.
  4. Check before suggesting migration — Run antd changelog <v1> <v2> and antd migrate before advising on version upgrades.
  5. Lint after changes — After writing or modifying antd code, run antd lint on the changed files to catch deprecated or problematic usage.
  6. Report antd bugs — When the user asks to report an antd bug, use antd bug. Always preview first, get user confirmation, then submit.
  7. Report CLI issues — When the user asks about a CLI problem, use antd bug-cli to help them file a report. Always preview first, get user confirmation, then submit.

版本历史

  • bb40867 当前 2026-07-24 11:43

同 Skill 集合

.claude/skills/pro-upgrade/SKILL.md

元信息

文件数
0
版本
bb40867
Hash
7e249f99
收录时间
2026-07-24 11:43

首页 - Wiki
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-08-07 16:26
浙ICP备14020137号-1 $访客地图$