Système d'Interface Personnelle - 0xAlchemist-cs

Ant Design CLI

Vous avez accès à @ant-design/cli — un outil CLI local avec les métadonnées antd intégrées pour les versions v4/v5/v6 (ainsi que les guides de migration pour v3 → v4, v4 → v5, v5 → v6). Utilisez-le pour interroger les connaissances des composants, analyser des projets et guider les migrations. Toutes les données sont hors ligne, aucune connexion réseau nécessaire.

Configuration

Avant la première utilisation, vérifiez si la CLI est installée. Sinon, installez-la automatiquement :

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

Après avoir exécuté une commande, si la sortie contient un avis « Update available », exécutez antd upgrade pour mettre à jour avant de continuer.

Utilisez toujours --format json pour une sortie structurée que vous pouvez analyser par programme.

Scénarios

1. Écrire du code de composant antd

Avant d'écrire du code de composant antd, consultez d'abord son API — ne vous fiez pas à la mémoire.

# Vérifier les props disponibles
antd info Button --format json

# Obtenir une démo fonctionnelle comme point de départ
antd demo Button basic --format json

# Vérifier les noms de classes sémantiques / styles pour un style personnalisé
antd semantic Button --format json

# Vérifier les jetons de design au niveau du composant pour le thème
antd token Button --format json

# Obtenir le langage de design global (design.md) : couleurs, typographie, espacement, rayon + principes
antd design.md --format json

Flux de travail : antd info → comprendre les props → antd demo → récupérer un exemple fonctionnel → écrire du code.

2. Consulter la documentation complète

Lorsque vous avez besoin de la documentation complète d'un composant (pas seulement les props) :

antd doc Table --format json        # documentation markdown complète pour Table
antd doc Table --lang zh            # documentation en chinois

3. Déboguer des problèmes antd

Lorsque le code ne fonctionne pas comme prévu ou que l'utilisateur signale un bug antd :

# Collecter un instantané complet de l'environnement (système, dépendances, navigateurs, outils de build)
antd env --format json

# Vérifier si la prop existe pour la version antd de l'utilisateur
antd info Select --version 5.12.0 --format json

# Vérifier si la prop est obsolète
antd lint ./src/components/MyForm.tsx --format json

# Diagnostiquer les problèmes de configuration au niveau du projet
antd doctor --format json

Flux de travail : antd env → capturer l'environnement complet → antd doctor → vérifier la configuration → antd info --version X → vérifier l'API par rapport à la version exacte de l'utilisateur → antd lint → trouver les utilisations obsolètes ou incorrectes.

4. Migrer entre les versions

Lorsque l'utilisateur souhaite mettre à niveau antd (par exemple, v3 → v4 ou v4 → v5) :

# Obtenir la checklist de migration complète
antd migrate 3 4 --format json    # v3 → v4
antd migrate 4 5 --format json    # v4 → v5

# Vérifier la migration pour un composant spécifique
antd migrate 4 5 --component Select --format json

# Générer une invite de migration automatique adaptée à l'agent (ne modifie pas les fichiers)
antd migrate 4 5 --apply ./src --format json

# Voir ce qui a changé entre deux versions
antd changelog 4.24.0 5.0.0 --format json

# Voir les changements pour un composant spécifique
antd changelog 4.24.0 5.0.0 Select --format json

Flux de travail : antd migrate → obtenir la checklist complète → antd changelog <v1> <v2> → comprendre les changements non rétrocompatibles → appliquer les correctifs → antd lint → vérifier qu'aucune utilisation obsolète ne subsiste.

5. Analyser l'utilisation d'antd dans un projet

Lorsque l'utilisateur souhaite comprendre comment antd est utilisé dans son projet :

# Analyser les statistiques d'utilisation des composants
antd usage ./src --format json

# Filtrer pour un composant spécifique
antd usage ./src --filter Form --format json

# Vérifier les violations des bonnes pratiques
antd lint ./src --format json

# Vérifier uniquement des catégories de règles spécifiques
antd lint ./src --only deprecated --format json
antd lint ./src --only a11y --format json
antd lint ./src --only performance --format json

6. Consulter les changelogs et l'historique des versions

Lorsque l'utilisateur demande ce qui a changé dans une version :

# Changelog d'une version spécifique
antd changelog 5.22.0 --format json

# Plage de versions (les deux incluses)
antd changelog 5.21.0..5.24.0 --format json

7. Explorer les composants disponibles

Lorsque l'utilisateur choisit quel composant utiliser :

# Lister tous les composants avec catégories
antd list --format json

# Lister les composants pour une version antd spécifique
antd list --version 5.0.0 --format json

8. Collecter les informations sur l'environnement

Lorsque vous devez comprendre la configuration antd du projet, ou préparer des informations pour un rapport de bug :

# Instané complet de l'environnement (texte — à coller dans les Issues GitHub)
antd env

# JSON structuré pour une utilisation programmatique
antd env --format json

# Analyser un répertoire de projet spécifique
antd env ./my-project --format json

