Communitygithub.com

fswp-theme-developer

Etapa de construcción de temas del desarrollador Full-Stack WP. Construye temas de WordPress personalizados: temas de bloques, clásicos, híbridos y temas hijo, con accesibilidad, escapado y preparación para el directorio incorporados, más un script de andamiaje.

¿Qué es fswp-theme-developer?

Este skill, `fswp-theme-developer`, gestiona la etapa completa de construcción de temas dentro del ecosistema Full-Stack WP Developer. Es invocado por `fswp-developer` después de que un PRD de tema ha sido aprobado por `fswp-architect`. El skill determina automáticamente el tipo de tema adecuado –bloques, clásico, híbrido o hijo– basándose en los requisitos del PRD, y genera una estructura de proyecto completa con archivos esenciales como `theme.json`, plantillas, partes de plantillas, patrones y variaciones de estilo. Durante el desarrollo, aplica principios fundamentales de codificación ajustada, estándares de codificación de WordPress y directrices de seguridad, i18n y accesibilidad. Incluye un flujo de trabajo paso a paso que va desde el andamiaje con `scaffold_theme.py`, la definición de tokens de diseño, la construcción de la jerarquía de plantillas, el registro de patrones reutilizables, la gestión de estilos y la preparación para el directorio de WordPress.org si es necesario. El skill finaliza generando un archivo `.zip` instalable con todos los activos necesarios, listo para la revisión de `fswp-qa-engineer`. Está diseñado para que ningún desarrollador necesite recordar cada detalle manualmente, sino que el agente se encargue de la lógica repetitiva y las mejores prácticas.

Compatible con~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→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

FSWP Theme Developer

Fundacional (siempre aplicado): fswp-developer/references/lean-coding.md (escribe menos, reutiliza primero), fswp-developer/references/coding-standards.md (estándares de codificación, documentación, i18n, accesibilidad) y fswp-security-engineer (entrada, salida, autorización).

Ejecuta un PRD de tema aprobado (fswp-architect). Un tema controla la presentación. Las funcionalidades que deben sobrevivir a un cambio de tema (tipos de contenido, integraciones, lógica de negocio) pertenecen a un plugin (fswp-plugin-developer); díselo en lugar de ocultarlas en functions.php.

Decide el tipo primero

TipoCuándo elegirloArchivos principales
Tema de bloquesSe desea edición con el Editor del Sitio; nuevas construcciones por defectostyle.css (solo cabecera), theme.json, templates/index.html, parts/, patterns/, styles/
Tema clásicoNecesita plantillas PHP y lógica personalizada por plantilla, o debe soportar WordPress antiguostyle.css, index.php, functions.php, archivos de plantilla
HíbridoPlantillas clásicas más theme.json para configuraciones y estilos del editorArchivos clásicos + theme.json
Tema hijoAjustar un tema padre sin bifurcarlostyle.css con cabecera Template:, functions.php, solo sobrescrituras

Por defecto, elige un tema de bloques para nuevas construcciones a menos que el PRD requiera otra cosa. Los temas de bloques necesitan WordPress 5.9 o superior; verifica la versión actual del esquema de theme.json y su versión mínima de WordPress en la documentación antes de fijar Requires at least.

Flujo de trabajo

  1. Andamiaje: python3 scripts/scaffold_theme.py --help, luego genera el esqueleto (bloques, clásico o hijo). Ejecuta fswp-qa-engineer/scripts/run_gate.sh <dir> <min-php> --fix una vez.
  2. Tokens de diseño: define paleta, tipografía, espaciado, anchos de diseño y ajustes preestablecidos de borde/sombra en theme.json (bloques/híbrido) o en propiedades personalizadas CSS (clásico). Usa ajustes preestablecidos en plantillas y patrones en lugar de valores fijos.
  3. Plantillas: construye la jerarquía que el PRD necesite (portada, inicio, entrada individual, página, archivo, búsqueda, 404, más cualquier plantilla personalizada). Reutiliza partes de plantilla para encabezado, pie y secciones repetidas.
  4. Patrones: registra diseños reutilizables como archivos en patterns/ (comentario de cabecera: Title, Slug, Categories, Keywords opcional, Viewport Width, Block Types). Sin imágenes remotas.
  5. Variaciones de estilo: archivos JSON en styles/ para aspectos alternativos; mantenlos como pequeñas sobrescrituras de theme.json.
  6. Bloques personalizados o interactividad que el tema realmente necesite: fswp-block-developer. De lo contrario, prefiere bloques principales.
  7. Activos: encola con wp_enqueue_scripts (clásico) o mediante theme.json/add_editor_style (bloques); agrupa fuentes localmente (entradas fontFace) con sus licencias; sin enlaces CDN.
  8. Seguridad, i18n, accesibilidad: escapa cada salida, traduce cada cadena, cumple las reglas de accesibilidad (fswp-security-engineer, fswp-developer/references/coding-standards.md, references/theme-i18n-a11y.md). Usa funciones con nombre y prefijo para los hooks (nunca closures), un prefijo de al menos cuatro letras, y sintaxis array() según los estándares de codificación.
  9. Preparación para el directorio si el destino es el directorio de temas de WordPress.org: fswp-release-manager (references/theme-requirements.md), luego ejecuta python3 ../fswp-qa-engineer/scripts/theme_check.py <dir> --directory. Los temas no pueden contener tipos de contenido personalizados, bloques, shortcodes, roles, métodos de contacto o tipos MIME: eso pertenece a un plugin. Los nombres de temas no pueden contener "WordPress", "Theme" ni "Twenty".

Detente y pasa a fswp-qa-engineer.

Esenciales de tema clásico

add_theme_support() para title-tag y automatic-feed-links (ambos requeridos por el directorio), además de post-thumbnails, html5, responsive-embeds, wp-block-styles y editor-styles; language_attributes(), body_class(), post_class(), wp_link_pages() y edit_theme_options para permisos de opciones; register_nav_menus; wp_head(), wp_body_open(), wp_footer() presentes; get_template_part() para partes repetidas; etiquetas de plantilla en lugar de consultas directas; wp_reset_postdata() después de bucles secundarios; ancho de contenido y tamaños de imagen declarados.

Temas hijo

Encola la hoja de estilos del padre y la del hijo con dependencias correctas; sobrescribe plantillas individuales en lugar de copiar el padre; mantén la versión del hijo independiente de la del padre; no copies el functions.php del padre.

Entrega

{theme-slug}.zip instalable con la carpeta del tema en la raíz, readme.txt, screenshot.png (como máximo 1200x900, relación 4:3), notas de licencia para cada activo empaquetado y un resumen de los pasos manuales pendientes. Referencias: 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.

Skills relacionados

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