Système de Design pour Applications Web Ant Design (Priorité Back-Office)

Ce skill fournit un ensemble éprouvé d'implémentations basées sur React 19 + TypeScript + Ant Design 6, ainsi qu'un modèle complet et exécutable. Son cœur n'est pas un ensemble de pages, mais :

Un système de design configurable conforme aux Design Tokens officiels d'Ant Design ;
Deux coques d'application interchangeables (latérale / supérieure) ;
Un ensemble de recettes de pages éprouvées couvrant 36 types d'interfaces (back-office, portail, documentation, tableau de bord, AI workbench, etc.) ;
Une règle impérative de réutilisation des composants : d'abord chercher dans antd / les bibliothèques existantes / les composants déjà présents, avant de coder sur mesure.

L'objectif est de produire une expérience visuelle « Ant Design native » : composants, espacements, états et thèmes proviennent d'Ant Design, sans recréer un système de design par-dessus.

Au chargement du skill, le bloc de ressources fournit le chemin absolu de ce skill. Ci-dessous, <SKILL_DIR> représente ce chemin. Remplacez-le par le chemin réel avant d'exécuter les commandes. Le répertoire du skill contient :

SKILL.md
design.md                               # Langage de design lisible par machine (implémentation du design.md officiel)
scripts/scaffold.mjs                    # Génération du projet en une commande (renommage + installation optionnelle)
scripts/scan-ui.mjs                     # Scan des composants/dépendances/utilisation d'antd dans le projet, avant tout code UI
scripts/fetch-antd-docs.mjs             # Rafraîchissement des snapshots de documentation des composants selon la version d'antd du projet
scripts/check-antd-docs.mjs             # Auto-vérification initiale : version d'antd du projet vs snapshots de documentation
assets/template/                        # Modèle complet et exécutable (sans node_modules / dist)
assets/preview/                         # Captures d'écran
references/antd-official.md            # Langage de design officiel et informations de base d'Ant Design (intégré directement)
references/for-agents.md                # Prompt officiel For Agents, CLI / MCP / workflow LLMs
references/ecosystem.md                 # Bibliothèque d'écosystème officielle et recommandations communautaires, ordre de sélection
references/antd-design-language.md      # Langage de design officiel, Tokens, configuration
references/component-reuse.md           # Obligation : recherche de réutilisation, mappage des composants antd, règles personnalisées
references/app-patterns/README.md       # Index des modèles : lisez d'abord celui-ci, choisissez-en un
references/app-patterns/_common.md      # Coque générique / largeur / densité / états / vérification
references/app-patterns/*.md            # 36 fichiers de modèles, lisez uniquement ceux correspondant à la tâche
references/architecture.md              # Provider, authentification, coque, couche de service
references/fullstack-design.md          # Séparation front-end/back-end, contrat API, modèle de données, appartenance des états React
references/backend-design.md            # Paradigme back-end : couches, authentification, transactions, idempotence, audit, sécurité
references/ant-motion.md                # Spécifications d'animation Ant Motion, intégration des composants, performance et accessibilité
references/code-quality.md              # Conventions de code front-end Alibaba + checklist de qualité et de revue pour React 19/TS
references/components/README.md         # Index des 36 snapshots de documentation des composants (lire 1-2 au besoin)
references/components/manifest.json     # Version des snapshots, taille des fichiers et SHA-256, base de l'auto-vérification
references/components/*.md              # Snapshots de documentation des composants antd 6.7.0 en chinois
references/ux-scenarios.md              # Scénarios UI/UX : chargement/vide/erreur/opérations par lots/tâches longues/permissions, etc.
references/page-recipes.md              # Recettes : liste, fenêtre modale, détail, permissions, tableau de bord
references/design-rules.md              # Règles visuelles et d'interaction

Limites d'Appel (Prioritaires sur les Recettes Ci-dessous)

Utilisation explicite uniquement : Ce skill ne peut être chargé et exécuté que si l'utilisateur demande explicitement l'utilisation du langage de design Ant Design / antd, ou mentionne $antd-admin-template. Si l'utilisateur définit explicitement « Le travail de design doit utiliser ce skill » pour un projet spécifique, le fichier AGENTS.md du projet peut enregistrer cette autorisation continue ; le travail de design de ce projet doit alors lire et utiliser ce skill comme aide. Les autres projets n'héritent pas de cette exception.
La conception front-end générale, les panneaux d'administration, la documentation, les portails, les tableaux de bord, les opérations CRUD, la configuration de thème, le refus de Tailwind, ou le fait qu'un projet dépende déjà d'antd ne constituent pas une autorisation d'appel. Ne sélectionnez pas ce skill de votre propre chef en raison de ces mots-clés.
L'autorisation est déterminée en fonction du périmètre de la tâche en cours. Un appel n'implique pas que toutes les tâches de conception futures utiliseront antd ; l'autorisation continue d'un projet n'est valable que dans son périmètre explicitement défini ; mentionner, installer ou examiner ce skill ne signifie pas qu'il doit être utilisé pour concevoir l'interface.
Respectez le positionnement produit, les fichiers DESIGN.md, AGENTS.md, le système de composants et le gestionnaire de paquets des projets existants ; n'utilisez que les références nécessaires dans le cadre de l'autorisation, ne migrez pas automatiquement le langage de design et ne copiez pas le modèle entier.
Les recettes de pages et les critères de validation pour les nouveaux projets ci-dessous sont à adopter selon les besoins réels ; pour les modifications partielles de projets existants, n'imposez pas de connexion, de RBAC, de multiples pages métier, de paramètres de conception ou de coque d'administration. N'imposez pas BasicLayout pour les pages de portail et de marketing.
Dans agents/openai.yaml, définissez policy.allow_implicit_invocation: false. Ne modifiez pas pour un appel automatique, et n'installez pas dans un répertoire de skill partagé entre outils.

Sources d'Inspiration et de Référence

L'organisation de ce skill, conçue pour être compatible avec les IA, s'inspire de la page For Agents officielle d'Ant Design : permettre à l'agent de consulter les connaissances des composants de la version réelle, plutôt que de deviner les API basées sur la mémoire d'entraînement ; et s'inspire également de LLMs.txt et de design.md pour fournir les connaissances des composants, la structure sémantique et le langage de design sous forme de ressources consultables à la demande.

Il s'agit d'un skill communautaire organisé indépendamment, et non d'un skill officiel d'Ant Design ou d'un projet approuvé par Ant Design. Les snapshots sont des références archivées, ne représentant pas la dernière version actuelle ; lors de l'utilisation, vérifiez la dépendance réelle du projet cible. Les droits d'auteur et les licences des documents officiels intégrés sont disponibles dans THIRD_PARTY_NOTICES.md.

Critères de Livraison

Voici les points de vérification de référence pour une nouvelle application complète ; adaptez-les en fonction du type d'application autorisée et de son périmètre. Pour les projets existants, respectez leurs propres contraintes :

pnpm typecheck et pnpm build réussissent tous deux.
Le type d'application et la coque correspondent : back-office → navigation latérale ; portail/outil → navigation supérieure ; largeur et densité du contenu raisonnables.
Pour un back-office complet nécessitant identité et gestion des permissions, fournissez connexion, layout protégé, pages métier et pages 403/404 ; pour du contenu public ou des modifications partielles, n'imposez pas ces structures.
Utilisable normalement aux largeurs 1440px et 390px ; sur mobile, la barre latérale devient un tiroir.
Thème clair/sombre, couleur principale, disposition de navigation, largeur du contenu, densité, bords arrondis configurables et persistants.
N'introduisez pas Tailwind, shadcn ou une deuxième bibliothèque de composants ; les couleurs proviennent des Tokens.
Le texte des pages est dans la langue de l'utilisateur (par défaut, le chinois).
Pour les nouveaux domaines, délimitez les frontières front-end/back-end, le contrat API et le modèle de données ; si vous utilisez des mocks, indiquez clairement les points de remplacement.
Les pages asynchrones couvrent les états : loading / empty / error / forbidden ; les opérations dangereuses nécessitent une double confirmation, les tâches longues sont traçables.
Avant d'écrire une page, lisez design.md ; vérifiez l'API des composants via la CLI officielle ou la documentation correspondant à la version (indiquez la version si pas de CLI).
Dans un projet existant, exécutez d'abord l'auto-vérification des snapshots de documentation des composants ; si les versions diffèrent, rafraîchissez d'abord ou expliquez clairement les différences, n'utilisez pas d'anciens snapshots pour simuler l'API actuelle.
Le code respecte references/code-quality.md : pas de any paresseux, dépendances Hooks complètes, gestion des états/erreurs/permissions complète, pas de surcharge profonde .ant-* ; si un script lint existe, lint doit réussir.
Les animations respectent references/ant-motion.md : back-office ≤ 300ms au niveau composant, support de prefers-reduced-motion ; n'introduisez pas d'anciennes bibliothèques d'animation rc-* à des fins décoratives.

Base Officielle Ant Design (Intégrée Directement)

antd est une bibliothèque de composants React basée sur le système de design Ant Design, adaptée aux applications back-office d'entreprise et aux sites de bureau. Le modèle actuel utilise antd 6.7 + @ant-design/icons 6.3 + React 19. antd 6 requiert React >= 18, ne supporte que les navigateurs modernes, active les variables CSS par défaut, et supporte SSR et Electron.

Les quatre valeurs fondamentales du design :

Naturel : Intuitif, réduit la charge cognitive ; peu d'inventions, peu de décorations.
Déterministe : Composants, Tokens et motifs de page uniformes, cohérents d'une page à l'autre.
Sensé : Chaque interface sert un objectif de travail clair, action principale unique, retour immédiat.
Croissant : Composable et extensible, évolue avec le métier et l'utilisateur.

Base visuelle (norme officielle) :

Élément	Base
Planche / Grille	1440px ; grille de base 4px, rythme principal 8px ; grille 24 colonnes
Police principale	14px / 22px ; pile de polices système ; graisses 400/600
Couleur principale	`#1677ff` (6ème couleur de la palette bleue de base)
Couleurs fonctionnelles	Succès `#52c41a` / Avertissement `#faad14` / Erreur `#ff4d4f`
Couleurs neutres	88% / 65% / 45% / 25% ; bordure `#d9d9d9` ; arrière-plan `#f5f5f5`
Bords arrondis	2 / 4 / 6 / 8 ; base 6
Espacements	4 / 8 / 16 / 24 / 32 (grille 4px)
Disposition	G / D (navigation fixe) ou H / B (contenu central extensible)
Animations	Sobres, 0.1–0.3s ; pas d'animations décoratives en back-office

Trois couches de Tokens : Seed (couleur de marque, bords arrondis, taille de police) → Map (couleurs dérivées, texte, bordure) → Alias (niveau composant). Les pages lisent uniquement theme.useToken(), sans coder en dur les valeurs visuelles.

Écosystème officiel (détails dans references/ecosystem.md) :

Bibliothèque	Usage
`antd` + `@ant-design/icons`	Composants et icônes principaux (antd 6 ↔ icons 6)
`@ant-design/pro-components`	ProLayout / ProTable / ProForm ; v2.x stable peer encore antd ^5, antd 6 nécessite 3.x beta et version verrouillée
`@ant-design/charts`	Graphiques statistiques complexes ; pas de peer antd, thème à aligner manuellement
`@ant-design/x` + `@ant-design/x-markdown`	Dialogue IA / Copilot / Markdown streaming ; peer `antd ^6.1.1`
`@xyflow/react`	Workflow / toile topologique ; remplace Pro Flow dont le peer est encore v5 sous antd 6
`antd-mobile`	H5 mobile (gamme de produits indépendante)
`antd-mini`	Mini-programmes Alipay / WeChat
`@ant-design/web3`	Web3 / Portefeuille
Ant Design CLI	Vérification de projet et migration v5→v6
Ant Motion / Landing / Pro	Animations, modèles de page d'accueil, échafaudage complet

Pour la sélection de l'écosystème, la matrice de versions, la taille et la compatibilité, voir references/ecosystem.md. Ne rétrogradez pas antd à la v5 pour un seul Table ; n'installez pas Pro Flow / Pro Chat / Pro Editor directement sur antd 6.

Contrat de design : design.md est la version lisible par machine ; lisez-le avant d'écrire une page. Le tableau visuel de ce fichier est un résumé ; en cas de conflit, référez-vous à design.md et à la version réelle d'antd du projet.

Liens officiels : ant.design · Valeurs de design · Couleurs · Disposition · Polices · Recommandations communautaires · CLI · For Agents · design.md.

Norme Officielle For Agents (Obligatoire)

La documentation officielle précise : La version actuelle peut contenir des modifications cassantes ; les API des composants, les conventions et la structure des fichiers peuvent différer des données d'entraînement. Avant d'écrire du code, lisez les spécifications. N'écrivez pas d'API antd de mémoire.

Avant d'écrire une quelconque UI :

Lisez design.md et references/for-agents.md.
Vérifiez la version réelle du projet : antd info --version, ou lisez package.json.

Consultez l'API des composants et les démos exécutables :

npx -y @ant-design/cli info <Component> --format json
npx -y @ant-design/cli demo <Component> <demo-name>
npx -y @ant-design/cli token <Component> --format json
npx -y @ant-design/cli semantic <Component> --format json

Si l'installation d'un skill officiel est possible, exécutez npx skills add ant-design/ant-design-cli ; pour l'intégration MCP, voir references/for-agents.md.
Avant la livraison, exécutez si possible npx -y @ant-design/cli lint ./src ; puis pnpm typecheck && pnpm build.

Ordre de débogage : antd env → antd doctor → antd info --version → antd lint. Ordre de migration : antd migrate → antd changelog → antd lint. Sans CLI, utilisez https://ant.design/components/<name>.md et le design.md local comme solution de repli, et mentionnez la version réelle dans la livraison.

Le texte intégral du prompt officiel, la table complète des commandes, la configuration MCP et la procédure de repli sont disponibles dans references/for-agents.md.

CLI tout au long du cycle de vie :

Phase	Commande	Objectif
Alignement du design	`npx -y @ant-design/cli design.md`	Obtenir le langage de design de la version actuelle ; comparer avec `design.md` de ce skill
Sélection / vérification API	`info` / `demo` / `token` / `semantic`	Voir d'abord les vraies props, démos exécutables, tokens de composants et DOM sémantique
Écriture de code	Lire `references/components/<component>.md`	Solution de repli hors ligne ; lire seulement 1-2 composants ciblés
Vérification de livraison	`lint` + `typecheck` + `build`	Vérifier les API obsolètes, les types et la construction ensemble
Migration	`migrate` → `changelog` → `lint`	v5→v6 ou mise à niveau inter-version
Diagnostic	`env` → `doctor` → `info --version` → `usage`	Environnement, version, utilisation des composants

Animations et Qualité du Code (Obligatoire)

Animations

Avant d'écrire des transitions / entrées / effets de défilement, lisez references/ant-motion.md. Stratégie par défaut :

Back-office / Outil / SaaS : Utilisez uniquement les animations intégrées d'antd + tokens CSS ; 100/200/300ms au niveau composant, pas plus de 300ms au niveau page ; pas de transitions plein écran.
Portail / Site vitrine / Page d'événement : Quelques animations narratives, 150/300/450/600ms au niveau page ; une seule timeline principale par écran.
Bibliothèque Ant Motion : rc-tween-one / rc-queue-anim / rc-scroll-anim / rc-banner-anim ne sont plus maintenus depuis 2022, leur peer n'est pas déclaré pour React 19, et ils dépendent de findDOMNode ; ne les installez pas par défaut dans un back-office antd 6. Si des animations marketing sont nécessaires, verrouillez la version, faites une validation réelle dans le navigateur et préparez une solution de repli CSS / IntersectionObserver.
Supportez obligatoirement prefers-reduced-motion ; n'utilisez pas d'animation pour porter une information unique ; ne laissez pas les animations bloquer les entrées, le routage ou le chargement.

Qualité du Code

Avant d'écrire du code, lisez references/code-quality.md. Ce fichier adapte les conventions de nommage, TypeScript, React Hooks, l'accessibilité et les normes d'ingénierie des règles front-end Alibaba à React 19 + antd 6 :

Utilisez strict + pas de any paresseux ; pas de @ts-ignore ou d'assertions non nulles sans raison.
Composants fonctionnels + appels Hooks au niveau supérieur ; tableaux de dépendances complets ; pas d'effect pour dériver l'état.
Clés de liste stables ; pages asynchrones couvrant les cinq états ; confirmation pour les opérations dangereuses ; données serveur hors du store global.
Couleurs / espacements / bords arrondis provenant des tokens ; pas de surcharge .ant-* profonde ; pas de débordement horizontal à 390px.
Éléments interactifs accessibles au clavier, focus visible et nom lisible ; contraste conforme WCAG AA.
Si le projet a un linter, exécutez pnpm lint / pnpm stylelint avant la livraison ; s'il n'y a pas de linter, effectuez une revue manuelle selon code-quality.md §11, et mentionnez « pas de linter configuré » dans les notes de livraison.

Outil facultatif :

npx f2elint
# Choisissez React + TypeScript, activez ESLint / Stylelint / Prettier / lint-staged / commitlint selon les besoins

S'il existe déjà une configuration ESLint/Stylelint, ne l'écrasez pas, fusionnez d'abord les règles ; les règles de la documentation f2e concernant les class component / ReactDOM.render ne s'appliquent pas à React 19.

Auto-Vérification Initiale (À Faire en Entrant dans un Projet Existant)

Le skill intègre 36 snapshots de documentation des composants d'antd 6.7.0 en chinois, situés dans references/components/. La version d'antd du projet peut être différente. Ne présumez pas que le snapshot est l'API actuelle.

# 1) Alignez la version d'antd installée dans le projet avec les snapshots
node <SKILL_DIR>/scripts/check-antd-docs.mjs <répertoire-du-projet>

# 2) En cas de divergence, rafraîchissez selon la version du projet (nécessite la CLI officielle ; vous pouvez spécifier une CLI locale si le réseau/sandbox est limité)
node <SKILL_DIR>/scripts/fetch-antd-docs.mjs --project <répertoire-du-projet>
# Ou explicitement : --version 6.7.0

Code de sortie 0 : Version identique et les 36 fichiers ont une taille/hash complets.
Code de sortie 1 : Version différente ou fichiers modifiés ; rafraîchissez comme indiqué, ou alignez la version d'antd du projet sur la version du snapshot.
Code de sortie 2 : Impossible de déterminer la version d'antd du projet ; exécutez d'abord pnpm install, ou passez --target.
Si la CLI échoue à écrire dans HOME dans un sandbox/CI, définissez ANTD_CLI_HOME=/tmp/antd-home ; si une CLI locale existe, utilisez ANTD_CLI_BIN=/path/to/antd.
Après l'auto-vérification, lisez l'index dans references/components/README.md et ouvrez seulement 1-2 composants nécessaires à la tâche en cours, ne chargez pas tout en masse.

Barrière de Réutilisation des Composants (Obligatoire, Avant Tout Code UI)

Avant d'écrire du JSX, vous devez effectuer les étapes suivantes dans l'ordre :

Scannez le projet : Exécutez node <SKILL_DIR>/scripts/scan-ui.mjs <répertoire-du-projet> pour voir les dépendances UI installées, les composants existants dans src/components / src/layouts, et la fréquence d'utilisation d'antd.
Recherchez les composants existants : Utilisez les outils de recherche dans src/components, les répertoires fonctionnels et les pages similaires ; réutilisez plutôt que de recréer.
Vérifiez antd : Vérifiez si Table / Form / Modal / Drawer / Descriptions / Tree / Upload / Empty / Result, etc., sont déjà couverts ; si la CLI est disponible, exécutez d'abord antd info <Component> / antd demo <Component>, puis sélectionnez selon la table de mappage dans references/component-reuse.md.
Vérifiez les extensions officielles : @ant-design/pro-components, @ant-design/charts, @ant-design/x, antd-mobile ; puis envisagez des bibliothèques tierces matures.
Enfin seulement, créez du code sur mesure : Placez-le dans src/components, utilisez theme.useToken(), et expliquez pourquoi la réutilisation n'était pas possible.

Ignorer les étapes 1-4 et écrire directement des menus déroulants, tableaux, fenêtres modales, interrupteurs, sélecteurs de date, toasts ou états vides est considéré comme incomplet. Lors de la livraison, vous devez indiquer « ce qui a été réutilisé / quels nouveaux composants sur mesure ont été ajoutés ».

Règles détaillées, mappage des composants et anti-patrons : voir references/component-reuse.md.

Workflow

0. Auto-Vérification Initiale

En entrant dans un projet existant, exécutez d'abord :

node <SKILL_DIR>/scripts/check-antd-docs.mjs <répertoire-du-projet>

En cas d'échec, rafraîchissez les snapshots ou alignez d'abord la version d'antd ; n'écrivez pas d'API de composant avec un décalage de version. Pour un nouveau projet, exécutez-le après scaffold et une fois les dépendances installées.

1. Alignez d'Abord Cinq Éléments

Si les informations sont insuffisantes, posez uniquement les questions nécessaires, ne faites pas un interrogatoire :

Nom de la marque : Pour APP_NAME, page de connexion, titre.
Type d'application : Back-office / Portail / SaaS outil / Tableau de bord / Documentation / AI workbench / Kanban / E-commerce / Centre de service / Centre de paramètres, etc.
Objets métier et pages : Par exemple « liste des commandes + détail de la commande + approbation des remboursements ».
Rôles et permissions : Au moins distinguer administrateur et membre ordinaire ; décider si un arbre de permissions est nécessaire.
Source des données : Utiliser d'abord un mock en mémoire, ou se connecter directement à une vraie API.

Si les informations sont suffisantes, commencez directement, ne restez pas bloqué à l'étape de la proposition.

2. Définissez l'Architecture, le Modèle de Données et les Limites d'État React

Si une vraie API back-end, de nouveaux objets métier ou des interactions complexes sont impliqués, lisez d'abord references/fullstack-design.md ; pour concevoir/réviser le back-end, lisez également references/backend-design.md, puis écrivez les pages. Produisez au moins :

3 à 6 entités principales : Relations, contraintes d'unicité, isolation locataire, machine d'état, champs d'audit.
Contrat API : Liste/détail/opérations d'écriture, pagination, codes d'erreur, idempotence, contrôle de concurrence.
Appartenance des états : Quoi mettre dans l'URL (filtres/pagination), cache serveur, formulaires, UI locale, session globale.
Contraintes back-end : Authentification côté serveur, limites de transaction, clé d'idempotence, verrouillage optimiste, table d'audit, ne pas divulguer d'informations internes en cas d'erreur.
Signature du mock : Implémentez d'abord selon la forme réelle de l'API, remplacez seulement l'intérieur du service ultérieurement.

Écrire du JSX sans contrat est considéré comme incomplet. Les permissions front-end ne sont qu'une couche d'affichage ; le serveur doit ré-authentifier. La validation back-end suit la liste de backend-design.md §14.

3. Choisissez la Coque et les Préréglages

Suivez d'abord les quatre questions de references/app-patterns/README.md pour choisir le type ; lisez uniquement les fichiers de type correspondants + _common.md, ne chargez pas tout en masse :

Type	Préréglage / Coque	Largeur	Densité	Recette de page
Back-office / Opérations	Back-office standard · Latérale	Fluide	Par défaut	Liste + détail + permissions
Portail / Site vitrine	Portail · Supérieure	Fixe 1200	Large	Premier écran + fonctionnalités + CTA
SaaS outil	Supérieure · Personnalisée	Fluide/fixe	Compacte	Espace de travail + historique + paramètres
Tableau de bord / Monitoring	Dense en données · Latérale/sans coque	Fluide	Compacte	Indicateurs + graphiques + classement
Documentation / Base de connaissances	Portail · Supérieure	Fixe	Par défaut	Arbre gauche + contenu + sommaire droit
Projet / Kanban	Back-office standard · Latérale	Fluide	Compacte	Colonnes Kanban horizontales
Dialogue IA / Copilot	Supérieure / Sans coque	Fixe/fluide	Par défaut	Session + flux de messages + contexte
E-commerce / Produits	Portail · Supérieure	Fixe	Par défaut	Grille de produits + détail + paiement
Service client / Tickets	Dense en données · Latérale	Fluide	Compacte	File d'attente + session + détail
Connexion / Intégration	Sans coque	Fixe 420/720	Par défaut	Formulaire + Steps

Pour ≤ 5 modules de premier niveau, privilégiez la navigation supérieure ; pour plus de modules nécessitant des changements fréquents, utilisez la navigation latérale. Ne faites pas de « toutes les applications » un back-office avec barre latérale. La liste complète des 36 types, les schémas de disposition et la sélection des composants sont disponibles dans references/app-patterns/README.md.

Protocole de lecture à la demande :

Localisez le type uniquement dans le tableau principal du README.md, n'ouvrez pas d'abord les fichiers de type.
Lisez _common.md une fois pour déterminer la coque, la largeur, la densité et les états génériques.
Ouvrez seulement 1 fichier de type correspondant ; pour un type mixte, au maximum 2, et expliquez la raison de la combinaison.
Si un squelette de code est nécessaire, lisez ensuite page-recipes.md, n'inventez pas à partir de zéro.
Ne prétendez pas avoir lu des fichiers de type que vous n'avez pas ouverts dans la livraison.

4. Générez le Projet

# Remplacez <SKILL_DIR> par le chemin absolu fourni dans le bloc de ressources du skill
node <SKILL_DIR>/scripts/scaffold.mjs <répertoire-cible> --name "<Nom de la marque>"
# Pour installer les dépendances en même temps :
node <SKILL_DIR>/scripts/scaffold.mjs <répertoire-cible> --name "<Nom de la marque>" --install

Le script copie le modèle, remplace APP_NAME, le nom du paquet et le préfixe localStorage. Ne contournez pas le script en copiant manuellement le modèle puis en renommant fichier par fichier.

Après la génération, exécutez d'abord :

cd <répertoire-cible>
pnpm typecheck
pnpm dev

Connectez-vous avec le compte de démonstration admin / admin123 pour confirmer que la base est utilisable avant de modifier le métier.

5. Modifiez la Marque et l'Architecture de l'Information

Nom de la marque : APP_NAME dans src/config/constants.ts (déjà écrit par le script).
Design par défaut : DEFAULT_APP_CONFIG et DESIGN_PRESETS dans src/config/design.ts.
Menu : siderMenuItems dans src/config/menu.tsx ; recherche rapide : appPages dans le même fichier.
Routage : src/router/index.tsx ; chaque route métier doit avoir handle: { title: 'Nom de la page' }.
Compte de démonstration : src/services/auth.ts.

Le menu et le routage doivent être synchronisés : la key de l'élément de menu est égale au chemin de la route, sinon la mise en surbrillance et la navigation échoueront.

6. Ajustez la Configuration du Design

La configuration par défaut et les préréglages sont centralisés dans src/config/design.ts :

interface AppConfig {
  mode: 'light' | 'dark' | 'system';
  primaryColor: string;
  navLayout: 'side' | 'top';
  siderTheme: 'dark' | 'light';
  contentWidth: 'fluid' | 'fixed';
  density: 'compact' | 'default' | 'comfortable';
  borderRadius: number;
  grayMode: boolean;
}

Pour modifier le type par défaut du produit : modifiez DEFAULT_APP_CONFIG.
Pour modifier les combinaisons recommandées : modifiez DESIGN_PRESETS.
Pour ajouter un nouvel élément de configuration : étendez AppConfig → ajoutez une valeur par défaut → exposez un setter dans AppConfigContext → ajoutez un contrôle dans DesignDrawer → consommez-le dans App.tsx / le layout.
La configuration est persistée dans localStorage (par défaut nova-admin:design).
Si le produit ne permet pas à l'utilisateur de modifier la disposition, retirez le Segmented correspondant de DesignDrawer, ne masquez pas tout le panneau.

7. Implémentez les Pages Métier

Écrivez selon le squelette de references/page-recipes.md, ne réinventez pas à chaque fois :

Page liste = PageContainer + Card de filtre + Card de tableau (barre d'outils, opérations par lots, pagination).
Nouveau / Édition = Composant Modal indépendant + validation Form + appel à la couche service.
Page détail = Descriptions + Timeline + Tag d'état.
Tableau de bord = Cartes d'indicateurs + graphiques + enregistrements récents ; le modèle inclut des graphiques SVG sans dépendance.
Permissions = Tableau des rôles + tiroir Tree de permissions.
Page portail / outil = Navigation supérieure + contenu à largeur fixe ; les blocs marketing peuvent être construits sur mesure, mais utilisez toujours les Tokens et les composants antd.
Avant d'utiliser un composant, vérifiez son API dans references/components/README.md ou via la CLI officielle ; lisez seulement le composant concerné, n'écrivez pas les props de mémoire.
Pour les détails d'interaction, choisissez un scénario dans references/ux-scenarios.md : couvrez d'abord les cinq états, puis ajoutez les opérations par lots, les tâches longues, les conflits, les demandes de permissions, etc.
Pour les animations, suivez references/ant-motion.md : back-office par défaut seulement des feedbacks de 100-300ms au niveau composant ; pas d'entrée ligne par ligne, de parallaxe ou de transitions plein écran.
Pour la qualité du code, suivez references/code-quality.md : vérifiez les types, Hooks, l'accessibilité, la gestion des erreurs, la dénomination et les limites des fichiers en même temps ; n'entassez pas d'abord les pages pour revenir les corriger ensuite.
Le modèle inclut trois exemples d'extension : /welcome portail/site vitrine, /workspace/board kanban projet, /docs centre de documentation ; vous pouvez les utiliser comme référence pour des adaptations vers les types IA, e-commerce, service client, CRM, RH, Finance, IoT, etc.

Lorsque vous ajoutez des données de domaine, mettez à jour simultanément src/types, src/…

8. Vérification Avant Livraison

# 1) Vérification du lint (si configuré)
pnpm lint

# 2) Vérification des types
pnpm typecheck

# 3) Construction
pnpm build

# 4) (Optionnel) Vérification des composants antd via CLI
npx -y @ant-design/cli lint ./src

# 5) Vérification de l'accessibilité (si un outil est configuré)
# axe-core, Lighthouse, etc.

Si une étape de vérification manque (ex. pas de lint), mentionnez-le dans les notes de livraison.

Avant la livraison, vérifiez également :

Les mots de passe codés en dur sont remplacés par des variables d'environnement ou une entrée utilisateur.
Les clés API / tokens / secrets ne sont pas exposés dans le front-end.
Les dépendances inutilisées sont supprimées.
Le fichier THIRD_PARTY_NOTICES.md est mis à jour si de nouvelles dépendances sont ajoutées.

9. Notes de Livraison

Chaque livraison doit inclure :

Ce qui a été fait : Pages, composants, fonctionnalités implémentées.
Ce qui a été réutilisé : Liste des composants antd, composants existants, extensions officielles utilisés.
Ce qui a été créé sur mesure : Nouveaux composants, explication de pourquoi la réutilisation n'était pas possible.
Ce qui n'est pas couvert : Limites connues, scénarios non traités.
Configuration du design : Thème, disposition, densité, largeur choisis.
Source des données : Mock ou API réelle ; si API, documentez le contrat.
Version d'antd : Version réelle du projet ; si différente de la version du snapshot, expliquez les différences.
Déviations par rapport aux standards : Toute décision de conception ou d'implémentation s'écartant des recommandations de ce skill.

Licence et Informations Légales

Ce skill est distribué sous licence MIT. Voir le fichier LICENSE pour plus de détails.

Les documents officiels d'Ant Design inclus dans le répertoire references/ sont soumis à leurs propres licences. Voir THIRD_PARTY_NOTICES.md pour les détails.

Documentation générée et maintenue par le skill lzhbhlrPython/antd-admin-template.

lzhbhlrPython/antd-admin-template

Qu'est-ce que antd-admin-template ?

Demander à votre IA préférée

Documentation