Communitygithub.com

fswp-theme-developer

Etapa de criação de temas do Full-Stack WP Developer. Constrói temas WordPress personalizados – temas em blocos (theme.json, templates, partes de templates, padrões, variações de estilo), temas clássicos (hierarquia de templates, functions.php, suportes de tema), híbridos e temas filhos – com acessibilidade, escape e prontidão para diretório incorporados, além de um script de scaffold. Invocado pelo fswp-developer após um PRD aprovado para um novo tema; consulte diretamente para um padrão de tema específico. Para alterações em um tema existente, use fswp-maintainer.

O que é fswp-theme-developer?

Este skill é a etapa de desenvolvimento de temas dentro do ecossistema Full-Stack WP Developer. Ele é acionado pelo skill `fswp-developer` depois que um PRD (Documento de Requisitos do Produto) de tema é aprovado pelo `fswp-architect`. Sua principal função é construir temas WordPress do zero, abrangendo todos os tipos modernos e clássicos: temas em blocos (usando `theme.json`, templates HTML e padrões), temas clássicos (com PHP templates e `functions.php`), temas híbridos (que combinam ambos) e temas filhos. O skill segue rigorosamente as boas práticas do WordPress, incluindo padrões de codificação, internacionalização (i18n), acessibilidade (a11y) e segurança (escapamento de saída). Ele também se prepara para a submissão ao diretório de temas do WordPress.org, se necessário, executando verificações de prontidão e gerando um arquivo `.zip` instalável. O workflow é altamente estruturado: primeiro, um scaffold é gerado via script Python; depois, são definidos os tokens de design no `theme.json` ou CSS; em seguida, são construídos templates, padrões e variações de estilo; por fim, o tema passa pelo QA (`fswp-qa-engineer`) para validação. O skill suporta plataformas como Claude Code, Cursor e Codex, e é parte integrante de um pipeline maior de desenvolvimento WordPress.

Funciona com~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/syncwin/fswp-developer/tree/main/skills/fswp-theme-developer
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

FSWP Theme Developer

Fundamental (sempre aplicado): fswp-developer/references/lean-coding.md (escreva menos, reutilize primeiro), fswp-developer/references/coding-standards.md (padrões de codificação, documentação, i18n, acessibilidade) e fswp-security-engineer (entrada, saída, autorização).

Executa um PRD de tema aprovado (fswp-architect). Um tema controla a apresentação. Funcionalidades que devem sobreviver a uma troca de tema (tipos de post, integrações, lógica de negócios) pertencem a um plugin (fswp-plugin-developer); diga isso em vez de escondê-las em functions.php.

Decida o tipo primeiro

TipoQuando escolherArquivos principais
Tema em blocosQuando se deseja edição pelo Site Editor; padrão para novos projetosstyle.css (apenas cabeçalho), theme.json, templates/index.html, parts/, patterns/, styles/
Tema clássicoQuando precisa de templates PHP e lógica personalizada por template, ou precisa dar suporte a WordPress antigostyle.css, index.php, functions.php, arquivos de template
HíbridoTemplates clássicos mais theme.json para configurações e estilos do editorArquivos clássicos + theme.json
Tema filhoAdaptar um tema pai sem bifurcá-lostyle.css com cabeçalho Template:, functions.php, apenas sobrescritas

Por padrão, use um tema em blocos para novos projetos, a menos que o PRD exija o contrário. Temas em blocos precisam do WordPress 5.9 ou superior; verifique a versão atual do esquema theme.json e sua versão mínima do WordPress na documentação antes de definir Requires at least.

Fluxo de trabalho

  1. Scaffold: python3 scripts/scaffold_theme.py --help, depois gere o esqueleto (blocos, clássico ou filho). Execute fswp-qa-engineer/scripts/run_gate.sh <dir> <min-php> --fix uma vez.
  2. Tokens de design: defina paleta, tipografia, espaçamento, larguras de layout e predefinições de borda/sombra em theme.json (blocos/híbrido) ou em propriedades personalizadas CSS (clássico). Use predefinições em templates e padrões em vez de valores fixos.
  3. Templates: construa a hierarquia que o PRD necessita (página inicial, home, single, página, arquivo, pesquisa, 404, além de quaisquer templates personalizados). Reutilize partes de templates para cabeçalho, rodapé e seções repetidas.
  4. Padrões: registre layouts reutilizáveis como arquivos em patterns/ (cabeçalho com comentário: Title, Slug, Categories, Keywords opcionais, Viewport Width, Block Types). Sem imagens remotas.
  5. Variações de estilo: arquivos JSON em styles/ para aparências alternativas; mantenha-os como pequenas sobrescritas de theme.json.
  6. Blocos personalizados ou interatividade que o tema realmente precise: fswp-block-developer. Caso contrário, prefira blocos principais.
  7. Assets: enfileire com wp_enqueue_scripts (clássico) ou theme.json/add_editor_style (blocos); agrupe fontes localmente (entradas fontFace) com suas licenças; sem links de CDN.
  8. Segurança, i18n, acessibilidade: escape toda saída, traduza toda string, atenda às regras de acessibilidade (fswp-security-engineer, fswp-developer/references/coding-standards.md, references/theme-i18n-a11y.md). Use funções nomeadas e prefixadas para hooks (nunca closures), um prefixo de pelo menos quatro letras e sintaxe array() de acordo com os padrões de codificação.
  9. Prontidão para diretório se o destino for o diretório de temas do WordPress.org: fswp-release-manager (references/theme-requirements.md), depois execute python3 ../fswp-qa-engineer/scripts/theme_check.py <dir> --directory. Temas não podem conter tipos de post personalizados, blocos, shortcodes, funções, métodos de contato ou tipos MIME: isso pertence a um plugin. Nomes de temas não podem conter "WordPress", "Theme" ou "Twenty".

