antd-skills_skill

Overview

This skill is an intelligent Ant Design development assistant that speeds up building, auditing, and migrating Ant Design UIs. It combines code generation, style and performance checks, Figma-to-code conversion, and actionable reports to keep projects consistent with Ant Design best practices. It targets TypeScript/JavaScript React projects and supports Ant Design v4 and v5.

How this skill works

The assistant inspects project files or a single file to run syntax, style, performance, and UX checks and emits Markdown reports with findings and fix suggestions. It can consume Figma designs (via a Figma link or MCP integration), map design elements to Ant Design components and design tokens, download assets, and produce ready-to-use React + Ant Design code. Commands also generate templates, auto-fix common issues, and produce migration guidance for v4→v5.

When to use it

• When starting a new page or component and you want a standard Ant Design template generated quickly.
• When auditing a single file or entire project for Ant Design conventions, performance, or accessibility gaps.
• When converting Figma screens into production-ready React + Ant Design code and assets.
• When migrating a codebase from Ant Design v4 to v5 and needing an actionable migration report.
• When you want inline guidance or automated fixes for imports, props, layout, or styling issues.

Best practices

• Run project-wide checks (@antd:check all) regularly to keep a consistent codebase and catch regressions early.
• Use the Figma-to-code flow for initial scaffolding, then refine generated code to match business logic and accessibility needs.
• Keep a .antdskillsrc file in the repo to lock versions, language, and styling preferences across the team.
• Prefer pattern and page templates (@antd:create page, @antd:pattern) to enforce consistent layouts and reduce duplication.
• Review generated reports (antd-check-report.md, antd-analysis.md) and apply fixes incrementally using @antd:fix.

Example use cases

• Generate a CRUD list page scaffold with ProTable and standard filters using @antd:create page list.
• Convert a Figma screen into components and tokens with @antd:figma and get figma-analysis.md plus code files.
• Scan the repo for spacing and color violations and produce antd-project-report.md for a design-system sync.
• Run @antd:migrate v4-to-v5 to identify breaking changes and auto-upgrade safe patterns with a migration report.
• Batch-create multiple component shells with @antd:batch create to accelerate feature parity across modules.