Ant Design CLI

O que Ant Design CLI faz?

Você tem acesso ao @ant-design/cli — uma ferramenta CLI local com metadados do antd para v4/v5/v6 (mais guias de migração v3 → v4, v4 → v5, v5 → v6). Use-a para consultar conhecimento de componentes, analisar projetos e guiar migrações. Todos os dados são offline, sem necessidade de rede.

Configuração

Antes do primeiro uso, verifique se o CLI está instalado. Se não estiver, instale-o automaticamente:

which antd || npm install -g @ant-design/cli

Após executar qualquer comando, se a saída contiver um aviso "Update available", execute antd upgrade para atualizar antes de continuar.

Sempre use --format json para saída estruturada que você pode analisar programaticamente.

Cenários

1. Escrevendo código de componente antd

Antes de escrever qualquer código de componente antd, consulte sua API primeiro — não confie na memória.

# Verifique quais props estão disponíveis
antd info Button --format json

# Obtenha um demo funcional como ponto de partida
antd demo Button basic --format json

# Verifique classNames/styles semânticos para estilização personalizada
antd semantic Button --format json

# Verifique tokens de design em nível de componente para temas
antd token Button --format json

# Obtenha a linguagem geral de design (design.md): cores, tipografia, espaçamento, raio + princípios
antd design.md --format json

Fluxo de trabalho: antd info → entenda as props → antd demo → pegue um exemplo funcional → escreva código.

2. Consultando documentação completa

Quando você precisar de documentação abrangente do componente (não apenas props):

antd doc Table --format json        # documentação markdown completa do Table
antd doc Table --lang zh            # documentação em chinês

3. Depurando problemas do antd

Quando o código não está funcionando como esperado ou o usuário reporta um bug do antd:

# Colete um snapshot completo do ambiente (sistema, dependências, navegadores, ferramentas de build)
antd env --format json

# Verifique se a prop existe para a versão do antd do usuário
antd info Select --version 5.12.0 --format json

# Verifique se a prop está depreciada
antd lint ./src/components/MyForm.tsx --format json

# Diagnostique problemas de configuração em nível de projeto
antd doctor --format json

Fluxo de trabalho: antd env → capture o ambiente completo → antd doctor → verifique a configuração → antd info --version X → verifique a API contra a versão exata do usuário → antd lint → encontre uso depreciado ou incorreto.

4. Migrando entre versões

Quando o usuário quiser atualizar o antd (ex.: v3 → v4 ou v4 → v5):

# Obtenha a checklist completa de migração
antd migrate 3 4 --format json    # v3 → v4
antd migrate 4 5 --format json    # v4 → v5

# Verifique a migração para um componente específico
antd migrate 4 5 --component Select --format json

# Gere um prompt de auto-migração amigável para agentes (não modifica arquivos)
antd migrate 4 5 --apply ./src --format json

# Veja o que mudou entre duas versões
antd changelog 4.24.0 5.0.0 --format json

# Veja mudanças para um componente específico
antd changelog 4.24.0 5.0.0 Select --format json

Fluxo de trabalho: antd migrate → obtenha a checklist completa → antd changelog <v1> <v2> → entenda as mudanças que quebram → aplique correções → antd lint → verifique se não há uso depreciado restante.

5. Analisando uso do antd no projeto

Quando o usuário quiser entender como o antd é usado no projeto:

# Escaneie estatísticas de uso de componentes
antd usage ./src --format json

# Filtrar para um componente específico
antd usage ./src --filter Form --format json

# Lint para violações de melhores práticas
antd lint ./src --format json

# Verifique apenas categorias de regras específicas
antd lint ./src --only deprecated --format json
antd lint ./src --only a11y --format json
antd lint ./src --only performance --format json

6. Verificando changelogs e histórico de versões

Quando o usuário perguntar sobre o que mudou em uma versão:

# Changelog de uma versão específica
antd changelog 5.22.0 --format json

# Faixa de versões (ambos os extremos inclusivos)
antd changelog 5.21.0..5.24.0 --format json

7. Explorando componentes disponíveis

Quando o usuário estiver escolhendo qual componente usar:

# Liste todos os componentes com categorias
antd list --format json

# Liste componentes para uma versão específica do antd
antd list --version 5.0.0 --format json

8. Coletando informações do ambiente

Quando você precisar entender a configuração do antd no projeto, ou preparar informações para um relatório de bug:

# Snapshot completo do ambiente (texto — cole em Issues do GitHub)
antd env

# JSON estruturado para uso programático
antd env --format json

# Escaneie um diretório de projeto específico
antd env ./my-project --format json