Pare e passe para fswp-qa-engineer.

Essenciais de tema clássico

add_theme_support() para title-tag e automatic-feed-links (ambos exigidos pelo diretório), além de post-thumbnails, html5, responsive-embeds, wp-block-styles e editor-styles; language_attributes(), body_class(), post_class(), wp_link_pages() e edit_theme_options para permissões de opções; register_nav_menus; wp_head(), wp_body_open(), wp_footer() presentes; get_template_part() para partes repetidas; tags de template em vez de consultas diretas; wp_reset_postdata() após loops secundários; largura de conteúdo e tamanhos de imagem declarados.

Temas filhos

Enfileire a folha de estilo do pai e a folha de estilo do filho com dependências corretas; sobrescreva templates individuais em vez de copiar o pai; mantenha a versão do filho independente da versão do pai; não copie o functions.php do pai.

Entrega

Arquivo {theme-slug}.zip instalável com a pasta do tema na raiz, readme.txt, screenshot.png (no máximo 1200x900, proporção 4:3), notas de licença para cada asset agrupado e um resumo das etapas manuais pendentes. Referências: references/block-theme.md, references/theme-i18n-a11y.md.

Individual skills in this repo

This repo contains 9 individual skills — each has its own dedicated page.

fswp-api-developer

Domain skill for WordPress REST API and Abilities API work in Full-Stack WP Developer. Covers registering routes with schemas, argument validation and sanitization, permission callbacks, controller classes, exposing post types and meta, authentication (cookie nonce, application passwords), pagination and errors, and registering abilities with input and output schemas and safety annotations. Use for any custom endpoint or machine-readable capability in a plugin or theme.

fswp-architect

Planning stage of Full-Stack WP Developer. Classifies the work (new plugin, new theme, update to an existing plugin or theme, add-on for another product, or WordPress Core patch), triages existing code with a bundled detection script, asks one round of essential questions, does competitive research, and produces one reviewable PRD or change brief with a single approval gate. Also covers Migration mode and multi-session handoff docs. Invoked by fswp-developer before any code is written; consult directly for PRD, change-brief, or handoff-doc questions.

fswp-block-developer

Domain skill for WordPress block editor work in Full-Stack WP Developer. Covers building custom Gutenberg blocks (block.json, static and dynamic rendering, attributes, supports, InnerBlocks, variations, deprecations, block bindings), block patterns, and the Interactivity API (data-wp directives, stores, server-side state), with the @wordpress/scripts build workflow. Use for any custom block, pattern, or front-end interactivity in a plugin or theme.

fswp-core-contributor

WordPress Core contribution stage of Full-Stack WP Developer. Guides a contributor through finding or filing a Trac ticket, setting up the wordpress-develop checkout and test environment, writing a patch or GitHub pull request that follows Core coding standards, inline documentation, backward compatibility and tests, and preparing the ticket comment; also routes block-editor changes to the Gutenberg repository and security reports to the private process. Invoked by fswp-developer for Core patches; consult directly for Core workflow questions.

fswp-devops-engineer

Domain skill for WordPress development tooling in Full-Stack WP Developer. Covers local environments (wp-env with Docker, WordPress Playground and Blueprints), command-line site operations (plugin and theme management, database export, search-replace, cron, scaffolding), coding standards and static analysis (PHPCS with WordPress standards, PHPStan with WordPress stubs), PHP and JS testing setup, and the @wordpress/scripts toolchain. Use when setting up, running, or automating a WordPress dev or test environment.

fswp-maintainer

Change stage for existing WordPress code in Full-Stack WP Developer. Updates, fixes, refactors, and upgrades existing plugins and themes without breaking them, and builds add-ons for products you do not own (WooCommerce extensions, page-builder elements, extensions of other plugins) using hooks instead of edits to third-party files. Covers reading before changing, parity lists, deprecation, host compatibility, upgrade paths, and patch delivery. Invoked by fswp-developer after an approved change brief; consult directly for safe-change or add-on questions.

fswp-qa-engineer

Verification stage of Full-Stack WP Developer. Runs the mechanical gate for plugins and themes (house-rule scripts, PHP lint, PHPCS with WordPress standards, PHP compatibility, PHPStan with WordPress stubs), the manual checklist, PRD or change-brief scenario tests, and the pre-release check. Reports PASS, FAIL, or NOT RUN and never implies a skipped check passed. Invoked by fswp-developer after a build and again before delivery; consult directly to audit any plugin or theme folder.

fswp-reviewer

Independent review stage of Full-Stack WP Developer. Reviews a finished WordPress plugin, theme, add-on, or Core patch through a security lens (WordPress-specific vulnerabilities, REST and AJAX authorization with an API risk map, AI-generated-code risks), a quality lens (error handling, data and upgrade safety, performance, i18n, accessibility, comment accuracy, test gaps, class and type design, scope), and an optional lean lens for trimming over-engineering, reporting only high-confidence findings in a fixed format. Invoked by fswp-developer after the verify gate, normally through the fswp-code-reviewer agent; consult directly to review or optimize any WordPress code.

syncwin/fswp-plugin-developer

Plugin build stage of Full-Stack WP Developer. House standards and code templates for real WordPress plugins (not shortcode snippets) - folder anatomy, activation/uninstall lifecycle, custom post types and tables, admin UI tiers, front-end output on the Atomic Framework, REST and cron, i18n, distribution, and the Tier 3 React admin stack - plus a scaffold script. Also the base structure for add-ons. Invoked by fswp-developer after an approved PRD; consult directly for a specific plugin build pattern.

Habilidades Relacionadas

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community