Ant Design Web-Anwendungs-Designsystem (Backoffice priorisiert)

Dieser Skill bietet eine validierte Implementierungsmethode für React 19 + TypeScript + Ant Design 6 sowie eine direkt ausführbare vollständige Vorlage. Sein Kern ist nicht eine bestimmte Seite, sondern:

Ein konfigurierbares Designsystem, das sich an den offiziellen Design-Token von Ant Design orientiert;
Zwei umschaltbare Anwendungs-Shells (Seitenleiste / Kopfzeile);
Eine Reihe validierter Seiten-Rezepte, die über 36 Formulare wie Backoffice, Portal, Dokumentation, Dashboard, KI-Workbench usw. abdecken;
Eine verbindliche Regel der Komponentenwiederverwendung: Zuerst in antd / vorhandenen Bibliotheken / vorhandenen Komponenten suchen, dann selbst schreiben.

Das Ziel ist ein „natürliches antd"-Erscheinungsbild: Komponenten, Abstände, Zustände und Themes stammen von Ant Design, nicht durch die Neuerfindung eines Designsystems über antd.

Beim Laden des Skills gibt der Ressourcenblock das absolute Verzeichnis des Skills an. Im Folgenden wird es als <SKILL_DIR> bezeichnet. Ersetzen Sie es vor der Ausführung von Befehlen durch den tatsächlichen Pfad. Das Skill-Verzeichnis enthält:

