GenerateBlocks Skills
GenerateBlocks WordPressプラグイン向けの、LLM最適化されたスキルドキュメントと開発リソースです。
ソース検証済み（GenerateBlocks無料版2.3 / GB Pro 2.6、2026年6月時点） 。このスキルに含まれるすべてのブロックスキーマ、属性順序、動的タグは、このリポジトリ内のプラグインソースに対してチェック済みであり、トレーニングデータからの記憶に頼っていません。
このスキルで構築できるもの
- 静的セクション — ヒーロー、料金表、カード、FAQ、CTA、フルランディングページ
- 動的コンテンツ — クエリループ（ブロググリッド、関連記事、アーカイブ）、27種の動的タグ（正確な構文付き）
- カスタムフィールド — ACF（テキスト/画像/リンク/グループフィールド）、リピーターループ、オプションページ、メタクエリ
- アニメーション — ホバー時のマイクロインタラクション、キーフレームによる登場アニメーション、CSSスクロール駆動の表示、動き抑制ガード
- 条件 — GB Proブロック/メニュー条件、フォームフィールド条件、無料プラグインでの代替方法
- GB Proブロック — アコーディオン、タブ、カルーセル、ナビゲーション、サイトヘッダー、オーバーレイ/メガメニュー、2.6 Formsシステム
- フルサイトテンプレート — GeneratePress Elements（ループテンプレート、ページヒーロー、フック、表示ルール）、FSEブロックテーマ
クイックインストール
AIコーディングアシスタントにスキルをインストールするには、以下の1コマンドを実行します。
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/ | 結合マークダウン |
| OpenAI Codex CLI | ~/.codex/instructions.md | 結合マークダウン |
| Gemini CLI | GEMINI.md（プロジェクトルート） | 結合マークダウン |
| GitHub Copilot | .github/copilot-instructions.md | 結合マークダウン |
| Cline / Roo Code | .clinerules（プロジェクトルート） | 結合マークダウン |
| Aider | CONVENTIONS.md（プロジェクトルート） | 結合マークダウン |
インストールオプション
./install.sh # 対話モード（ツールを選択）
./install.sh --all # 全ツールにインストール
./install.sh claude # Claude Codeのみ
./install.sh cursor codex # 複数ツールを一度に
./install.sh --help # ヘルプ表示
代替方法：手動セットアップ
インストーラを使用したくない場合は、以下の2つの方法があります。
方法A：スキルファイルをアップロード
.skill ファイルをダウンロードし、Claude.ai、ChatGPT、Gemini、またはその他のAIアシスタントで新しいチャットの開始時にアップロードします。
| スキル | ダウンロード |
|---|---|
| GenerateBlocks Layouts | .skill |
| HTML to GenerateBlocks | .skill |
| Elementor to GenerateBlocks | .skill |
| Figma to GenerateBlocks | .skill |
方法B：AIにスキルファイルを直接参照させる
Claude Code、Cursor、Windsurfでは、スキルファイルを直接参照して指示を出せます。
skills/generateblocks-layouts/SKILL.md を読み、3つのカードで構成された testimonial スライダーを作成してください
スキルファイルへの直接リンク：
skills/generateblocks-layouts/SKILL.mdskills/html-to-generateblocks/SKILL.mdskills/elementor-to-generateblocks/SKILL.mdskills/figma-to-generateblocks/SKILL.md
コピペで使えるサンプル
examples/ フォルダには、14種類のセクションにわたる38の即戦力テンプレート が用意されています。
| セクション | 説明 |
|---|---|
| ヒーローセクション | 統計バー、デュアルCTA（5バリエーション） |
| 料金表 | 3段階（「人気」バッジ付き） |
| カードグリッド | ブログ記事、ポートフォリオ |
| 特徴リスト | アイコン付き6つの特徴 |
| FAQセクション | 番号付きQ&A、2カラム |
| お客様の声 | 引用、アバター、星評価 |
| スティッキーCTA | ダークバナー、デュアルボタン |
| 投稿グリッド | 注目記事＋小記事 |
| 統計セクション | 暗い背景に4つの指標 |
| サービスグリッド | ベントウレイアウト |
| ロゴカルーセル | クライアント/パートナーのロゴ |
| チームグリッド | チームメンバーカード |
| タイムライン | 縦型タイムライン |
| 比較表 | 機能比較 |
各フォルダには複数のバリエーションと、それらを生成したプロンプトが含まれています。完全な動的クエリループブロググリッドは skills/generateblocks-layouts/examples/layouts/query-blog-grid.html にあります。
ボーナス： examples/from-gauravtiwari-org/ には、本番サイトからエクスポートされた実際のセクションもあります。
サンプルの使い方
examples/フォルダを開く- 任意の
output-*.htmlファイルの内容をコピー - WordPressでページ/投稿を開く
- コードエディタに切り替える（三点リーダーメニュー > コードエディタ）
- ブロックを貼り付ける
- ビジュアルエディタに戻す
同梱内容
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 Layouts | GB V2で何でも構築：静的セクション、クエリループ、動的タグ、ACFデータ、アニメーション、条件、Proフォーム/インタラクティブブロック、フルサイトテンプレート |
| HTML to GenerateBlocks | HTML/CSSをGenerateBlocksブロックマークアップに変換 |
| Elementor to GenerateBlocks | ElementorレイアウトをクリーンなGBブロックに移行 |
| Figma to GenerateBlocks | FigmaデザインをGBブロックに変換 |
リファレンスマップ（generateblocks-layouts/references/）
| ファイル | カバー内容 |
|---|---|
_index.md | タスクルーター – どのジョブにどのファイルを読み込むか |
recovery-rules.md | 「Attempt Recovery」エラーの既知の原因すべて＋正確な修正方法 |
field-notes.md | 実際の変換で得た教訓：エスケープワークフロー、検証スクリプト |
block-types.md | Element/Text/Media/Shapeの検証済み属性スキーマ |
dynamic-tags.md | 全27の動的タグの正規カタログ＋正確な構文 |
query-block.md | Query/Looper/Loop-Item + Proクエリ拡張 |
acf-and-custom-fields.md | ACFフィールド、リピーターループ、オプションページ、Meta Box |
conditions.md | Proブロック/メニュー/フォームの条件＋無料版の代替案 |
template-authoring.md | フルサイト：GeneratePress Elements、FSE、アーカイブテンプレート |
animations.md | ホバー、キーフレーム、スクロール駆動アニメーション、動きの抑制 |
gb-pro.md | Pro機能マップ（28ブロック、グローバルクラス、バージョン履歴） |
pro-forms.md | Pro 2.6 Forms：フィールド、バリデーション、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/ フォルダには、各スキルに2つの形式があります。
.skill— AIチャット（Claude.ai、ChatGPT、Gemini）にアップロード.zip— リファレンスを含む圧縮スキル
GenerateBlocks V2 クイックリファレンス
4つのコアブロックとクエリファミリー：
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を持つ要素<a>。テキスト<a>は保存時にhrefが削除される。生テキストを持つ要素<a>はリカバリエラーを引き起こす - JSON属性の順序は各ブロックの
block.jsonの宣言順に従い、classNameは最後 css文字列は1行、最小化、アルファベット順 – ホバー状態は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 にあります。
プロンプト例
「見出し、サブ見出し、2つのCTAボタン、4つの統計バーを持つヒーローセクションを作成してください」
「中央の段が強調された3カラムの料金表を構築してください」
「関連記事セクションを構築してください：同じカテゴリから3記事、現在の投稿は除外」
「ACFリピーターフィールド team_members をループして3カラムのチームグリッドにしてください」
「GeneratePress Elements用のアーカイブループテンプレートで、クエリを継承するものを作成してください」
「このセクションに、動き抑制フォールバック付きのスクロール表示アニメーションを追加してください」
「このHTMLをGenerateBlocksに変換してください：[HTMLを貼り付け]」
制限事項
- 外部URL不可 – HTML、スクリーンショット、説明文を提供してください
- カスタムJavaScript不可 – インタラクションはCSSのみ、およびGB Proの組み込みJSブロック（アコーディオン、タブ、カルーセル、オーバーレイ、インスタントページネーション）に限ります
- プレースホルダー画像 – 生成後、実際の画像に置き換えてください
- ホバー推論 – インタラクティブな状態は静的なデザインから推測されます
- UI管理設定 – 条件ルール、フォームアクション、オーバーレイトリガー、表示ルールはwp-adminで設定され、ブロックマークアップには含まれません。スキルではこれらを手動ステップとして列挙します
- Pro 2.6 / 無料版 2.3 の機能（Forms、CSS Mode）は2026年6月時点でベータ版 – 安定版リリースを使用しているサイトではまだ利用できません
開発
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