ant-design
Single-file decision guide for antd 6.x, Ant Design Pro 5/ProComponents, and Ant Design X v2.
Skill by liuqiao666
Chalk Labs
Need help deploying ant-design?
Chalk Labs sets up agents like this inside real teams: connected to your tools, tested on your data, with a human in the loop where it matters.
Install
Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.
npx agentmarket install skill/liuqiao666-ant-design
Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.
Get the weekly diff
The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.
About
Use cases: design, frontend
Reviews
Write a reviewNo reviews yet. Installed it? Reviews come from verified installers only. How reviews work
Permissions
What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.
- Tools
- No tools found
- Secrets
- None asked for
- Install scripts
- None found
Network hosts it talks to 1
codeload.github.com· found in install command
Files it touches
~/.claude/skills/ant-design
What's inside
- Skill name
ant-design- Description
- Single-file decision guide for antd 6.x, Ant Design Pro 5/ProComponents, and Ant Design X v2. Use for component selection, theming/tokens, SSR, a11y, performance, routing/access/CRUD, and AI/chat UI patterns.
- License
- Apache-2.0
- Instructions
- 53 lines in SKILL.md · view on GitHub
Files (1)
- SKILL.md
SKILL.md (first lines)
# Ant Design
## S - Scope
- Target: `antd@^6` + React 18-19, with `ant-design-pro@^5` / `@ant-design/pro-components` and `@ant-design/x@^2` when 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 `ConfigProvider` unless 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):
1. `https://ant.design/components/{components}-cn`
2. `https://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.md` first, then `.md` fallback.
- 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.From liuqiao666/ProtoFlow, Apache-2.0.
More from liuqiao666/ProtoFlow
- 0.434score
genie-editor-cli-workflow
liuqiao666
通过 @axhub/genie CLI 发现在线 frontend-page、读取 Genie 编辑器待处理节点、导出上下文图片或节点截图、设置节点编辑状态并完成网页或文本标注相关修改的完整闭环流程;当用户要求根据 Genie editor 待办修网页、批量处理 pending-dispatch…
SkillDFreshness: D★ 1Claude Code +9 - 0.434score
design-bid-proposals
liuqiao666
默认生成 3 个可直接落地的设计比稿方向;如果用户明确要求 2 个、5 个或其他数量,必须按用户要求生成。该技能只负责比稿规则、分案策略和 prompt 约束,不提供独立脚本。实际执行时沿用现有 Gemini CLI 方式:先写 prompt 文件,再逐次调用 Gemini 完成规划轮、单方案轮和汇总轮。
SkillDFreshness: D★ 1Claude Code +9 - 0.431score
design-review
liuqiao666
对原型和组件进行设计规范一致性审查,识别违规元素并建议将新增设计模式纳入主题。在需要检查设计质量、规范合规性或识别可复用设计模式时使用。
SkillDFreshness: D★ 1Claude Code +9 - 0.431score
create-workflow
liuqiao666
Axhub Make 创建内容入口;当用户要创建原型/组件、文档、主题或数据表时,根据提示词分流到对应引用文档,并按需渐进式加载。
SkillDFreshness: D★ 1Claude Code +9 - 0.429score
pencil-sync-after-prototype-workflow
liuqiao666
在本项目新建或重构 `src/prototypes/*`、`src/components/*` 时,执行“先按既有流程完成原型,再 1:1 创建 Pencil 文件,并强制后续同步”的编排约束;当需要为已完成原型补齐 Pencil 设计稿或维护代码与设计双向同步时使用。
SkillDFreshness: D★ 1Claude Code +9 - 0.428score
skills-management
liuqiao666
Axhub Make 技能管理入口,用于维护项目技能清单、技能分类与技能文档,并在修改前执行备份。
SkillDFreshness: D★ 1Claude Code +9 - 0.426score
figma-make-project-converter
liuqiao666
将 Figma Make 导出的 Vite + React 项目转换为本项目页面组件或主题的流程规范;在处理 @/ 路径、package@version 别名、globals.css 样式迁移与主题提取时使用。
SkillDFreshness: D★ 1Claude Code +9 - 0.426score
gemini-cli-uiux
liuqiao666
使用 Gemini CLI 执行 UI/UX 设计与实现任务。适用于需要调用 Gemini CLI、基于本地文档路径读取长上下文、并将结果直接写入项目文件的场景。
SkillDFreshness: D★ 1Claude Code +9 - 0.426score
pencil-import-workflow
liuqiao666
使用 Pencil MCP 读取当前打开的 .pen 文件与 Frame(无需上传),让用户确认导入范围与输出结构后,生成 Axhub Make 原型目录(spec.md + index.tsx)并验收。
SkillDFreshness: D★ 1Claude Code +9 - 0.426score
screenshot-page-workflow
liuqiao666
基于网页或 App 截图进行视觉分析与原型还原的流程规范;在需要截图识别、资产提取(功能/交互/业务分析)、页面代码生成与验收时使用。
SkillDFreshness: D★ 1Claude Code +9 - 0.426score
ai-studio-project-converter
liuqiao666
将 Google AI Studio 生成的 React 项目转换为本项目页面组件的流程规范;在处理 Import Map、样式迁移、依赖安装、环境变量与验收时使用。
SkillDFreshness: D★ 1Claude Code +9 - 0.426score
axure-export-workflow
liuqiao666
在“导出到 Axure”前的代码检查失败场景下,按固定流程修复规范问题并完成 Axure 模式注释标识;当用户要求修复导出检测错误、补齐 @mode axure、补充 Skill 参考路径时使用。
SkillDFreshness: D★ 1Claude Code +9
Signals
- Stars
- 1
- Forks
- 1
- Open issues
- 0
- Last commit (this folder)
- Apr 9, 2026 (6 months ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- Apache-2.0
- Repository
- github.com/liuqiao666/ProtoFlow
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
Same skill elsewhere
Copies of this SKILL.md published by others; search shows only one of them.
More from liuqiao666
- 0.434score
design-bid-proposals
liuqiao666
默认生成 3 个可直接落地的设计比稿方向;如果用户明确要求 2 个、5 个或其他数量,必须按用户要求生成。该技能只负责比稿规则、分案策略和 prompt 约束,不提供独立脚本。实际执行时沿用现有 Gemini CLI 方式:先写 prompt 文件,再逐次调用 Gemini 完成规划轮、单方案轮和汇总轮。
SkillDFreshness: D★ 1Claude Code +9 - 0.434score
genie-editor-cli-workflow
liuqiao666
通过 @axhub/genie CLI 发现在线 frontend-page、读取 Genie 编辑器待处理节点、导出上下文图片或节点截图、设置节点编辑状态并完成网页或文本标注相关修改的完整闭环流程;当用户要求根据 Genie editor 待办修网页、批量处理 pending-dispatch…
SkillDFreshness: D★ 1Claude Code +9 - 0.431score
create-workflow
liuqiao666
Axhub Make 创建内容入口;当用户要创建原型/组件、文档、主题或数据表时,根据提示词分流到对应引用文档,并按需渐进式加载。
SkillDFreshness: D★ 1Claude Code +9 - 0.431score
design-review
liuqiao666
对原型和组件进行设计规范一致性审查,识别违规元素并建议将新增设计模式纳入主题。在需要检查设计质量、规范合规性或识别可复用设计模式时使用。
SkillDFreshness: D★ 1Claude Code +9 - 0.429score
pencil-sync-after-prototype-workflow
liuqiao666
在本项目新建或重构 `src/prototypes/*`、`src/components/*` 时,执行“先按既有流程完成原型,再 1:1 创建 Pencil 文件,并强制后续同步”的编排约束;当需要为已完成原型补齐 Pencil 设计稿或维护代码与设计双向同步时使用。
SkillDFreshness: D★ 1Claude Code +9 - 0.428score
skills-management
liuqiao666
Axhub Make 技能管理入口,用于维护项目技能清单、技能分类与技能文档,并在修改前执行备份。
SkillDFreshness: D★ 1Claude Code +9
Done for you
Rather not set it up yourself?
Chalk Labs scopes, builds and runs agents for your team: the task audit, the eval harness, the integrations and the weekly ops report. Fixed scope, priced before we start.
See how we build AI agents →Read the case studies
Chalk Labs is a two-founder AI and growth studio. We build AI agents, CRMs and MVPs for Web3 and AI companies, and have shipped 50+ product and token launches.
- launches shipped
- 50+
- launches shipped
- media placements
- 500+
- media placements
- founders on every account
- 2
- founders on every account
Press we've placed: Forbes · CoinDesk · Decrypt · Cointelegraph · The Block
Rahil Jain, Co-founder, Chalk Labs. Ex-Goldman Sachs engineer. You talk to the person who builds it.
Get ant-design running in your business
Tell us what you want to automate. A founder replies within one working day with a plan, not a pitch deck.
Cite this page
ant-design skill. Agent Mart. https://agentmart.dev/skills/liuqiao666-ant-design (last updated 2026-10-24)