Sistema de UI Personal - Ant Design CLI

CLI de Ant Design

Tienes acceso a @ant-design/cli — una herramienta CLI local con metadatos de antd incluidos para v4/v5/v6 (además de guías de migración para v3 → v4, v4 → v5, v5 → v6). Úsala para consultar conocimiento de componentes, analizar proyectos y guiar migraciones. Todos los datos están sin conexión, no se necesita red.

Configuración

Antes del primer uso, verifica si la CLI está instalada. Si no, instálala automáticamente:

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

Después de ejecutar cualquier comando, si la salida contiene un aviso de "Update available", ejecuta antd upgrade para actualizar antes de continuar.

Siempre usa --format json para salida estructurada que puedas analizar mediante programación.

Escenarios

1. Escribir código de componentes antd

Antes de escribir cualquier código de componentes antd, primero consulta su API (no te bases en la memoria).

# Verifica qué props están disponibles
antd info Button --format json

# Obtén un demo funcional como punto de partida
antd demo Button basic --format json

# Verifica classNames/styles semánticos para estilos personalizados
antd semantic Button --format json

# Verifica tokens de diseño a nivel de componente para theming
antd token Button --format json

# Obtén el lenguaje de diseño general (design.md): colores, tipografía, espaciado, radio + principios
antd design.md --format json

Flujo de trabajo: antd info → entender props → antd demo → tomar un ejemplo funcional → escribir código.

2. Consultar documentación completa

Cuando necesites documentación completa de un componente (no solo props):

antd doc Table --format json        # docs markdown completo de Table
antd doc Table --lang zh            # documentación en chino

3. Depurar problemas de antd

Cuando el código no funciona como se espera o el usuario informa un error de antd:

# Recopila una instantánea completa del entorno (sistema, dependencias, navegadores, herramientas de compilación)
antd env --format json

# Verifica si la prop existe para la versión de antd del usuario
antd info Select --version 5.12.0 --format json

# Verifica si la prop está obsoleta
antd lint ./src/components/MyForm.tsx --format json

# Diagnostica problemas de configuración a nivel de proyecto
antd doctor --format json

Flujo de trabajo: antd env → capturar entorno completo → antd doctor → verificar configuración → antd info --version X → verificar API contra la versión exacta del usuario → antd lint → encontrar uso obsoleto o incorrecto.

4. Migrar entre versiones

Cuando el usuario quiera actualizar antd (por ejemplo, v3 → v4 o v4 → v5):

# Obtén la lista de verificación completa de migración
antd migrate 3 4 --format json    # v3 → v4
antd migrate 4 5 --format json    # v4 → v5

# Verifica la migración para un componente específico
antd migrate 4 5 --component Select --format json

# Genera un prompt de auto-migración amigable para el agente (no modifica archivos)
antd migrate 4 5 --apply ./src --format json

# Ve qué cambió entre dos versiones
antd changelog 4.24.0 5.0.0 --format json

# Ve cambios para un componente específico
antd changelog 4.24.0 5.0.0 Select --format json

Flujo de trabajo: antd migrate → obtener lista de verificación completa → antd changelog <v1> <v2> → entender cambios incompatibles → aplicar correcciones → antd lint → verificar que no quede uso obsoleto.

5. Analizar el uso de antd en el proyecto

Cuando el usuario quiera entender cómo se usa antd en su proyecto:

# Escanea estadísticas de uso de componentes
antd usage ./src --format json

# Filtra a un componente específico
antd usage ./src --filter Form --format json

# Verifica violaciones de mejores prácticas
antd lint ./src --format json

# Verifica solo categorías de reglas específicas
antd lint ./src --only deprecated --format json
antd lint ./src --only a11y --format json
antd lint ./src --only performance --format json

6. Consultar changelogs e historial de versiones

Cuando el usuario pregunte qué cambió en una versión:

# Registro de cambios de una versión específica
antd changelog 5.22.0 --format json

# Rango de versiones (ambos extremos inclusivos)
antd changelog 5.21.0..5.24.0 --format json

7. Explorar componentes disponibles

Cuando el usuario esté eligiendo qué componente usar:

# Lista todos los componentes con categorías
antd list --format json

# Lista componentes para una versión específica de antd
antd list --version 5.0.0 --format json

8. Recopilar información del entorno

Cuando necesites entender la configuración de antd del proyecto, o preparar información para un informe de error:

# Instantánea completa del entorno (texto — pegar en GitHub Issues)
antd env

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

# Escanea un directorio de proyecto específico
antd env ./my-project --format json