SKILL.md
design.md                               # Maschinenlesbare Designsprache (Vorlagenumsetzung der offiziellen design.md)
scripts/scaffold.mjs                    # Ein-Klick-Projektgenerierung (Umbenennung + optionale Installation)
scripts/scan-ui.mjs                     # Scannen vorhandener Komponenten/Abhängigkeiten/antd-Nutzung, VOR jeglichem UI-Code
scripts/fetch-antd-docs.mjs             # Massenaktualisierung von Komponentendokumentations-Snapshots entsprechend der Projekt-antd-Version
scripts/check-antd-docs.mjs             # Initiale Selbstprüfung: Projekt-antd-Version vs. Dokumentations-Snapshots
assets/template/                        # Vollständig ausführbare Vorlage (ohne node_modules / dist)
assets/preview/                         # Vorschaubilder
references/antd-official.md            # Offizielle Designsprache und grundlegende Informationen von Ant Design (direkt eingebaut)
references/for-agents.md                # Offizielle For Agents Prompt-Wörter, CLI / MCP / LLMs Workflows
references/ecosystem.md                 # Offizielle Ökosystembibliotheken und Community-Empfehlungen, Auswahlreihenfolge
references/antd-design-language.md      # Offizielle Designsprache, Token, Konfigurationszuordnung
references/component-reuse.md           # Verpflichtend: Wiederverwendungssuche, antd-Komponentenzuordnung, benutzerdefinierte Regeln
references/app-patterns/README.md       # Formularindex: Zuerst lesen, nur eines auswählen
references/app-patterns/_common.md      # Allgemeine Shell/Breite/Dichte/Status/Abnahme
references/app-patterns/*.md            # 36 Typdateien, nur die zutreffenden Elemente gemäß Aufgabe lesen
references/architecture.md              # Provider, Authentifizierung, Shell, Dienstschicht
references/fullstack-design.md          # Frontend-Backend-Trennung, API-Verträge, Datenmodell, React-Status-Zuständigkeit
references/backend-design.md            # Backend-Paradigmen: Schichten, Authentifizierung, Transaktionen, Idempotenz, Audit, Sicherheit
references/ant-motion.md                # Ant Motion Animationsspezifikation, Komponentenintegration, Leistung und Barrierefreiheit
references/code-quality.md              # Alibaba Frontend-Richtlinien + React 19/TS Codequalität und Überprüfungs-Checkliste
references/components/README.md         # Index der 36 häufig verwendeten Komponentendokumentations-Snapshots (bei Bedarf 1–2 lesen)
references/components/manifest.json     # Snapshot-Version, Dateigröße und SHA-256, Grundlage für Selbstprüfung
references/components/*.md              # Chinesische Komponentendokumentations-Snapshots von antd 6.7.0
references/ux-scenarios.md              # UI/UX-Szenarien wie Laden/Leer/Fehler/Massenverarbeitung/Langzeitaufgaben/Berechtigungen
references/page-recipes.md              # Rezepte für Listen/Popups/Details/Berechtigungen/Dashboards
references/design-rules.md              # Visuelle und Interaktionsspezifikationen

Aufrufgrenzen (vorrangig vor den folgenden Rezepten)

Nur explizit verwenden: Der Skill darf nur geladen und ausgeführt werden, wenn der Benutzer ausdrücklich die Designsprache Ant Design / antd anfordert oder explizit $antd-admin-template nennt. Wenn der Benutzer für ein bestimmtes Projekt festlegt, dass „Designarbeit diesen Skill verwenden muss", kann die Datei AGENTS.md des Projekts diese fortlaufende Autorisierung festhalten; die Designarbeit dieses Projekts muss diesen Skill lesen und nutzen. Andere Projekte erben diese Ausnahme nicht.
Normale Frontend-Designs, Verwaltungs-Backends, Dokumentationen, Portale, Dashboards, CRUD, Theme-Konfigurationen, „kein Tailwind verwenden" oder Projekte, die bereits antd als Abhängigkeit haben, stellen keine Aufrufautorisierung dar. Der Skill darf nicht aufgrund dieser Schlüsselwörter selbstständig ausgewählt werden.
Die Autorisierung wird basierend auf dem aktuellen Aufgabenbereich beurteilt. Ein einmaliger Aufruf bedeutet nicht, dass alle zukünftigen Designaufgaben antd verwenden müssen; eine fortlaufende Projektautorisierung gilt nur innerhalb ihres explizit festgelegten Gültigkeitsbereichs; die Erwähnung, Installation oder Überprüfung dieses Skills bedeutet nicht, dass er zur Gestaltung von Schnittstellen verwendet werden muss.
Respektieren Sie die Produktpositionierung, DESIGN.md, AGENTS.md, das Komponentensystem und den Paketmanager des bestehenden Projekts; verwenden Sie nur die erforderlichen Referenzen innerhalb des autorisierten Bereichs, migrieren Sie nicht automatisch die Designsprache oder kopieren Sie die gesamte Vorlage.
Die folgenden Seitenrezepte und Abnahmeelemente für neue Projekte werden je nach tatsächlichem Bedarf verwendet; bei lokalen Änderungen an bestehenden Projekten werden keine Anmeldung, RBAC, mehrere Geschäftsseiten, Designeinstellungen oder Backend-Shells aufgezwungen. Bei Portal- und Marketingseiten wird keine BasicLayout erzwungen.
Die agents/openai.yaml Datei setzt policy.allow_implicit_invocation: false. Ändern Sie dies nicht auf automatischen Aufruf und installieren Sie den Skill nicht in einem gemeinsam genutzten Skill-Verzeichnis mehrerer Tools.

Inspiration und Quellen

Die KI-freundliche Organisationsweise dieses Skills wurde vom Ant Design Offiziellen For Agents inspiriert: Dem Agenten ermöglichen, Komponentenwissen der tatsächlichen Version abzufragen, anstatt API basierend auf Trainingserinnerungen zu erraten; und unter Bezugnahme auf LLMs.txt und design.md werden Komponentenwissen, semantische Struktur und Designsprache als bei Bedarf lesbare Materialien bereitgestellt.

Dies ist ein unabhängig zusammengestellter Community-Skill, kein offizieller Skill oder ein offiziell unterstütztes Projekt von Ant Design. Die Snapshots sind Archivreferenzen und repräsentieren nicht die aktuellste Version; überprüfen Sie bei der Verwendung die tatsächliche Abhängigkeit des Zielprojekts. Die eingebauten offiziellen Dokumentationsmaterialien und deren Lizenzen finden Sie in THIRD_PARTY_NOTICES.md.

Lieferstandards

Im Folgenden finden Sie die Referenz-Abnahmepunkte für vollständig neu erstellte Anwendungen; wählen Sie basierend auf der autorisierten Anwendungsform und dem Umfang aus. Bei bestehenden Projekten gelten deren eigene Einschränkungen:

Beide pnpm typecheck und pnpm build sind erfolgreich.
Anwendungsform und Shell passen zusammen: Backoffice verwendet Seitennavigation; Portal/Werkzeugtyp kann Kopfzeilennavigation verwenden; Inhaltsbreite und -dichte sind angemessen.
Vollständiges Backend mit Identitäts- und Berechtigungsverwaltung: Bietet je nach Bedarf Anmeldung, geschützte Layouts, Geschäftsseiten und 403/404; öffentliche Inhalte oder lokale Änderungen erzwingen diese Strukturen nicht.
Funktionstüchtig bei Breiten von 1440px und 390px; die Seitenleiste auf Mobilgeräten wird zu einem Drawer.
Helles/dunkles Theme, Markenfarbe, Navigationslayout, Inhaltsbreite, Dichte und Rahmenradius sind konfigurierbar und persistent.
Es werden kein Tailwind, shadcn oder eine zweite Komponentenbibliothek eingeführt; Farben stammen aus Token.
Seitentexte sind konsistent mit der Benutzersprache (standardmäßig Chinesisch).
Bei neuen Domänenbeschreibungen werden die Grenzen zwischen Frontend und Backend, API-Verträge und Datenmodelle erläutert; bei Verwendung von Mock wird die Austauschstelle klar beschrieben.
Asynchrone Seiten decken die Zustände loading / empty / error / forbidden ab; gefährliche Aktionen erfordern eine erneute Bestätigung, langlaufende Aufgaben sind nachverfolgbar.
Vor dem Schreiben einer Seite wurde design.md gelesen; die Komponenten-API wurde mit der offiziellen CLI oder der Dokumentation der entsprechenden Version überprüft (wenn keine CLI vorhanden ist, wird die Version angegeben).
Beim Betreten eines bestehenden Projekts wird zuerst die Komponentendokumentations-Snapshot-Selbstprüfung ausgeführt; bei Versionsinkonsistenzen zuerst aktualisieren oder den Unterschied klar benennen, alte Snapshots dürfen nicht als aktuelle API ausgegeben werden.
Der Code entspricht references/code-quality.md: Kein any-Schlendrian, vollständige Hooks-Abhängigkeiten, vollständige Behandlung von Status/Fehlern/Berechtigungen, keine tiefen .ant-*-Überschreibungen; wenn ein Lint-Skript vorhanden ist, läuft lint erfolgreich.
Animationen entsprechen references/ant-motion.md: Backend-Komponentenebene ≤300ms, unterstützt prefers-reduced-motion; keine alten rc-*-Animationsbibliotheken zur Dekoration importieren.

Offizielle Ant Design Basislinie (direkt eingebaut)

antd ist eine React-UI-Komponentenbibliothek basierend auf dem Ant Design Design-System, geeignet für Unternehmens-Backends und Desktop-Websites. Die aktuelle Vorlage verwendet antd 6.7 + @ant-design/icons 6.3 + React 19. antd 6 erfordert React >= 18, unterstützt nur moderne Browser, hat CSS-Variablen standardmäßig aktiviert und unterstützt SSR und Electron.

Vier grundlegende Design-Werte:

Natürlich: Intuitiv, senkt die kognitiven Kosten; weniger Erfindung, weniger Dekoration.
Bestimmtheit: Einheitliche Komponenten, Token, Seitenmuster, konsistent über Seiten hinweg.
Bedeutungsgefühl: Jede Schnittstelle dient einem klaren Arbeitsziel, die primäre Aktion ist eindeutig, das Feedback ist sofort.
Wachstumsfähigkeit: Kombinierbar, erweiterbar, entwickelt sich mit dem Geschäft und dem Benutzer weiter.

Visuelle Basislinie (Offizielle Spezifikation):

Element	Basislinie
Zeichenfläche / Raster	1440px; 4px Basisraster, 8px Hauptrhythmus; 24 Spalten
Hauptschriftart	14px / 22px; System-Schriftarten-Stapel; Schriftstärke 400/600
Markenfarbe	`#1677ff` (6. der grundlegenden blauen Palette)
Funktionsfarben	Erfolg `#52c41a` / Warnung `#faad14` / Fehler `#ff4d4f`
Neutrale Farben	88% / 65% / 45% / 25%; Rahmen `#d9d9d9`; Hintergrund `#f5f5f5`
Rahmenradius	2 / 4 / 6 / 8; Basis 6
Abstände	4 / 8 / 16 / 24 / 32 (4px Raster)
Layout	Links-Rechts-Layout (Navigation fixiert) oder Oben-Unten-Layout (zentrierte Skalierung)
Animation	Zurückhaltend, 0,1–0,3s; Backoffice keine dekorativen Animationen

Token Drei Ebenen: Seed (Marke/Rahmenradius/Schriftgröße) → Map (abgeleitete Farben/Text/Rahmen) → Alias (Komponentenebene). Seiten lesen nur theme.useToken(), codieren keine visuellen Werte fest.

Offizielles Ökosystem (Details siehe references/ecosystem.md):

Bibliothek	Verwendung
`antd` + `@ant-design/icons`	Kernkomponenten und Symbole (antd 6 ↔ icons 6)
`@ant-design/pro-components`	ProLayout / ProTable / ProForm; Stabiles 2.x peer ist immer noch antd ^5, antd 6 benötigt 3.x Beta und Version festlegen
`@ant-design/charts`	Komplexe statistische Diagramme; kein antd peer, Theme muss manuell angeglichen werden
`@ant-design/x` + `@ant-design/x-markdown`	KI-Dialog / Copilot / Streaming Markdown; peer `antd ^6.1.1`
`@xyflow/react`	Workflow/Topologie-Canvas; Ersatz für Pro Flow, dessen peer unter antd 6 immer noch v5 ist
`antd-mobile`	Mobile H5 (unabhängige Produktlinie)
`antd-mini`	Alipay/WeChat Mini-Programme
`@ant-design/web3`	Web3 / Wallet
Ant Design CLI	Projektprüfung und Migration v5→v6
Ant Motion / Landing / Pro	Animationen, Startseitenvorlage, vollständiges Gerüst

Ökosystemauswahl, Versionsmatrix, Größen- und Kompatibilitätsprüfungen siehe references/ecosystem.md. Reduzieren Sie nicht antd auf v5 wegen einer einzigen Table; installieren Sie auch nicht Pro Flow / Pro Chat / Pro Editor direkt auf antd 6.

Design-Vertrag: design.md ist die maschinenlesbare Version; lesen Sie sie, bevor Sie eine Seite schreiben; die visuelle Tabelle dieser Datei ist eine Zusammenfassung, bei Konflikten gelten design.md + die tatsächliche antd-Version des Projekts.

Offizielle Links: ant.design · Design-Werte · Farben · Layout · Schriftarten · Community-Empfehlungen · CLI · For Agents · design.md.

Offizielle For Agents Spezifikation (verbindlich)

Die offizielle Dokumentation stellt klar: Die aktuelle Version kann breaking changes enthalten; Komponenten-API, Konventionen, Dateistruktur können von den Trainingsdaten abweichen; lesen Sie die Spezifikation, bevor Sie Code schreiben, schreiben Sie die antd API nicht aus dem Gedächtnis.

Bevor Sie irgendein UI schreiben:

Lesen Sie design.md & references/for-agents.md.
Bestätigen Sie die tatsächliche Projektversion: antd info --version oder lesen Sie package.json.

Überprüfen Sie die Komponenten-API und ausführbare Demos:

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

Wenn die Installation des offiziellen Skills möglich ist, führen Sie npx skills add ant-design/ant-design-cli aus; die MCP-Integration finden Sie in references/for-agents.md.
Führen Sie vor der Auslieferung nach Möglichkeit npx -y @ant-design/cli lint ./src aus; dann pnpm typecheck && pnpm build.

Debug-Reihenfolge: antd env → antd doctor → antd info --version → antd lint. Migrationsreihenfolge: antd migrate → antd changelog → antd lint. Wenn keine CLI vorhanden ist, verwenden Sie https://ant.design/components/<name>.md und die lokale design.md als Fallback und geben Sie die tatsächliche Version in der Auslieferung an.

Den ursprünglichen offiziellen Prompt, die vollständige Befehlstabelle, die MCP-Konfiguration und den Fallback-Prozess finden Sie in references/for-agents.md.

CLI durch den gesamten Lebenszyklus:

Phase	Befehl	Zweck
Design-Angleichung	`npx -y @ant-design/cli design.md`	Aktuelle Design-Sprache abrufen; mit `design.md` dieses Skills vergleichen
Auswahl/API-Prüfung	`info` / `demo` / `token` / `semantic`	Zuerst echte Props, ausführbare Demos, Komponenten-Token und semantisches DOM ansehen
Code schreiben	Lesen Sie `references/components/<component>.md`	Offline-Snapshot als Fallback; lesen Sie nur 1–2 zutreffende
Lieferprüfung	`lint` + `typecheck` + `build`	Veraltete APIs, Typen und Build zusammen prüfen
Migration	`migrate` → `changelog` → `lint`	v5→v6 oder versionübergreifendes Upgrade
Diagnose	`env` → `doctor` → `info --version` → `usage`	Umgebung, Version, Komponentennutzungsfläche überprüfen

Animation und Codequalität (verbindlich)

Animation

Lesen Sie vor dem Schreiben von Übergängen, Eintritts-/Roll-Effekten references/ant-motion.md. Standardstrategie:

Backoffice/Werkzeug/SaaS: Nur integrierte antd-Animation + CSS-Token verwenden; Komponentenebene 100/200/300ms, Seitenebene nicht mehr als 300ms; keine Vollbild-Übergänge.
Portal/Webseite/Aktionsseite: Wenige narrative Animationen möglich, Seitenebene 150/300/450/600ms; nur eine Hauptzeitleiste pro Bildschirm.
Ant Motion Komponentenbibliothek: rc-tween-one / rc-queue-anim / rc-scroll-anim / rc-banner-anim wurden alle 2022 eingestellt, peer deklariert nicht React 19 und sind abhängig von findDOMNode; nicht standardmäßig in antd 6 Kern-Backends installieren. Wenn Marketing-Animationen unbedingt erforderlich sind, Version festlegen, echte Browser-Tests durchführen und CSS/IntersectionObserver-Fallback vorbereiten.
prefers-reduced-motion muss unterstützt werden; keine alleinige Informationsvermittlung durch Animation; Animation darf Eingabe/Routing/Laden nicht blockieren.

Codequalität

Lesen Sie vor dem Schreiben von Code references/code-quality.md. Es passt die Alibaba Frontend-Richtlinien für Benennung, TypeScript, React Hooks, Barrierefreiheit und technische Standards an React 19 + antd 6 an:

strict + kein any-Schlendrian; keine unbegründeten @ts-ignore / Non-null assertions.
Funktionskomponenten + Hooks auf oberster Ebene aufrufen; Abhängigkeitsarrays vollständig; keinen Effect zur Ableitung von State verwenden.
Listen-keys stabil; asynchrone Seiten fünf Zustände abdecken; gefährliche Aktionen bestätigen; serverseitige Daten nicht in globalen Store.
Farben/Abstände/Rahmenradius aus Token; keine .ant-*-Tiefenstrukturen überschreiben; bei 390px kein horizontaler Überlauf.
Interaktive Elemente tastaturbedienbar, mit sichtbarem Fokus und lesbarem Namen; Kontrast erfüllt WCAG AA.
Wenn das Projekt Lint hat, vor Auslieferung pnpm lint / pnpm stylelint ausführen; wenn kein Lint vorhanden, manuelle Überprüfung gemäß code-quality.md §11 durchführen und in der Auslieferung „Lint nicht konfiguriert" vermerken.

Optional offizielle F2E-Tools integrieren:

npx f2elint
# React + TypeScript wählen, nach Bedarf ESLint / Stylelint / Prettier / lint-staged / commitlint aktivieren

Vorhandene ESLint/Stylelint-Konfigurationen nicht überschreiben, zuerst Regeln zusammenführen; die class component / ReactDOM.render Regeln in der F2E-Dokumentation gelten nicht für React 19.

Initiale Selbstprüfung (zuerst ausführen bei bestehenden Projekten)

Der Skill enthält 36 antd 6.7.0 chinesische Komponentendokumentations-Snapshots in references/components/. Die antd-Version des Projekts kann abweichen; es darf nicht davon ausgegangen werden, dass der Snapshot die aktuelle API ist.

# 1) Installierte antd-Version des Projekts mit dem Snapshot abgleichen
node <SKILL_DIR>/scripts/check-antd-docs.mjs <Projektverzeichnis>

# 2) Bei Inkonsistenz gemäß Projektversion aktualisieren (benötigt offizielle CLI; bei Netzwerk-/Sandbox-Einschränkungen kann lokale CLI angegeben werden)
node <SKILL_DIR>/scripts/fetch-antd-docs.mjs --project <Projektverzeichnis>
# oder explizit: --version 6.7.0

Exit-Code 0: Version konsistent und 36 Dateien in Größe/Hash vollständig.
Exit-Code 1: Version inkonsistent oder Dateien geändert; gemäß Hinweis aktualisieren oder Projekt-antd an Snapshot-Version angleichen.
Exit-Code 2: Projekt-antd-Version nicht ermittelbar; zuerst pnpm install oder --target übergeben.
Wenn CLI in Sandbox/CI beim Schreiben von HOME fehlschlägt, kann ANTD_CLI_HOME=/tmp/antd-home gesetzt werden; bei vorhandener lokaler CLI ANTD_CLI_BIN=/path/to/antd verwenden.
Nach bestandener Selbstprüfung den Index in references/components/README.md lesen, nur 1–2 Komponenten öffnen, die gerade geschrieben werden sollen, nicht alle laden.

Komponenten-Wiederverwendungssperre (verbindlich, vor jeglichem UI-Code)

Bevor Sie JSX schreiben, müssen Sie der Reihe nach Folgendes erledigen:

Projekt scannen: Führen Sie node <SKILL_DIR>/scripts/scan-ui.mjs <Projektverzeichnis> aus, um installierte UI-Abhängigkeiten, vorhandene Komponenten in src/components / src/layouts, und die Nutzungshäufigkeit von antd zu sehen.
Vorhandene Komponenten durchsuchen: Verwenden Sie das Werkzeug, um src/components, Funktionsverzeichnisse, ähnliche Seiten zu durchsuchen; wenn Wiederverwendung möglich ist, schreiben Sie nichts Neues.
antd prüfen: Ob Table / Form / Modal / Drawer / Descriptions / Tree / Upload / Empty / Result usw. bereits abgedeckt sind; wenn CLI vorhanden, zuerst antd info <Component> / antd demo <Component> ausführen, dann gemäß der Zuordnungstabelle in references/component-reuse.md auswählen.
Offizielle Erweiterungen prüfen: @ant-design/pro-components, @ant-design/charts, @ant-design/x, antd-mobile; dann reife Drittanbieter in Betracht ziehen.
Zuletzt benutzerdefiniert: In src/components ablegen, theme.useToken() verwenden und begründen, warum Wiederverwendung nicht möglich war.

Das Überspringen der Schritte 1–4 und das direkte Schreiben von Dropdowns, Tabellen, Popups, Schaltern, Datumsauswahlern, Toasts oder leeren Zuständen gilt als unvollständig. Bei der Auslieferung muss ein Satz enthalten sein wie „Was wurde wiederverwendet / Welche neue benutzerdefinierte Komponente wurde hinzugefügt".

Detaillierte Regeln, Komponentenzuordnung und Anti-Patterns finden Sie in references/component-reuse.md.

Workflow

0. Initiale Selbstprüfung

Beim Betreten eines bestehenden Projekts zuerst ausführen:

node <SKILL_DIR>/scripts/check-antd-docs.mjs <Projektverzeichnis>

Bei Nichtbestehen zuerst Snapshots aktualisieren oder antd-Version angleichen; schreiben Sie keine Komponenten-APIs mit Versionsabweichung. Bei neuen Projekten nach dem scaffold und Abschluss der Abhängigkeitsinstallation erneut ausführen.

1. Zuerst fünf Dinge abgleichen

Stellen Sie bei unzureichenden Informationen nur die notwendigen Fragen, kein Verhör:

Markenname: Für APP_NAME, Anmeldeseite, Titel.
Anwendungsform: Backoffice / Portal / Werkzeug-SaaS / Daten-Dashboard / Dokumentation / KI-Workbench / Projekt-Board / E-Commerce / Kundenservice / Einstellungscenter usw.
Geschäftsobjekte und Seiten: Z.B. „Auftragsliste + Auftragsdetails + Rückerstattungsgenehmigung".
Rollen und Berechtigungen: Mindestens Administrator und normales Mitglied unterscheiden; entscheiden, ob Berechtigungsbaum benötigt wird.
Datenquelle: Zuerst In-Memory Mock verwenden oder direkt echte Schnittstellen anbinden.

Beginnen Sie direkt, wenn genügend Informationen vorhanden sind, bleiben Sie nicht in der Planungsphase stecken.

2. Architektur, Datenmodell und React-Status-Grenzen festlegen

Bei Beteiligung eines echten Backends, neuer Domänenobjekte oder komplexer Interaktionen zuerst references/fullstack-design.md lesen; wenn der Server entworfen/überprüft werden muss, dann references/backend-design.md lesen, danach Seiten schreiben. Mindestens erstellen:

3–6 Kernentitäten: Beziehungen, unique constraints, Mandantentrennung, Zustandsmaschine, Audit-Felder.
API-Verträge: Liste/Details/Schreiboperationen, Paginierung, Fehlercodes, Idempotenz, Parallelitätskontrolle.
Status-Zuständigkeit: Was gehört in URL (Filter/Paginierung), Server-Cache, Formular, lokales UI, globale Sitzung.
Backend-Einschränkungen: Server-Authentifizierung, Transaktionsgrenzen, Idempotenzschlüssel, optimistisches Locking, Audit-Tabelle, Fehler geben keine internen Informationen preis.
Mock-Signatur: Zuerst gemäß der tatsächlichen Schnittstellenform implementieren, später nur den Service-Inneren austauschen.

Ohne Vertrag direkt JSX zu schreiben, gilt als unvollständig. Frontend-Berechtigungen dienen nur der Anzeige, das Backend muss erneut authentifizieren; Backend-Abnahme gemäß der Checkliste in backend-design.md §14.

3. Shell und Voreinstellungen auswählen

Zuerst gemäß den vier Fragen in references/app-patterns/README.md die Form auswählen; nur die zutreffenden Typdateien + _common.md lesen, nicht alle laden:

Formular	Voreinstellung / Shell	Breite	Dichte	Seitenrezepte
Backoffice / Betrieb	Standard-Backoffice · Seitenleiste	Fluid	Standard	Liste + Details + Berechtigungen
Portal / Webseite	Portal-Webseite · Kopfzeile	Fest 1200	Locker	Startseite + Funktionen + CTA
Werkzeug-SaaS	Kopfzeile · Benutzerdefiniert	Fluid/Fest	Kompakt	Arbeitsbereich + Verlauf + Einstellungen
Daten-Dashboard / Monitoring	Datenintensiv · Seitenleiste/Keine Shell	Fluid	Kompakt	Metriken + Diagramme + Ranglisten
Dokumentation / Wissensdatenbank	Portal · Kopfzeile	Fest	Standard	Linker Baum + Haupttext + Rechtes Inhaltsverzeichnis
Projekt / Board	Standard-Backoffice · Seitenleiste	Fluid	Kompakt	Horizontale Board-Spalten
KI-Dialog / Copilot	Kopfzeile/Keine Shell	Fest/Fluid	Standard	Konversation + Nachrichtenstrom + Kontext
E-Commerce / Produkte	Portal · Kopfzeile	Fest	Standard	Produktraster + Details + Checkout
Kundenservice / Tickets	Datenintensiv · Seitenleiste	Fluid	Kompakt	Warteschlange + Konversation + Details
Anmeldung / Einführung	Keine Shell	Fest 420/720	Standard	Formular + Steps

Bei ≤ 5 Modulen auf oberster Ebene priorisieren Sie die Kopfzeilennavigation; bei vielen Modulen und langfristigem Wechselbedarf die Seitenleiste. Machen Sie nicht aus „jeder Anwendung" ein Backend mit Seitenleiste. Die vollständigen 36 Formulare, Layout-Diagramme und Komponentenauswahl finden Sie in references/app-patterns/README.md.

Protokoll zum bedarfsgesteuerten Lesen:

Lokalisieren Sie die Form nur in der Gesamttabelle der README.md, öffnen Sie nicht zuerst die Typdatei.
Lesen Sie einmal _common.md, um Shell, Breite, Dichte und allgemeinen Status zu bestimmen.
Öffnen Sie nur die 1 zutreffende Typdatei; bei Mischformen maximal 2 und begründen Sie die Kombination.
Lesen Sie page-recipes.md nur, wenn ein Code-Gerüst benötigt wird, erfinden Sie nichts von Grund auf.
Behaupten Sie nicht in der Auslieferung, Typdateien gelesen zu haben, die Sie nicht geöffnet haben.

4. Projekt generieren

# Ersetzen Sie <SKILL_DIR> mit dem absoluten Pfad aus dem Skill-Ressourcenblock
node <SKILL_DIR>/scripts/scaffold.mjs <target-dir> --name "<Markenname>"
# Wenn Abhängigkeiten gleichzeitig installiert werden sollen:
node <SKILL_DIR>/scripts/scaffold.mjs <target-dir> --name "<Markenname>" --install

Das Skript kopiert die Vorlage, ersetzt APP_NAME, Paketnamen und localStorage-Präfix. Überspringen Sie nicht das Skript, um die Vorlage manuell zu kopieren und dann Datei für Datei umzubenennen.

Führen Sie nach der Generierung einmal dies aus:

cd <target-dir>
pnpm typecheck
pnpm dev

Melden Sie sich mit dem Demo-Konto admin / admin123 an, bestätigen Sie die Basislinie, bevor Sie Geschäftslogik ändern.

5. Marke und Informationsarchitektur ändern

Markenname: APP_NAME in src/config/constants.ts (bereits durch Gerüst geschrieben).
Standarddesign: DEFAULT_APP_CONFIG und DESIGN_PRESETS in src/config/design.ts.
Menü: siderMenuItems in src/config/menu.tsx; Schnellsuche: appPages in derselben Datei.
Routen: src/router/index.tsx, jede Geschäftsroute muss handle: { title: 'Seitenname' } haben.
Anmelde-Demo-Konto: src/services/auth.ts.

Menü und Routen müssen synchron sein: Der Menüpunkt key ist gleich dem Routenpfad, sonst funktionieren Hervorhebung und Navigation nicht korrekt.

6. Design-Konfiguration anpassen

Standardkonfiguration und Voreinstellungen sind in src/config/design.ts konzentriert:

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;
}

Standardformular des Produkts ändern: DEFAULT_APP_CONFIG ändern.
Empfohlene Kombinationen ändern: DESIGN_PRESETS ändern.
Neue Konfigurationselemente hinzufügen: AppConfig erweitern → Standardwert hinzufügen → Setter in AppConfigContext bereitstellen → Steuerelement in DesignDrawer hinzufügen → in App.tsx / Layout konsumieren.
Konfiguration wird in localStorage persistiert (Standard nova-admin:design).
Wenn das Produkt dem Benutzer nicht erlaubt, das Layout zu ändern, entfernen Sie das entsprechende Segmented aus DesignDrawer, anstatt das gesamte Panel auszublenden.

7. Geschäftsseiten implementieren

Schreiben Sie gemäß dem Gerüst in references/page-recipes.md, erfinden Sie nicht jedes Mal das Rad neu:

Listenseite = PageContainer + Filter Card + Tabellen Card (Werkzeugleiste, Massenoperationen, Paginierung).
Neu erstellen/bearbeiten = Eigenständige Modal-Komponente + Form-Validierung + Service-Schicht-Aufruf.
Detailseite = Descriptions + Timeline + Status Tag.
Dashboard = Metrik-Karten + Diagramme + letzte Einträge; Vorlage enthält eigenständige SVG-Diagramme ohne Abhängigkeiten.
Berechtigungen = Rollentabelle + Tree-Berechtigungs-Drawer.
Portal/Werkzeugseite = Kopfzeilennavigation + feste Inhaltsbreite; Marketing-Blöcke können selbst erstellt werden, verwenden aber weiterhin antd Token und Komponenten.
Komponenten-API zuerst in references/components/README.md oder mit der offiziellen CLI prüfen; nur die aktuelle Komponente lesen, Props nicht aus dem Gedächtnis schreiben.
Interaktionsdetails gemäß references/ux-scenarios.md Szenario auswählen: zuerst fünf Zustände abdecken, dann Massenoperationen, Langzeitaufgaben, Konflikte, Berechtigungsanträge usw. ergänzen.
Animationen gemäß references/ant-motion.md: Backend standardmäßig nur Komponentenebene 100–300ms Feedback; keine zeilenweisen Eintrittsanimationen, Parallax-Effekte oder Vollbild-Übergänge.
Codequalität gemäß references/code-quality.md: Typen, Hooks, Barrierefreiheit, Fehlerbehandlung, Benennung und Dateigrenzen gemeinsam prüfen; nicht zuerst Seiten stapeln und später korrigieren.
Die Vorlage enthält drei integrierte Erweiterungsbeispiele: /welcome Portal/Webseite, /workspace/board Projekt-Board, /docs Dokumentationszentrum; sie können als Referenz für die Wiederverwendung in KI, E-Commerce, Kundenservice, CRM, HR, Finanzen, IoT usw. dienen.

Beim Hinzufügen neuer Domänendaten werden gleichzeitig src/types, src/... aktualisiert.

8. Neu erstelltes Projekt abnehmen

Vor der Auslieferung mindestens prüfen:

pnpm typecheck & pnpm build: Keine Fehler, keine Warnungen.
Anwendungsform & Shell: Stimmt die Shell mit der Aufgabenbeschreibung überein? Ist die Breite angemessen?
Daten: Gibt es Mock oder echte API-Aufrufe? Wurden Verträge dokumentiert?
Zustände: Verfügen asynchrone Seiten über fünf Zustände?
Barrierefreiheit: Sind Tastaturbedienung und Farbkontrast ausreichend?
Vollständigkeit der Auslieferung: Wurde notiert, was wiederverwendet wurde, was der Grund für benutzerdefinierte Komponenten war, ob es ungelöste Probleme gibt.
Fehlen keine wichtigen Referenzen in der Auslieferung.
Test auf 390px: Kein horizontaler Überlauf; Seitenleiste wird zum Drawer.
Keine Abhängigkeitsinkonsistenzen: pnpm ls antd überprüfen, ob die antd-Version mit der verwendeten API übereinstimmt.
Animationsregeln eingehalten.

Mustergültiger Antrag auf Nutzung (nur als Referenz, an die tatsächliche Aufgabe anpassen)

Wenn die Aufgabe die Verwendung von antd erfordert und keine ausdrückliche Autorisierung zur Verwendung dieses Skills vorliegt, fragen Sie den Benutzer zuerst, ob er diesen Skill verwenden möchte. Wenn der Benutzer zustimmt oder das Projektziel angibt, dass antd/Designsystem verwendet werden muss, fahren Sie fort. Wenn der Benutzer fragt: „Kannst du ein Admin-Panel für mich erstellen?", fragen Sie zuerst, ob er ein bestimmtes Designsystem verwenden möchte.

Wenn die Autorisierung erteilt/erkannt wurde, können Sie direkt gemäß den Schritten in den folgenden Dokumenten vorgehen.

Agenten-Logbuch

(Leer lassen oder relevantes Logbuch für Agenten hinzufügen)

lzhbhlrPython/antd-admin-template

Was ist antd-admin-template?

In Ihrer bevorzugten KI fragen

Dokumentation