Coleta: SO, Node, gerenciadores de pacotes (npm/pnpm/yarn/bun/utoo), registro npm, navegadores, dependências principais (antd/react/dayjs), todos os pacotes @ant-design/* e rc-*, e ferramentas de build (umi/vite/webpack/typescript/etc.).

9. Reportando bugs do antd

Quando o usuário pedir para você reportar um bug do antd:

# Passo 0: Colete informações do ambiente para referência (opcional — o bug do antd já incorpora ambiente básico)
# Use a saída para verificar versões ou anexar detalhes extras ao relatório de bug
antd env --format json

# Passo 1: Visualização para revisão do usuário
antd bug --title "DatePicker trava ao selecionar data" \
  --reproduction "https://codesandbox.io/s/xxx" \
  --steps "1. Abrir DatePicker 2. Clicar em uma data" \
  --expected "A data é selecionada" \
  --actual "O componente trava com erro" \
  --format json

# Passo 2: Mostre ao usuário, peça confirmação

# Passo 3: Envie após confirmação do usuário
antd bug --title "DatePicker trava ao selecionar data" \
  --reproduction "https://codesandbox.io/s/xxx" \
  --steps "1. Abrir DatePicker 2. Clicar em uma data" \
  --expected "A data é selecionada" \
  --actual "O componente trava com erro" \
  --submit

10. Reportando problemas do CLI

Quando o usuário pedir para você reportar um bug do CLI, ou solicitar explicitamente ajuda para abrir um:

# Visualize o relatório de bug para o usuário
antd bug-cli --title "antd info Button retorna props erradas para v5.12.0" \
  --description "Ao consultar props do Button para a versão 5.12.0, a saída inclui props que não existem nessa versão" \
  --steps "1. Execute: antd info Button --version 5.12.0 --format json" \
  --expected "Props correspondentes à API do antd 5.12.0 Button" \
  --actual "Props incluem 'classNames' que foi adicionado em 5.16.0" \
  --format json

Mostre o relatório ao usuário e confirme antes de enviar:

antd bug-cli --title "antd info Button retorna props erradas para v5.12.0" \
  --description "..." \
  --steps "..." \
  --expected "..." \
  --actual "..." \
  --submit

Opt-out: Se a variável de ambiente ANTD_NO_AUTO_REPORT=1 estiver definida, pule todas as sugestões de relatório de bug — não sugira antd bug ou antd bug-cli a menos que o usuário peça diretamente.

11. Atualizando o CLI

Quando o usuário quiser atualizar o @ant-design/cli para a versão mais recente, ou quando um aviso "Update available" aparecer:

# Atualize para a versão mais recente (detecta automaticamente o gerenciador de pacotes)
antd upgrade

O comando detecta qual gerenciador de pacotes instalou o CLI (npm, yarn, pnpm, bun, cnpm, utoo) e executa o comando de atualização apropriado. Se a detecção falhar, ele sugere o comando manual.

12. Usando como servidor MCP

Se estiver trabalhando em um IDE que suporte MCP (Claude Desktop, Cursor, etc.), o CLI também pode ser executado como um servidor MCP, expondo todas as ferramentas de consulta de conhecimento diretamente:

{
  "mcpServers": {
    "antd": {
      "command": "antd",
      "args": ["mcp", "--version", "5.20.0"]
    }
  }
}

Isso fornece 8 ferramentas (antd_list, antd_info, antd_doc, antd_demo, antd_token, antd_design_md, antd_semantic, antd_changelog) e 2 prompts (antd-expert, antd-page-generator) via protocolo MCP.

Flags Globais

Flag	Propósito
--format <formato>	Formato de saída: json, text ou markdown (agentes devem preferir json)
--version <v>	Direcionar uma versão específica do antd (ex.: 5.20.0)
--lang zh	Saída em chinês (padrão: en)
--detail	Incluir campos extras (descrição, since, deprecated, FAQ)
-V, --cli-version	Exibir a versão do CLI e sair

Regras Principais

1. Sempre consulte antes de escrever — Não adivinhe APIs do antd de memória. Execute antd info primeiro.
2. Combine com a versão do usuário — Consultas de conhecimento (list/info/doc/demo/token/semantic/changelog) suportam antd v4+. Se o projeto usar antd 4.x/5.x/6.x, passe --version 4.24.0 / 5.24.0 / 6.x. Para projetos antd v3, use antd migrate 3 4 primeiro.
3. Use --format json — Todo comando suporta. Analise a saída JSON em vez de usar regex para casar texto.
4. Verifique antes de sugerir migração — Execute antd changelog <v1> <v2> e antd migrate antes de aconselhar sobre atualizações de versão.
5. Lint após mudanças — Após escrever ou modificar código antd, execute antd lint nos arquivos alterados para capturar uso depreciado ou problemático.
6. Reporte bugs do antd — Quando o usuário pedir para reportar um bug do antd, use antd bug. Sempre visualize primeiro, obtenha confirmação do usuário, depois envie.
7. Reporte problemas do CLI — Quando o usuário perguntar sobre um problema do CLI, use antd bug-cli para ajudá-lo a abrir um relatório. Sempre visualize primeiro, obtenha confirmação do usuário, depois envie.