Kit de Démarrage Agent WordPress (kylebrodeur/wordpress-agent-k…

Guide du Système de Design WordPress (WPDS)

Prérequis

Cette compétence fonctionne de manière optimale avec le serveur MCP WPDS installé. Le MCP donne accès à la documentation et aux ressources du Système de Design WordPress, telles que les composants et les listes de tokens de design.

Les termes suivants doivent être considérés comme synonymes :

• « WordPress » et « WP » ;
• « Système de Design » et « DS » ;
• « Système de Design WordPress » et « WPDS ».

Quand utiliser

Utilisez cette compétence lorsque l'utilisateur mentionne :

• la création et/ou la révision d'une interface utilisateur (UI) dans un contexte lié à WordPress (par exemple, Gutenberg, WooCommerce, WordPress.com, Jetpack, etc.) ;
• le Système de Design WordPress, WPDS, Design System ;
• les composants UI, les tokens de design, les primitives de couleur, les échelles d'espacement, les variables et préréglages typographiques ;
• des packages de composants spécifiques tels que @wordpress/components ou @wordpress/ui.

Règles

Utiliser le serveur MCP WPDS pour accéder à la documentation relative au WPDS

• Utilisez le serveur MCP WPDS pour récupérer la documentation canonique et faisant autorité :
  • site de référence (wpds://pages)
  • liste des composants disponibles (wpds://components) et informations spécifiques sur un composant (wpds://components/:name)
  • liste des tokens disponibles (wpds://design-tokens)
• NE cherchez PAS sur le web la documentation canonique concernant le Système de Design WordPress. Si l'utilisateur vous le demande, opposez-vous et demandez une confirmation, en l'avertissant que le serveur MCP est le meilleur endroit pour fournir des informations.

Documentation requise

Avant de travailler sur toute tâche liée au WPDS, assurez-vous d'avoir lu la documentation pertinente sur le site de référence. Cette documentation doit avoir la priorité absolue lors de l'évaluation de la meilleure marche à suivre pour une tâche donnée.

Limites

• Ignorez les aspects non liés à l'interface utilisateur dans une réponse (par exemple, la récupération de données depuis des stores ou la localisation de chaînes de texte).
• Concentrez-vous sur la construction d'une UI qui adhère autant que possible aux bonnes pratiques du WPDS, utilisant les composants/tokens/modèles WPDS les plus adaptés.

Stack technique

• Sauf indication contraire (ou si vous avez recueilli des informations spécifiques à partir du contexte local de la demande), supposez la stack technique suivante : TypeScript, React, CSS.

Validation

• Si le contexte local dans lequel une tâche s'exécute fournit des scripts de lint, utilisez-les pour valider le code proposé lorsque cela est possible.

Résultat

• En récapitulatif à la fin de votre réponse, fournissez une explication claire et concise de ce que fait la solution, et ajoutez le contexte de chaque décision prise.
• Soyez explicite sur les limites, c'est-à-dire ce qui a été délibérément exclu de la tâche parce que non pertinent (par exemple, les aspects non liés à l'interface utilisateur).
• Fournissez des extraits de code fonctionnels.