Communitygithub.com

FSWP 主题开发

全栈 WordPress 开发流水线中的主题构建环节。负责构建自定义 WordPress 主题——区块主题、经典主题、混合主题和子主题,内置可访问性、转义与目录就绪支持,并附带脚手架脚本。由 fswp-developer 在新主题 PRD 批准后调用;如需特定主题模式可直接咨询。对现有主题的变更请使用 fswp-maintainer。

FSWP 主题开发 是什么?

FSWP Theme Developer 是一个专注于 WordPress 主题构建的 AI 智能体技能,作为全栈 WordPress 开发者(FSWP)流水线的一部分运行。它接收来自 fswp-architect 的已批准主题 PRD,并根据需求自动选择合适的主题类型:区块主题(推荐用于新构建,支持站点编辑器)、经典主题(需要 PHP 模板)、混合主题(经典模板 + theme.json)或子主题(继承父主题)。该技能严格遵循可访问性标准、输出转义、国际化原则和 WordPress 目录提交要求,确保每个主题都具备生产就绪质量。核心工作流程包括:使用 Python 脚手架脚本创建主题骨架、在 theme.json 或 CSS 中定义设计令牌、按模板层级构建模板、在 patterns/ 目录中注册可复用布局、创建 style.json 形式的样式变体,以及通过 wp_enqueue_scripts 或 theme.json 安全地加载资产。重要的是,该技能明确禁止在主题中实现自定义文章类型、区块、短代码等“功能”逻辑——这些必须委派给 fswp-block-developer 或 fswp-plugin-developer。最终交付物为一个包含主题文件夹、readme.txt、screenshot.png 和所有打包资产许可证说明的可安装 ZIP 文件。该技能与 fswp-qa-engineer、fswp-security-engineer 以及 fswp-developer 的编码标准和精益编码参考紧密协作。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/syncwin/fswp-developer/tree/main/skills/fswp-theme-developer

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

FSWP 主题开发 是做什么的?

基础(始终适用): fswp-developer/references/lean-coding.md(少写,优先复用)、fswp-developer/references/coding-standards.md(编码标准、文档、国际化、可访问性)以及 fswp-security-engineer(输入、输出、授权)。

执行已批准的主题 PRD(fswp-architect)。主题控制呈现。必须能在主题切换后保留的功能(如自定义文章类型、集成、业务逻辑)应归入插件(fswp-plugin-developer);请明确说明,而不是将其隐藏在 functions.php 中。

首先确定类型

类型适用场景核心文件
区块主题需要站点编辑器编辑;新构建默认选择style.css(仅头部)、theme.json、templates/index.html、parts/、patterns/、styles/
经典主题需要 PHP 模板和每个模板的自定义逻辑,或必须支持旧版 WordPressstyle.css、index.php、functions.php、模板文件
混合主题经典模板加上用于设置和编辑器样式的 theme.json经典文件 + theme.json
子主题调整父主题而不派生它style.css(包含 Template: 头部)、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 一次。
  2. 设计令牌:在 theme.json(区块/混合主题)或 CSS 自定义属性(经典主题)中定义调色板、排版、间距、布局宽度以及边框/阴影预设。在模板和模式中使用预设,避免硬编码值。
  3. 模板:构建 PRD 所需的层级结构(首页、主页、单篇、页面、归档、搜索、404 页面,以及任何自定义模板)。复用模板部分(header、footer 和重复区域)。
  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. 安全性、国际化、可访问性:转义每个输出、翻译每个字符串、满足可访问性规则(fswp-security-engineer、fswp-developer/references/coding-standards.md、references/theme-i18n-a11y.md)。对钩子使用命名且带前缀的函数(禁止闭包),前缀至少四个字母,并根据编码标准使用 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.

相关技能