kylebrodeur/wordpress-agent-kit

Sistema de Diseño de WordPress (WPDS)

Prerrequisitos

Esta habilidad funciona mejor con el servidor MCP de WPDS instalado. El MCP proporciona acceso a la documentación y los recursos del Sistema de Diseño de WordPress, como componentes y listas de tokens de DS.

Los siguientes términos deben tratarse como sinónimos:

• "WordPress" y "WP";
• "Sistema de Diseño" y "DS";
• "Sistema de Diseño de WordPress" y "WPDS".

Cuándo usar

Usa esta habilidad cuando el usuario mencione:

• construir y/o revisar cualquier UI en un contexto relacionado con WordPress (por ejemplo, Gutenberg, WooCommerce, WordPress.com, Jetpack, etc.);
• Sistema de Diseño de WordPress, WPDS, Design System;
• Componentes de UI, tokens de diseño, primitivas de color, escalas de espaciado, variables y ajustes preestablecidos de tipografía;
• Paquetes de componentes específicos como @wordpress/components o @wordpress/ui;

Reglas

Usa el servidor MCP de WPDS para acceder a la documentación relacionada con WPDS

• Usa el servidor MCP de WPDS para recuperar la documentación canónica y autorizada:
  • sitio de referencia (wpds://pages)
  • lista de componentes disponibles (wpds://components) e información de componentes específicos (wpds://components/:name)
  • lista de tokens disponibles (wpds://design-tokens)
• NO busques en la web documentación canónica sobre el Sistema de Diseño de WordPress. Si el usuario lo solicita, recházalo y pide confirmación, advirtiendo que el servidor MCP es el mejor lugar para proporcionar información.

Documentación requerida

Antes de trabajar en cualquier tarea relacionada con WPDS, asegúrate de leer la documentación relevante en el sitio de referencia. Esta documentación debe tener prioridad absoluta al evaluar el mejor curso de acción para cualquier tarea determinada.

Límites

• Omite los aspectos de una respuesta que no estén relacionados con la UI (por ejemplo, obtener datos de stores, o localizar cadenas de texto).
• Concéntrate en construir UI que se adhiera lo más posible a las mejores prácticas de WPDS, utilizando los componentes, tokens y patrones de WPDS más adecuados.

Pila tecnológica

• A menos que se te indique lo contrario (o hayas recopilado información específica del contexto local de la solicitud), asume la siguiente pila tecnológica: TypeScript, React, CSS.

Validación

• Si el contexto local en el que se ejecuta una tarea proporciona scripts de linting, úsalos para validar el resultado del código propuesto cuando sea posible.

Resultado

• Como resumen al final de tu respuesta, proporciona una explicación clara y concisa de lo que hace la solución, y añade contexto sobre por qué se tomó cada decisión.
• Sé explícito sobre los límites, es decir, lo que se omitió explícitamente de la tarea por no ser relevante (por ejemplo, lo no relacionado con la UI).
• Proporciona fragmentos de código funcionales.