Communitygithub.com

wpgaurav/generateblocks-skills

GenerateBlocks 技能，帮助使用 AI 工具创建更优秀的布局。

generateblocks-skills 是什么？

该技能集为 AI 编码助手（如 Claude Code、Cursor、Windsurf 等）提供针对 GenerateBlocks WordPress 插件的深度优化文档和开发资源。它基于 GenerateBlocks 免费版 2.3 和 Pro 版 2.6 的源代码验证，确保所有块模式、属性顺序和动态标签的准确性，而非依赖训练数据。技能覆盖静态页面构建、动态内容查询（包括 27 个动态标签语法）、ACF 自定义字段、动画效果（CSS 滚动驱动、悬停微交互、无障碍动画保护）、Pro 特色块（手风琴、标签页、轮播、导航、表单系统）以及全站模板（GeneratePress Elements/FSE）的生成。此外，还支持将 HTML/CSS、Elementor 或 Figma 设计转换为 GenerateBlocks 块标记，并提供 38 个现成模板和交互式安装脚本，简化集成流程。

兼容平台✓Claude Code✓Codex CLI✓Cursor✓Gemini CLI✓Windsurf
npx skills add https://github.com/wpgaurav/generateblocks-skills/tree/main
查看原文→浏览所有技能

在你喜欢的 AI 中提问

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

文档

GenerateBlocks 技能

为 GenerateBlocks WordPress 插件提供的大模型优化技能文档与开发资源。

已根据 GenerateBlocks 免费版 2.3 和 GB Pro 2.6 进行源代码验证（2026 年 6 月）。本技能中每个块的模式、属性顺序和动态标签均对照本仓库中的插件源代码进行检查，而非依赖训练数据。

技能可构建的内容

  • 静态区域 — 英雄区、定价表、卡片、常见问题、行动号召、完整落地页
  • 动态内容 — 查询循环（博客网格、相关文章、归档）、27 个动态标签及其精确语法
  • 自定义字段 — ACF 文本/图片/链接/分组字段、重复器循环、选项页、元查询
  • 动画效果 — 悬停微交互、关键帧入场、CSS 滚动驱动展示、减动作保护
  • 条件逻辑 — GB Pro 块/菜单条件、表单字段条件、免费插件替代方案
  • GB Pro 块 — 手风琴、标签页、轮播、导航、网站头部、覆盖/超级菜单、2.6 表单系统
  • 全站模板 — GeneratePress 元素（循环模板、页面英雄区、钩子、显示规则）、FSE 块主题

快速安装

通过一条命令为你的 AI 编码助手安装技能：

git clone https://github.com/wpgaurav/generateblocks-skills.git
cd generateblocks-skills
chmod +x install.sh
./install.sh

这将启动一个交互式安装程序，为你的首选工具配置技能。

支持的工具

工具安装位置格式
Claude Code~/.claude/skills/技能目录
Cursor~/.cursor/skills/技能目录
Windsurf~/.windsurf/rules/合并的 Markdown
OpenAI Codex CLI~/.codex/instructions.md合并的 Markdown
Gemini CLIGEMINI.md（项目根目录）合并的 Markdown
GitHub Copilot.github/copilot-instructions.md合并的 Markdown
Cline / Roo Code.clinerules（项目根目录）合并的 Markdown
AiderCONVENTIONS.md（项目根目录）合并的 Markdown

安装选项

./install.sh              # 交互模式（选择工具）
./install.sh --all        # 为所有工具安装
./install.sh claude       # 仅安装 Claude Code
./install.sh cursor codex # 同时安装多个工具
./install.sh --help       # 显示帮助

替代方案：手动设置

如果你不想使用安装程序，有两个选择：

选项 A：上传技能文件

下载 .skill 文件，并在 Claude.ai、ChatGPT、Gemini 或任何 AI 助手的新对话开始时上传。

技能下载
GenerateBlocks 布局.skill
HTML 转 GenerateBlocks.skill
Elementor 转 GenerateBlocks.skill
Figma 转 GenerateBlocks.skill

选项 B：让 AI 指向技能文件

