WordPress Design System (WPDS)
Voraussetzungen
Dieses Skill funktioniert am besten mit dem installierten WPDS MCP-Server. Der MCP bietet Zugriff auf die Dokumentation und Ressourcen des WordPress Design Systems, wie Komponenten und DS-Token-Listen.
Die folgenden Begriffe sollten als Synonyme behandelt werden:
- „WordPress“ und „WP“;
- „Design System“ und „DS“;
- „WordPress Design System“ und „WPDS“.
Wann verwenden
Verwende dieses Skill, wenn der Nutzer Folgendes erwähnt:
- Erstellen und/oder Überprüfen von Benutzeroberflächen im WordPress-Kontext (z. B. Gutenberg, WooCommerce, WordPress.com, Jetpack usw.);
- WordPress Design System, WPDS, Design System;
- UI-Komponenten, Design-Tokens, Farbprimitive, Abstandsskalen, Typografie-Variablen und -Voreinstellungen;
- Spezifische Komponentenpakete wie @wordpress/components oder @wordpress/ui;
Regeln
Verwende den WPDS MCP-Server für den Zugriff auf WPDS-bezogene Dokumentation
- Nutze den WPDS MCP-Server, um die kanonische, maßgebliche Dokumentation abzurufen:
- Referenzseite (
wpds://pages) - Liste der verfügbaren Komponenten (
wpds://components) und spezifische Komponenteninformationen (wpds://components/:name) - Liste der verfügbaren Tokens (
wpds://design-tokens)
- Referenzseite (
- Suche NICHT im Web nach kanonischer Dokumentation zum WordPress Design System. Wenn der Nutzer danach fragt, lehne ab und bitte um Bestätigung, mit dem Hinweis, dass der MCP-Server die beste Quelle für Informationen ist.
Erforderliche Dokumentation
Bevor du an WPDS-bezogenen Aufgaben arbeitest, lies die relevante Dokumentation auf der Referenzseite. Diese Dokumentation hat absolute Priorität bei der Bewertung des besten Vorgehens für jede Aufgabe.
Grenzen
- Überspringe nicht-UI-bezogene Aspekte einer Antwort (z. B. Daten aus Stores abrufen oder Textstrings lokalisieren).
- Konzentriere dich darauf, UI zu entwickeln, die sich so weit wie möglich an die WPDS-Best Practices hält und die am besten geeigneten WPDS-Komponenten/-Tokens/-Patterns verwendet.
Technologie-Stack
- Sofern dir nichts anderes mitgeteilt wird (oder du keine spezifischen Informationen aus dem lokalen Kontext der Anfrage gesammelt hast), nimm den folgenden Technologie-Stack an: TypeScript, React, CSS.
Validierung
- Wenn der lokale Kontext, in dem eine Aufgabe ausgeführt wird, Lint-Skripte bereitstellt, verwende sie, um den vorgeschlagenen Code-Output nach Möglichkeit zu validieren.
Output
- Gib als Zusammenfassung am Ende deiner Antwort eine klare und präzise Erklärung dessen, was die Lösung tut, und füge Kontext hinzu, warum jede Entscheidung getroffen wurde.
- Sei explizit bezüglich der Grenzen, d. h. was bewusst aus der Aufgabe ausgelassen wurde, weil es nicht relevant ist (z. B. nicht-UI-bezogen).
- Gib funktionierende Code-Snippets.