Communitygithub.com

subhannaeem/wp-build-complete-website

根据简短描述构建一个完整、响应式、动画化的WordPress网站(区块主题):规划、页面、流体设计、动效、性能与可访问性检查。当用户说“帮我建一个完整的网站”、“为……创建一个WordPress站点”或想要一个完整的响应式互动WordPress网站时使用。适用于Claude Code、OpenAI Codex和GitHub Copilot。

wp-build-complete-website 是什么?

该技能能够根据用户的一句话描述,自动规划并生成一个完整的WordPress区块主题网站。它按照严格的“门控”流程执行:首先与用户确认网站简报(包含目的、页面列表、功能等),然后依次进行项目初始化、基于令牌的设计系统定义、页面与内容创建、动效添加,最后进行性能、可访问性和响应式检查。技能设计为模块化,融合了`wp-responsive-fluid-design`、`wp-animated-block-theme`等子技能。最终会生成一个可直接安装的区块主题,并附上使用说明。它适用于Claude Code、OpenAI Codex和GitHub Copilot,不依赖页面构建器或CSS框架,严格遵循WordPress核心块和模式,并确保所有动效尊重用户偏好(如`prefers-reduced-motion`)。

兼容平台✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/subhannaeem/universal-agent-skills/tree/HEAD/skills/wp-build-complete-website

在你喜欢的 AI 中提问

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

文档

构建一个完整的WordPress网站

只输入一段描述,输出一个完整的区块主题。此技能按顺序运行其他wp-*技能。每个门必须完成后才能开始下一个。

门0:简报(硬停止)

根据用户的描述,编写SITE_BRIEF.md,包含:

  • 目的与受众、品牌调性、颜色和字体(若无则建议默认值)。
  • 页面列表(默认:首页、关于我们、服务或产品、博客、联系)。
  • 功能(联系表单、博客、画廊、商店)。仅包括用户要求的内容。
  • 假设条件,编号列出,每个附有默认值。

展示给用户并要求其接受、拒绝或提出建议。停止并等待。

门1:项目设置

  1. 在一个新文件夹(用户选择的名称)中工作。绝不触碰现有网站的文件。
  2. 创建一个区块主题:style.css、theme.json、templates/、parts/(页眉、页脚)、patterns/、assets/、functions.php。
  3. 使用WordPress核心块和模式。不使用页面构建器,不使用CSS框架。
  4. 可选本地测试:WordPress Playground或wp-env(如果可用)。

门2:设计系统(wp-responsive-fluid-design)

在theme.json中定义颜色、流体字号比例和间距令牌。构建页眉、页脚、导航和移动菜单。所有值来源于令牌。

门3:页面和内容

为简报中的每个页面创建模板和模式。使用清晰的占位文本(当知道目的时不要使用Lorem ipsum)和带alt文本的图片。使用语义化HTML:每个页面一个h1。

门4:动效(wp-animated-block-theme)

使用CSS优先添加滚动揭示、悬停和页面过渡效果,然后使用交互性API。所有效果尊重prefers-reduced-motion;内容在无JS情况下仍然可见。仅当请求的效果需要时,才使用wp-gsap-lottie-integration。

门5:检查

  1. wp-motion-performance-audit:修复高优先级问题(触发布局的动画、布局偏移、繁重脚本)。
  2. wp-accessible-ui-review:修复高优先级问题(焦点、对比度、标签、标题)。
  3. 在360、768、1024和1440像素宽度下检查:无水平滚动。
  4. 验证:对PHP文件执行php -l,对theme.json验证JSON有效性。

门6:交付

在主题文件夹中编写简短的README.md:如何安装(压缩并上传)、如何编辑页面,以及未验证的内容(真实环境Lighthouse、真实设备、屏幕阅读器、托管)。不要声称执行了未运行的内容。除非用户要求,否则不进行部署、推送或提交。

规则

  • 任何文件中不得包含密钥、API密钥或绝对本地路径。
  • 仅添加用户批准的插件;优先不添加任何插件。
  • 使用通用的占位内容;绝不使用真实的个人数据或客户数据。
  • 每次更改都要可追溯到简报。

相关技能