Communitygithub.com

fswp-theme-developer(テーマ開発)

WordPressテーマ(ブロックテーマ、クラシックテーマ、ハイブリッド、子テーマ)の構築段階を担当します。承認されたPRDに基づき、アクセシビリティ、エスケープ処理、ディレクトリ対応などが組み込まれたテーマを開発し、scaffoldスクリプトも提供します。fswp-developerから呼び出され、既存テーマの変更はfswp-maintainerが担当します。

fswp-theme-developer(テーマ開発) とは?

これは「フルスタックWordPress開発者」ワークフローのテーマ開発段階です。主な役割は、承認されたTheme PRDに基づいてカスタムWordPressテーマを構築することです。ブロックテーマ(theme.json、templates、parts、patterns、styles)、クラシックテーマ(テンプレート階層、functions.php、テーマサポート)、ハイブリッドテーマ、子テーマの4種類から適切なタイプを選択し、各タイプに応じたスキャフォールディング、デザイントークンの定義、テンプレート構築、パターン登録、スタイルバリエーション作成などを実施します。常にリーンコーディング、コーディング規約、i18n、アクセシビリティ、セキュリティエンジニアリングの基準を適用し、エスケープ処理や翻訳を徹底します。WordPress.orgディレクトリ向けには、ディレクトリ要件を満たす確認も行います。テーマスイッチ後も残る機能はプラグインに分離するよう指示し、カスタムブロックやインタラクティブ性が必要な場合は専用のブロック開発者スキルに委譲します。最終成果物はインストール可能なZIPファイルで、readme.txt、screenshot.png、ライセンス情報を含みます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/syncwin/fswp-developer/tree/main/skills/fswp-theme-developer

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

FSWP Theme Developer(テーマ開発者)

基本(常に適用): fswp-developer/references/lean-coding.md(少なく書き、再利用を優先)、fswp-developer/references/coding-standards.md(コーディング規約、ドキュメント、i18n、アクセシビリティ)、fswp-security-engineer(入力、出力、認可)。

承認されたテーマPRD(fswp-architect)を実行します。テーマはプレゼンテーションを制御します。テーマの切り替え後も存続すべき機能(カスタム投稿タイプ、外部連携、ビジネスロジック)はプラグイン(fswp-plugin-developer)に属します。それらを functions.php に隠蔽する代わりに、そのように指示してください。

タイプを最初に決定する

タイプ選択する状況コアファイル
ブロックテーマサイトエディターで編集したい場合、新規ビルドのデフォルトstyle.css(ヘッダーのみ)、theme.json、templates/index.html、parts/、patterns/、styles/
クラシックテーマPHPテンプレートとテンプレートごとのカスタムロジックが必要、または古いWordPressに対応する必要がある場合style.css、index.php、functions.php、テンプレートファイル
ハイブリッドクラシックテンプレートに加えて、設定やエディタースタイル用の theme.json が必要な場合クラシックファイル + theme.json
子テーマ親テーマをフォークせずに調整する場合Template: ヘッダー付き style.css、functions.php、上書きファイルのみ

PRDで特に指定がない限り、新規ビルドはブロックテーマをデフォルトにします。ブロックテーマにはWordPress 5.9以降が必要です。Requires at least を設定する前に、ドキュメントで現在の theme.json スキーマバージョンとその最小WordPressバージョンを確認してください。

ワークフロー

  1. スキャフォールド:python3 scripts/scaffold_theme.py --help を実行し、スケルトン(ブロック、クラシック、または子テーマ)を生成します。fswp-qa-engineer/scripts/run_gate.sh <dir> <min-php> --fix を1回実行します。
  2. デザイントークン:theme.json(ブロック/ハイブリッド)またはCSSカスタムプロパティ(クラシック)に、パレット、タイポグラフィ、スペーシング、レイアウト幅、ボーダー/シャドウのプリセットを定義します。テンプレートやパターンでは、ハードコードされた値ではなくプリセットを使用します。
  3. テンプレート:PRDに必要な階層(フロントページ、ホーム、シングル、固定ページ、アーカイブ、検索、404、およびカスタムテンプレート)を構築します。ヘッダー、フッター、繰り返しセクションにはテンプレートパーツを再利用します。
  4. パターン:再利用可能なレイアウトを patterns/ 内のファイルとして登録します(ヘッダーコメント:Title、Slug、Categories、オプションのKeywords、Viewport Width、Block Types)。リモート画像は使用禁止。
  5. スタイルバリエーション:styles/ 内のJSONファイルで代替ルックを提供します。theme.json に対する小さなオーバーライドに留めます。
  6. テーマに本当に必要なカスタムブロックやインタラクティブ機能:fswp-block-developer に委譲します。それ以外はコアブロックを優先します。
  7. アセット:wp_enqueue_scripts(クラシック)または theme.json / add_editor_style(ブロック)でエンキューします。フォントはローカルにバンドルし(fontFace エントリ)、ライセンス情報を含めます。CDNリンクは使用禁止。
  8. セキュリティ、i18n、アクセシビリティ:すべての出力をエスケープし、すべての文字列を翻訳し、アクセシビリティルールを満たします(fswp-security-engineer、fswp-developer/references/coding-standards.md、references/theme-i18n-a11y.md)。フックには名前付きで接頭辞付きの関数を使用し(クロージャは不可)、接頭辞は最低4文字とし、コーディング規約に従って array() 構文を使用します。
  9. ディレクトリ対応(対象がWordPress.orgテーマディレクトリの場合):fswp-release-manager(references/theme-requirements.md)を実行し、その後 python3 ../fswp-qa-engineer/scripts/theme_check.py <dir> --directory を実行します。テーマにカスタム投稿タイプ、ブロック、ショートコード、ロール、連絡先メソッド、MIMEタイプを含めることはできません。これらはプラグインに属します。テーマ名に「WordPress」「Theme」「Twenty」を含めることはできません。

停止して fswp-qa-engineer に引き継ぎます。

クラシックテーマの必須事項

add_theme_support() で title-tag と automatic-feed-links(どちらもディレクトリ必須)、さらに post-thumbnails、html5、responsive-embeds、wp-block-styles、editor-styles をサポートします。language_attributes()、body_class()、post_class()、wp_link_pages()、edit_theme_options(オプション権限用)、register_nav_menus。wp_head()、wp_body_open()、wp_footer() をテンプレートに含めます。繰り返し部分には get_template_part() を使用します。直接クエリではなくテンプレートタグを使用します。セカンダリループ後は wp_reset_postdata() を実行します。コンテンツ幅と画像サイズを宣言します。

子テーマ

親スタイルシートと子スタイルシートを正しい依存関係でエンキューします。親テンプレートをコピーするのではなく、必要なテンプレートのみを上書きします。子テーマのバージョンは親とは独立して管理します。親の functions.php をコピーしてはいけません。

納品

インストール可能な {theme-slug}.zip ファイルに、テーマフォルダをルートに配置し、readme.txt、screenshot.png(最大1200x900、4:3比率)、バンドルされたすべてのアセットのライセンス情報、および手動で行うべき手順のサマリーを含めます。参考資料: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.

関連スキル