mcpField
G
generateblocks-layouts

generateblocks-layouts

github.com/wpgauravDesign & UI14139 installsUpdated 1d ago
Repository

About generateblocks-layouts

A skill for creating and repairing GenerateBlocks V2 layouts with the plugin’s native block serialization. It is intended for GenerateBlocks authors who need local styling, dynamic content or Pro block interactions while keeping designs within native blocks.

Key features

  1. 01Native GenerateBlocks serialization
  2. 02Local styles and CSS parity
  3. 03Dynamic content and Pro blocks
  4. 04Layout preflight validation
  5. 05Round-trip verification for live writes

Use cases

  1. 01Build a static GenerateBlocks layout
  2. 02Create layouts with dynamic data
  3. 03Check generated block markup
  4. 04Verify a live layout update

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/wpgaurav/generateblocks-skills --skill generateblocks-layouts

After installing, type/generateblocks-layoutsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

examples/basic/
buttons.html
CLAUDE.md
containers.html
text-icons.html
examples/beta-design-system/
build-kit.js
ink-page.html
ink.design-system.json
local-mail-sink.php
paper-form.html
paper-page.html
paper.design-system.json
README.md
setup-local.php
examples/beta-design-system/patterns/
comparison.html
faq.html
footer.html
hero.html
query.html
signup.html
examples/beta-design-system/theme/
functions.php
index.php
style.css
examples/compound/
cards.html
examples/layouts/
hero-section.html
query-blog-grid.html
examples/svg/
CLAUDE.md
icons.html
references/
_index.md
acf-and-custom-fields.md
animations.md

Details

From the project README

GenerateBlocks layout builder

Build or repair GenerateBlocks V2 layouts using the installed plugin's native serialization. This skill supports local styling, dynamic content, Pro blocks, and explicitly requested shared systems.

Use GenerateBlocks and core blocks only. Keep styling in native block styles/css and use native Pro blocks for interactions. Do not introduce Scripts Manager, Page Block, Custom HTML/CSS/JS, another builder, or theme/plugin code to complete a GenerateBlocks design. An external implementation requires an explicit user request. Simplify unsupported effects within native blocks.

Read only what the task needs

Before generating markup, read authoring-contract.md. It owns the scope prompt, IDs, blocks, serialization, CSS parity, responsive basics, and validation rules. Use _index.md to select additional references. Do not load the entire library or recovery catalog for a routine static layout; the compact contract is sufficient for familiar Element/Text layouts using ordinary states and native breakpoints.

Local styles are the default. Prompt once about shared Global Styles and Design Tokens unless the user already chose. Add shared records or new shared dependencies only after explicit opt-in; preserve existing references. The contract contains the exact prompt; styling-scope.md covers edge cases.

Workflow

  1. Inspect the source/target, versions, and design guidance. Use the real post ID when available; otherwise use a random four-digit block-ID scope.
  2. Select semantic blocks and preserve content/behavior. For new designs, read design-quality.md; for dynamic data, read dynamic-tags.md and its task guide.
  3. Generate file output with the native serializer or scripts/gb_serialize.py. Keep editable styles and compiled css aligned.
  4. Run scripts/preflight.py FILE --id-scope SCOPE, then validate unfamiliar output in the real editor. Check visible content and relevant responsive/interactivity behavior. Static preflight alone is not proof of editor validity.
  5. For live writes, first read mcp-publishing.md; snapshot, splice, read back, and verify with scripts/verify_roundtrip.py.

Keep summaries short: what changed, output path, required Pro features, tests, and any unverified behavior. Source conversion does not authorize publication.

Examples and failures

Use examples as structural starting points; replace their IDs, URLs, and content. Choose a relevant file in examples/basic, compound, layouts, or svg only when needed. examples/beta-design-system is an opt-in shared-system example, not the default starter.

For a recovery/preflight failure, open the matching topic in recovery-rules.md or troubleshooting.md. For an unfamiliar attribute/tag, use block-types.md or installed block.json. Reuse scripts rather than duplicating escape tables or embedding another block manual here.

Comments

Markdown supported