使用 Claude Code、Cursor 或 Windsurf 时，直接引用技能：

Read skills/generateblocks-layouts/SKILL.md 并创建一个包含 3 张卡片的推荐语轮播

技能文件的直接链接：

复制粘贴示例

浏览 examples/ 文件夹，获取 38 个即用型模板，涵盖 14 种区域类型：

区域描述
英雄区统计栏、双行动号召（5 种变体）
定价表3 层级，带“热门”徽章
卡片网格博客文章、作品集
功能列表6 个功能，带图标
常见问题区域编号问答，两列布局
推荐语引用、头像、星级
粘性行动号召深色横幅，双按钮
文章网格特色文章 + 小文章
统计区域深色背景上 4 个指标
服务网格便当盒布局
标志轮播客户/合作伙伴标志
团队网格团队成员卡片
时间线垂直时间线
对比表功能对比

每个文件夹包含多个变体以及生成它们的提示。一个完全动态的查询循环博客网格位于 skills/generateblocks-layouts/examples/layouts/query-blog-grid.html。

额外福利： 查看 examples/from-gauravtiwari-org/，获取从生产网站导出的真实区域。

使用示例

  1. 打开任意 examples/ 文件夹
  2. 复制任意 output-*.html 文件内容
  3. 在 WordPress 中，打开你的页面/文章
  4. 切换到代码编辑器（三点菜单 > 代码编辑器）
  5. 粘贴块
  6. 切换回可视化编辑器

包含内容

generateblocks-skills/
├── install.sh                 # 多工具技能安装程序
├── CLAUDE.md                  # Claude Code 项目说明
├── AGENTS.md                  # 通用 LLM 说明
├── skills/                    # 技能源文件
│   ├── generateblocks-layouts/
│   │   ├── SKILL.md           # 主入口（精简版，深度内容在 references/ 中）
│   │   ├── references/        # 23 个参考文件（参见下方映射）
│   │   └── examples/          # 基础、复合、布局、SVG 示例
│   ├── html-to-generateblocks/
│   ├── elementor-to-generateblocks/
│   └── figma-to-generateblocks/
├── importable/                # 用于上传的 .skill 和 .zip 文件
├── examples/                  # 14 个区域 38 个黄金示例
├── generateblocks/            # 供参考的插件源代码（2.3.0-rc）
└── generateblocks-pro/        # 供参考的 Pro 插件源代码（2.6.0-rc）

技能

技能目的
GenerateBlocks 布局使用 GB V2 构建任何内容：静态区域、查询循环、动态标签、ACF 数据、动画、条件、Pro 表单/交互块、全站模板
HTML 转 GenerateBlocks将 HTML/CSS 转换为 GenerateBlocks 块标记
Elementor 转 GenerateBlocks将 Elementor 布局迁移为干净的 GB 块
Figma 转 GenerateBlocks将 Figma 设计转换为 GB 块

参考文件映射（generateblocks-layouts/references/）

文件涵盖内容
_index.md任务路由 — 根据任务加载哪个文件
recovery-rules.md所有已知的“尝试恢复”错误原因及精确修复方法
field-notes.md实际转换经验：转义工作流、验证脚本
block-types.md元素/文本/媒体/形状已验证属性模式
dynamic-tags.md所有 27 个动态标签的标准目录及精确语法
query-block.md查询/循环器/循环项 + Pro 查询扩展
acf-and-custom-fields.mdACF 字段、重复器循环、选项页、Meta Box
conditions.mdPro 块/菜单/表单条件 + 免费替代方案
template-authoring.md全站：GeneratePress 元素、FSE、归档模板
animations.md悬停、关键帧、滚动驱动动画、减动作
gb-pro.mdPro 功能映射（28 个块、全局类、版本时间线）
pro-forms.mdPro 2.6 表单：字段、验证、ESP 集成、Turnstile
pro-interactive.md手风琴、标签页、轮播、导航、网站头部、覆盖
css-patterns.md · svg-icons.md · responsive.md样式模式
global-styles.md · patterns.md · performance.md · migrations.md · troubleshooting.md辅助指南