Collecte : OS, Node, gestionnaires de paquets (npm/pnpm/yarn/bun/utoo), registre npm, navigateurs, dépendances principales (antd/react/dayjs), tous les paquets @ant-design/* et rc-*, et les outils de build (umi/vite/webpack/typescript/etc.).

9. Signaler des bugs antd

Lorsque l'utilisateur vous demande de signaler un bug antd :

# Étape 0 : Collecter les informations sur l'environnement pour référence (facultatif — antd bug intègre déjà l'environnement de base)
# Utilisez la sortie pour recouper les versions ou ajouter des détails supplémentaires au rapport de bug
antd env --format json

# Étape 1 : Prévisualiser pour examen par l'utilisateur
antd bug --title "DatePicker plante lors de la sélection d'une date" \
  --reproduction "https://codesandbox.io/s/xxx" \
  --steps "1. Ouvrir DatePicker 2. Cliquer sur une date" \
  --expected "La date est sélectionnée" \
  --actual "Le composant plante avec une erreur" \
  --format json

# Étape 2 : Montrer à l'utilisateur, demander confirmation

# Étape 3 : Soumettre après confirmation de l'utilisateur
antd bug --title "DatePicker plante lors de la sélection d'une date" \
  --reproduction "https://codesandbox.io/s/xxx" \
  --steps "1. Ouvrir DatePicker 2. Cliquer sur une date" \
  --expected "La date est sélectionnée" \
  --actual "Le composant plante avec une erreur" \
  --submit

10. Signaler des problèmes de CLI

Lorsque l'utilisateur vous demande de signaler un bug de la CLI, ou demande explicitement de l'aide pour en soumettre un :

# Prévisualiser le rapport de bug pour l'utilisateur
antd bug-cli --title "antd info Button renvoie des props incorrectes pour v5.12.0" \
  --description "Lors de l'interrogation des props de Button pour la version 5.12.0, la sortie inclut des props qui n'existent pas dans cette version" \
  --steps "1. Exécuter : antd info Button --version 5.12.0 --format json" \
  --expected "Props correspondant à l'API Button d'antd 5.12.0" \
  --actual "Les props incluent 'classNames' qui a été ajouté en 5.16.0" \
  --format json

Montrez le rapport à l'utilisateur et confirmez avant de soumettre :

antd bug-cli --title "antd info Button renvoie des props incorrectes pour v5.12.0" \
  --description "..." \
  --steps "..." \
  --expected "..." \
  --actual "..." \
  --submit

Désinscription : Si la variable d'environnement ANTD_NO_AUTO_REPORT=1 est définie, ignorez toutes les suggestions de signalement de bugs — ne suggérez pas antd bug ou antd bug-cli sauf si l'utilisateur le demande directement.

11. Mettre à jour la CLI

Lorsque l'utilisateur souhaite mettre à jour @ant-design/cli vers la dernière version, ou lorsqu'un avis « Update available » apparaît :

# Mettre à jour vers la dernière version (détecte automatiquement le gestionnaire de paquets)
antd upgrade

La commande détecte quel gestionnaire de paquets a installé la CLI (npm, yarn, pnpm, bun, cnpm, utoo) et exécute la commande de mise à jour appropriée. Si la détection échoue, elle suggère la commande manuelle.

12. Utilisation en tant que serveur MCP

Si vous travaillez dans un IDE qui prend en charge MCP (Claude Desktop, Cursor, etc.), la CLI peut également fonctionner comme un serveur MCP, exposant tous les outils d'interrogation des connaissances directement :

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

Cela fournit 8 outils (antd_list, antd_info, antd_doc, antd_demo, antd_token, antd_design_md, antd_semantic, antd_changelog) et 2 invites (antd-expert, antd-page-generator) via le protocole MCP.

Indicateurs globaux

Indicateur	Objectif
--format <format>	Format de sortie : json, text ou markdown (les agents devraient préférer json)
--version <v>	Cibler une version antd spécifique (par ex. 5.20.0)
--lang zh	Sortie en chinois (par défaut : en)
--detail	Inclure des champs supplémentaires (description, depuis, obsolète, FAQ)
-V, --cli-version	Afficher la version de la CLI et quitter

Règles clés

1. Toujours interroger avant d'écrire — Ne devinez pas les API antd de mémoire. Exécutez antd info d'abord.
2. Correspondre à la version de l'utilisateur — Les requêtes de connaissance (list/info/doc/demo/token/semantic/changelog) prennent en charge antd v4+. Si le projet utilise antd 4.x/5.x/6.x, passez --version 4.24.0 / 5.24.0 / 6.x. Pour les projets antd v3, utilisez antd migrate 3 4 d'abord.
3. Utilisez --format json — Chaque commande le prend en charge. Analysez la sortie JSON plutôt que d'utiliser des expressions régulières sur la sortie texte.
4. Vérifiez avant de suggérer une migration — Exécutez antd changelog <v1> <v2> et antd migrate avant de conseiller des mises à niveau de version.
5. Lint après les modifications — Après avoir écrit ou modifié du code antd, exécutez antd lint sur les fichiers modifiés pour détecter les utilisations obsolètes ou problématiques.
6. Signaler les bugs antd — Lorsque l'utilisateur demande de signaler un bug antd, utilisez antd bug. Prévisualisez toujours d'abord, obtenez la confirmation de l'utilisateur, puis soumettez.
7. Signaler les problèmes de CLI — Lorsque l'utilisateur demande à propos d'un problème de CLI, utilisez antd bug-cli pour l'aider à déposer un rapport. Prévisualisez toujours d'abord, obtenez la confirmation de l'utilisateur, puis soumettez.