Communitygithub.com

wpgaurav/generateblocks-skills

GenerateBlocks 技能，可透過 AI 工具建立更優質的版面配置。

generateblocks-skills 是什麼？

這個技能包提供 LLM 優化的文件與開發資源，專為 GenerateBlocks WordPress 外掛（免費版 2.3 與 Pro 2.6）設計。技能內容經過原始碼驗證，涵蓋靜態區塊（如英雄區、價格表、卡片網格、常見問題、行動呼籲和完整登陸頁面）以及動態內容（查詢迴圈、27 個動態標籤、ACF 自訂欄位、重複器迴圈、選項頁面與元查詢）。此外，還支援動畫（懸停微互動、關鍵幀進場、CSS 滾動驅動顯示、減少動作保護）、條件邏輯（Pro 區塊/選單條件、表單條件以及免費外掛替代方案）、Pro 專屬區塊（手風琴、分頁標籤、輪播、導覽、網站標頭、覆蓋/超級選單與表單系統），以及完整網站範本（GeneratePress 元素、FSE 區塊主題）。此技能可安裝至 Claude Code、Cursor、Windsurf、OpenAI Codex CLI、Gemini CLI、GitHub Copilot、Cline/Roo Code 與 Aider 等多種 AI 編碼助手，並提供互動式安裝腳本、手動上傳的 .skill 檔案，以及 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 外掛最佳化的 LLM 技能文件與開發資源。

來源驗證：針對 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，直接引用技能：

讀取 skills/generateblocks-layouts/SKILL.md 並建立一個包含 3 張卡片的推薦滑塊

技能檔案直接連結：

複製貼上範例

瀏覽 examples/ 資料夾，查看 14 種區塊類型中的 38 個現成範本：

區塊說明
英雄區統計橫幅、雙行動呼籲（5 種變化）
價格表三層級含「熱門」標籤
卡片網格部落格文章、作品集
功能列表6 個功能附圖示
常見問題區編號問答、雙欄
推薦區引言、頭像、星級
固定行動呼籲深色橫幅、雙按鈕
文章網格精選 + 小文章
統計區深色背景上 4 個指標
服務網格Bento 佈局
標誌輪播客戶/合作夥伴標誌
團隊網格團隊成員卡片
時間軸垂直時間軸
比較表功能比較

每個資料夾包含多種變化以及產生它們的提示。一個完全動態的查詢迴圈部落格網格位於 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.mdElement/Text/Media/Shape 已驗證的屬性結構
dynamic-tags.md所有 27 個動態標籤的權威目錄 + 確切語法
query-block.mdQuery/Looper/Loop-Item + 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      → 動態列表 (+ looper, loop-item, query-no-results, query-page-numbers)

最重要的規則：

  • 使用 generateblocks/element（而非 /container）、generateblocks/text（而非 /headline 或 /button）
  • htmlAttributes 是一個純物件（{"href":"https://example.com/about/"}）— 絕不是陣列
  • 連結：一個包覆文字 span 子元素的 element <a>。Text <a> 會在儲存時剝離其 href；包含原始文字的 element <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 篇來自相同分類的文章，排除目前文章」

「將我的 ACF 重複器 team_members 迴圈建立成一個三欄團隊網格」

「為 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