可导入格式

importable/ 文件夹为每个技能包含两种格式：

  • .skill — 上传到任何 AI 聊天（Claude.ai、ChatGPT、Gemini）
  • .zip — 包含参考文件的压缩技能包

GenerateBlocks V2 快速参考

四个核心块加上查询系列：

generateblocks/element    → 容器（div, section, nav, figure, a, ul/ol/li, dl/dt/dd）
generateblocks/text       → 文本（h1-h6, p, span, div, a, button, figcaption, li）
generateblocks/media      → 图片（仅 img — 静态和动态）
generateblocks/shape      → SVG 图标
generateblocks/query      → 动态列表（+ 循环器、循环项、查询无结果、查询分页）

最重要规则：

  • 使用 generateblocks/element（而非 /container），generateblocks/text（而非 /headline 或 /button）
  • htmlAttributes 是一个普通对象（{"href":"https://example.com/about/"}）— 绝不能是数组
  • 链接：包裹文本 span 子元素的元素 <a>。文本 <a> 在保存时移除其 href；带纯文本的元素 <a> 会触发恢复
  • JSON 属性顺序遵循每个块的 block.json 声明顺序，className 放在最后
  • css 字符串是单行、压缩、按字母顺序排列的 — 悬停状态存在于 styles 对象中

块格式（选项 A — 插件自动注入 id-class）：

<!-- wp:generateblocks/element {"uniqueId":"hero001","tagName":"section","styles":{...},"css":"...","className":"gb-element"} -->
<section class="gb-element-hero001 gb-element">
    <!-- 内容 -->
</section>
<!-- /wp:generateblocks/element -->

动态标签 — 标签名后加空格，管道分隔选项，不加引号：

{{post_title link:post}}
{{post_permalink}}
{{featured_image size:large}}
{{post_excerpt length:25}}
{{post_date dateFormat:M j, Y}}
{{term_list tax:category|sep:, }}
{{post_meta key:my_acf_field}}
{{post_meta key:repeater.0.subfield}}

{{post_url}}、{{featured_image_url}}、{{post_terms}}、{{acf}} 以及任何 key="quoted" 形式不存在 — 它们可以保存但会渲染为纯文本。完整目录见 references/dynamic-tags.md。

示例提示

"创建一个包含标题、副标题、两个行动号召按钮和一个 4 项统计栏的英雄区"

"构建一个 3 列定价表，中间层级高亮显示"

"构建一个相关文章区域：3 篇来自同一分类的文章，排除当前文章"

"将我的 ACF 重复器字段 team_members 循环为一个 3 列团队网格"

"为 GeneratePress 元素构建一个继承查询的归档循环模板"

"为此区域添加滚动显示动画，带减动作回退"

"将此 HTML 转换为 GenerateBlocks：[粘贴 HTML]"

限制

  • 无外部 URL — 提供 HTML、截图或描述
  • 无自定义 JavaScript — 交互仅为 CSS 加 GB Pro 内置的 JS 块（手风琴、标签页、轮播、覆盖、即时分页）
  • 占位图片 — 生成后替换为真实图片
  • 悬停推断 — 根据静态设计推断交互状态
  • UI 管理设置 — 条件规则、表单操作、覆盖触发器和显示规则在 wp-admin 中配置，而非块标记中；技能会将其列为手动步骤
  • Pro 2.6 / 免费版 2.3 功能（表单、CSS 模式）截至 2026 年 6 月为 beta 版本 — 稳定版本的网站尚不具备这些功能

开发

cd generateblocks

npm run build          # 生产构建
npm run start          # 监听模式
npm run test:unit      # Jest 单元测试
npm run test:e2e       # Playwright E2E
npm run wp-env:start   # 本地 WordPress

其他 LLM

对于非 Claude 的助手（GPT、Gemini 等），请参阅 AGENTS.md 获取通用说明 — 或直接运行 ./install.sh 自动设置你的工具。

许可证

  • 插件源代码：GPL-2.0-or-later
  • 技能文档：MIT

相关技能

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community