kylebrodeur/wordpress-agent-kit

WordPress Design System (WPDS)

Pré-requisitos

Esta habilidade funciona melhor com o servidor MCP do WPDS instalado. O MCP fornece acesso à documentação e aos recursos do WordPress Design System, como componentes e listas de tokens de design.

Os seguintes termos devem ser tratados como sinônimos:

• "WordPress" e "WP";
• "Design System" e "DS";
• "WordPress Design System" e "WPDS".

Quando usar

Use esta habilidade quando o usuário mencionar:

• construir e/ou revisar qualquer interface de usuário em um contexto relacionado ao WordPress (por exemplo, Gutenberg, WooCommerce, WordPress.com, Jetpack, etc.);
• WordPress Design System, WPDS, Design System;
• Componentes de UI, tokens de design, primitivas de cor, escalas de espaçamento, variáveis e presets de tipografia;
• Pacotes de componentes específicos como @wordpress/components ou @wordpress/ui;

Regras

Use o servidor MCP do WPDS para acessar documentação relacionada ao WPDS

• Use o servidor MCP do WPDS para recuperar a documentação canônica e autoritativa:
  • site de referência (wpds://pages)
  • lista de componentes disponíveis (wpds://components) e informações específicas de componentes (wpds://components/:name)
  • lista de tokens disponíveis (wpds://design-tokens)
• NÃO pesquise na web por documentação canônica sobre o WordPress Design System. Se solicitado pelo usuário, questione e peça confirmação, alertando que o servidor MCP é o melhor local para fornecer informações.

Documentação obrigatória

Antes de trabalhar em qualquer tarefa relacionada ao WPDS, certifique-se de ler a documentação relevante no site de referência. Essa documentação deve ter precedência absoluta ao avaliar a melhor ação para qualquer tarefa.

Limites

• Ignore aspectos não relacionados à UI de uma resposta (por exemplo, buscar dados de stores ou localizar strings de texto).
• Foco em construir UI que adira o máximo possível às melhores práticas do WPDS, usando os componentes/tokens/padrões mais adequados do WPDS.

Pilha tecnológica

• A menos que seja informado de outra forma (ou tenha coletado informações específicas do contexto local da solicitação), assuma a seguinte pilha tecnológica: TypeScript, React, CSS.

Validação

• Se o contexto local em que uma tarefa está sendo executada fornecer scripts de lint, utilize-os para validar a saída de código proposta quando possível.

Saída

• Como resumo ao final da sua resposta, forneça uma explicação clara e concisa do que a solução faz e adicione contexto sobre por que cada decisão foi tomada.
• Seja explícito sobre os limites, ou seja, o que foi explicitamente deixado de fora da tarefa por não ser relevante (por exemplo, aspectos não relacionados à UI).
• Forneça snippets de código funcionais.