Recopila: SO, Node, gestores de paquetes (npm/pnpm/yarn/bun/utoo), registro npm, navegadores, dependencias principales (antd/react/dayjs), todos los paquetes @ant-design/* y rc-*, y herramientas de compilación (umi/vite/webpack/typescript/etc.).

9. Reportar errores de antd

Cuando el usuario te pida reportar un error de antd:

# Paso 0: Recopilar información del entorno como referencia (opcional — antd bug ya incluye entorno básico)
# Usa la salida para verificar versiones o adjuntar detalles adicionales al informe
antd env --format json

# Paso 1: Vista previa para revisión del usuario
antd bug --title "DatePicker falla al seleccionar fecha" \
  --reproduction "https://codesandbox.io/s/xxx" \
  --steps "1. Abrir DatePicker 2. Hacer clic en una fecha" \
  --expected "Se selecciona la fecha" \
  --actual "El componente falla con un error" \
  --format json

# Paso 2: Mostrar al usuario, pedir confirmación

# Paso 3: Enviar después de que el usuario confirme
antd bug --title "DatePicker falla al seleccionar fecha" \
  --reproduction "https://codesandbox.io/s/xxx" \
  --steps "1. Abrir DatePicker 2. Hacer clic en una fecha" \
  --expected "Se selecciona la fecha" \
  --actual "El componente falla con un error" \
  --submit

10. Reportar problemas de la CLI

Cuando el usuario te pida reportar un error de la CLI, o solicite explícitamente ayuda para presentar uno:

# Vista previa del informe de error para el usuario
antd bug-cli --title "antd info Button devuelve props incorrectas para v5.12.0" \
  --description "Al consultar las props de Button para la versión 5.12.0, la salida incluye props que no existen en esa versión" \
  --steps "1. Ejecutar: antd info Button --version 5.12.0 --format json" \
  --expected "Props que coinciden con la API de Button en antd 5.12.0" \
  --actual "Las props incluyen 'classNames' que se añadió en 5.16.0" \
  --format json

Muestra el informe al usuario y confirma antes de enviar:

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

Opt-out: Si la variable de entorno ANTD_NO_AUTO_REPORT=1 está configurada, omite todas las sugerencias de reporte de errores por completo — no sugieras antd bug ni antd bug-cli a menos que el usuario lo pida directamente.

11. Actualizar la CLI

Cuando el usuario quiera actualizar @ant-design/cli a la última versión, o cuando aparezca un aviso de "Update available":

# Actualizar a la última versión (detecta automáticamente el gestor de paquetes)
antd upgrade

El comando detecta qué gestor de paquetes instaló la CLI (npm, yarn, pnpm, bun, cnpm, utoo) y ejecuta el comando de actualización apropiado. Si la detección falla, sugiere el comando manual.

12. Usar como servidor MCP

Si trabajas en un IDE que soporta MCP (Claude Desktop, Cursor, etc.), la CLI también puede ejecutarse como un servidor MCP, exponiendo todas las herramientas de consulta de conocimiento directamente:

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

Esto proporciona 8 herramientas (antd_list, antd_info, antd_doc, antd_demo, antd_token, antd_design_md, antd_semantic, antd_changelog) y 2 prompts (antd-expert, antd-page-generator) a través del protocolo MCP.

Banderas Globales

Bandera	Propósito
--format <formato>	Formato de salida: json, text o markdown (los agentes deben preferir json)
--version <v>	Especificar una versión de antd (por ejemplo, 5.20.0)
--lang zh	Salida en chino (predeterminado: en)
--detail	Incluir campos adicionales (description, since, deprecated, FAQ)
-V, --cli-version	Imprimir la versión de la CLI y salir

Reglas Clave

1. Siempre consulta antes de escribir — No adivines las APIs de antd de memoria. Ejecuta antd info primero.
2. Usa la versión del usuario — Las consultas de conocimiento (list/info/doc/demo/token/semantic/changelog) soportan antd v4+. Si el proyecto usa antd 4.x/5.x/6.x, pasa --version 4.24.0 / 5.24.0 / 6.x. Para proyectos con antd v3, usa primero antd migrate 3 4.
3. Usa --format json — Todos los comandos lo soportan. Analiza la salida JSON en lugar de usar expresiones regulares sobre la salida de texto.
4. Verifica antes de sugerir una migración — Ejecuta antd changelog <v1> <v2> y antd migrate antes de aconsejar sobre actualizaciones de versión.
5. Lintea después de cambios — Después de escribir o modificar código antd, ejecuta antd lint en los archivos modificados para detectar uso obsoleto o problemático.
6. Reporta errores de antd — Cuando el usuario pida reportar un error de antd, usa antd bug. Siempre previsualiza primero, obtén confirmación del usuario y luego envía.
7. Reporta problemas de la CLI — Cuando el usuario pregunte sobre un problema de la CLI, usa antd bug-cli para ayudarle a presentar un informe. Siempre previsualiza primero, obtén confirmación del usuario y luego envía.