Communitygithub.com

fswp-theme-developer

Étape de création de thèmes pour Full-Stack WP Developer. Construit des thèmes WordPress personnalisés – thèmes blocs, classiques, hybrides et enfants – avec accessibilité, échappement, et préparation pour l’annuaire, le tout via un script d’échafaudage.

Qu'est-ce que fswp-theme-developer ?

FSWP Theme Developer est un agent spécialisé dans la création de thèmes WordPress, intervenant après qu’un PRD de thème a été approuvé par l’architecte. Il prend en charge tous les types de thèmes : les thèmes blocs (basés sur theme.json, templates, patterns, variantes de style), les thèmes classiques (hiérarchie de templates, functions.php, supports de thème), les thèmes hybrides et les thèmes enfants. L’agent suit un workflow structuré en neuf étapes : échafaudage via un script Python, définition des design tokens dans theme.json, construction des templates, enregistrement des patterns, création de variantes de style, et gestion des assets. Il applique systématiquement les règles d’accessibilité, d’internationalisation et de sécurité, et prépare le thème pour l’annuaire WordPress.org en respectant les exigences de l’annuaire. FSWP Theme Developer peut être invoqué directement pour un motif de thème spécifique, mais pour des modifications sur un thème existant, il faut utiliser fswp-maintainer. L’agent s’appuie sur les références de codage, les normes i18n et a11y, ainsi que sur le moteur de sécurité pour garantir un code de qualité prêt à la production.

Compatible avec~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/syncwin/fswp-developer/tree/main/skills/fswp-theme-developer
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

FSWP Theme Developer

Fondamental (toujours appliqué) : fswp-developer/references/lean-coding.md (écrire moins, réutiliser d'abord), fswp-developer/references/coding-standards.md (normes de codage, documentation, i18n, accessibilité), et fswp-security-engineer (entrée, sortie, autorisation).

Exécute un PRD de thème approuvé (fswp-architect). Un thème contrôle la présentation. Les fonctionnalités qui doivent survivre à un changement de thème (types de publication, intégrations, logique métier) appartiennent à une extension (fswp-plugin-developer) ; dites-le plutôt que de les cacher dans functions.php.

Déterminer le type d'abord

TypeQuand choisirFichiers principaux
Thème blocÉdition avec l'éditeur de site souhaitée ; nouvelles constructions par défautstyle.css (en-tête uniquement), theme.json, templates/index.html, parts/, patterns/, styles/
Thème classiqueNécessite des templates PHP et une logique personnalisée par template, ou doit supporter d'anciennes versions de WordPressstyle.css, index.php, functions.php, fichiers de templates
Thème hybrideTemplates classiques plus theme.json pour les paramètres et les styles de l'éditeurFichiers classiques + theme.json
Thème enfantAdapter un thème parent sans le dupliquerstyle.css avec l'en-tête Template:, functions.php, uniquement les surcharges

Par défaut, choisir un thème bloc pour les nouvelles constructions sauf si le PRD indique le contraire. Les thèmes blocs nécessitent WordPress 5.9 ou une version ultérieure ; vérifiez la version actuelle du schéma theme.json et sa version minimale de WordPress dans la documentation avant de définir Requires at least.

Workflow

  1. Échafaudage : python3 scripts/scaffold_theme.py --help, puis générez le squelette (bloc, classique ou enfant). Exécutez fswp-qa-engineer/scripts/run_gate.sh <dir> <min-php> --fix une fois.
  2. Design tokens : définissez la palette, la typographie, l'espacement, les largeurs de mise en page et les préréglages de bordure/ombre dans theme.json (bloc/hybride) ou dans les propriétés personnalisées CSS (classique). Utilisez des préréglages dans les templates et les patterns au lieu de valeurs en dur.
  3. Templates : construisez la hiérarchie dont le PRD a besoin (page d'accueil, page d'accueil du blog, article, page, archive, recherche, 404, plus les templates personnalisés). Réutilisez les parties de template pour l'en-tête, le pied de page et les sections répétées.
  4. Patterns : enregistrez les mises en page réutilisables sous forme de fichiers dans patterns/ (commentaire d'en-tête : Title, Slug, Categories, Keywords optionnels, Viewport Width, Block Types). Pas d'images distantes.
  5. Variations de style : fichiers JSON dans styles/ pour des apparences alternatives ; gardez-les comme des surcharges légères de theme.json.
  6. Blocs personnalisés ou interactivité dont le thème a vraiment besoin : fswp-block-developer. Sinon, privilégiez les blocs de base.
  7. Assets : ajoutez-les avec wp_enqueue_scripts (classique) ou theme.json/add_editor_style (bloc) ; regroupez les polices localement (entrées fontFace) avec leurs licences ; pas de liens CDN.
  8. Sécurité, i18n, accessibilité : échappez chaque sortie, traduisez chaque chaîne, respectez les règles d'accessibilité (fswp-security-engineer, fswp-developer/references/coding-standards.md, references/theme-i18n-a11y.md). Utilisez des fonctions nommées et préfixées pour les hooks (jamais de fermetures), un préfixe d'au moins quatre lettres, et la syntaxe array() conformément aux normes de codage.
  9. Préparation pour l'annuaire si la cible est l'annuaire des thèmes WordPress.org : fswp-release-manager (references/theme-requirements.md), puis exécutez python3 ../fswp-qa-engineer/scripts/theme_check.py <dir> --directory. Les thèmes ne peuvent pas contenir de types de publication personnalisés, de blocs, de codes courts, de rôles, de méthodes de contact ou de types MIME : ceux-ci appartiennent à une extension. Les noms de thèmes ne peuvent pas contenir "WordPress", "Theme" ou "Twenty".

Arrêtez et transmettez à fswp-qa-engineer.

Essentiels du thème classique

add_theme_support() pour title-tag et automatic-feed-links (tous deux requis par l'annuaire), plus post-thumbnails, html5, responsive-embeds, wp-block-styles, et editor-styles ; language_attributes(), body_class(), post_class(), wp_link_pages(), et edit_theme_options pour les permissions d'options ; register_nav_menus ; présence de wp_head(), wp_body_open(), wp_footer() ; get_template_part() pour les parties répétées ; utilisez les balises de template plutôt que des requêtes directes ; wp_reset_postdata() après les boucles secondaires ; déclarez la largeur du contenu et les dimensions des images.

Thèmes enfants

Ajoutez la feuille de style parente et la feuille de style enfant avec les dépendances correctes ; surchargez les templates individuels plutôt que de copier le parent ; gardez la version de l'enfant indépendante de celle du parent ; ne copiez pas le functions.php du parent.

Livraison

{theme-slug}.zip installable avec le dossier du thème à la racine, readme.txt, screenshot.png (au maximum 1200x900, ratio 4:3), les mentions de licence pour chaque asset regroupé, et un résumé des étapes manuelles à effectuer. Références : 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 associés

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