elementor-to-generateblocks について
Elementorのレイアウトを、意味的なGenerateBlocksとコアブロックへ変換するスキルです。コンテンツ、デバイスごとの表示、クエリ、ウィジェットの動作を保ち、ファイルとエディターで検証します。
主な機能
- 01ウィジェット、データ、リンクの確認
- 02ウィジェットの対応付けと移行
- 03表示設定とクエリの保持
- 04変換ファイルの生成と検証
- 05ファイル出力とエディターでの確認
活用シーン
- 01ElementorページをGenerateBlocksへ移行
- 02動的クエリを含むレイアウトの変換
- 03フォームやインタラクティブなウィジェットの移行
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ wpgaurav/ generateblocks-skills --skill elementor-to-generateblocksインストール後、Claude Code で/elementor-to-generateblocksを入力して読み込まれたか確認します。
同梱ファイルCLAUDE.mdreferences/widget-map.md
詳細
Elementor から GenerateBlocks への移行
Elementor のレイアウトを意味的に適切なネイティブブロックへ移行します。コンテンツ、デバイスごとの表示設定、CMS クエリ、動作するウィジェットを損なわずに、不要なラッパーを減らします。
GenerateBlocks(Pro を含む)とコアブロックのみを使用してください。CSS はネイティブブロックのスタイルに、インタラクションはネイティブブロックに設定してください。明示的な依頼がない限り、Scripts Manager、Page Block、Custom HTML/CSS/JS、または別のビルダーは追加しないでください。
共通の契約
マークアップを出力する前に、付属の generateblocks-layouts スキルにある
references/authoring-contract.md を使用し、タスクに応じたガイドを選択するために
references/_index.md を参照してください。スキルがインストール済みの場合は、同階層の
../generateblocks-layouts/ にあります。単独のバンドルには、同じ依存関係が
references/generateblocks-layouts/ に含まれています。両方のコピーやライブラリ全体は読み込まないでください。
ローカルブロックスタイルをデフォルトにします。 ユーザーがすでに選択していない限り、共有の Global Styles と Design Tokens について一度だけ確認してください。明示的な許可を得てから、共有レコードを作成・インポートするか、新しい共有依存関係を追加してください。既存の参照は維持してください。正確な範囲と確認事項は、付属の契約に記載されています。利用可能な場合は実際の投稿 ID を使用し、それ以外の場合はレイアウトにランダムな4桁のスコープを1つ使用してください。
変換ワークフロー
- セクション/コンテナー、ウィジェット、フォーム、動的ソース、リンクを一覧化します。
- 実際のレイアウト値とデバイスごとの範囲を確認します。クラス名は数値の仕様ではありません。慣れていないウィジェットやインタラクティブなウィジェットには、ウィジェットマップを使用してください。
- 冗長なラッパーのみを整理します。アンカーやスクリプトの依存関係を維持し、フォーム/クエリの設定を意図的に移行してください。
{section}-converted.htmlを生成し、ウィジェットの一覧と照合して、共通の検証フローを実行します。速度向上を約束するのではなく、実測してください。
付属の契約には、一般的な静的 Element/Text の手順が記載されています。ソースのマッピングに必要な場合のみ、
この変換リファレンスを読み込んでください。新たなビジュアル上の判断が必要な場合は、さらに
design-quality.md が必要です。
動的データには dynamic-tags.md と、関連するクエリ/フィールドのガイドが必要です。
インタラクティブな Pro ブロックには、ネイティブのスキーマ/保存出力が必要です。
納品
チャットではなくファイルにブロックを書き込んでください。付属のシリアライザーヘルパーを使用し、
preflight.py FILE --id-scope SCOPE を実行してください。実際のエディターで、慣れていない出力を確認し、
表示されるコンテンツと動作を比較してください。静的な事前チェックだけでは不十分です。
実際に書き込む場合は、mcp-publishing.md の参照、スナップショットの作成、生コンテンツの読み戻しも必要です。変換の依頼だけでは、公開の許可にはなりません。
シリアライズ、クラスの順序、リンク、CSS の状態、ブレークポイントに関するルールは、ここで重複して説明せず、付属の契約を参照してください。例は現在のブランドのデフォルト設定ではなく、別の投稿にそのままインポートできるマークアップでもありません。