generateblocks-skills

GenerateBlocks Skills

LLM-optimized skill documentation and development resources for the GenerateBlocks WordPress plugin.

Documentation: Wiki · Getting started · Installation · Latest release

Verified on GenerateBlocks 2.5.0 and Pro 2.8.0 in a live WordPress 7.1.3 editor (October 27, 2026), connected through Site Agent. The bundled build_css() compiler now matches the native 2.5 Styles Builder byte for byte: 1,453 generated style objects checked, including 800 from a seed it was never tuned on. The design-system workflow (Design Tokens, Style Book, shared selectors, portable kits) was first tested on 2.5.0-beta.1 / 2.8.0-beta.1.

Styling defaults: local block styles. The skills prompt before introducing shared Global Styles or Design Tokens and add them only when the user explicitly opts in. Existing references are preserved during edits.

Native authoring: GenerateBlocks/Pro and appropriate core blocks only. Styling stays in editable block attributes; interactions use native blocks. Scripts Manager, custom HTML/CSS/JavaScript, and other builders require an explicit request. Accordion checks include padded questions and answers, expanded states, and mobile layouts.

Compact loading

Start with the selected skill, the shared authoring contract, and the router. Familiar static layouts do not require the full recovery, CSS, and breakpoint manuals. Load a diagnostic or mapping reference when the task needs it; keep native editor and preflight validation. Standalone converter bundles carry their layout dependency in references/generateblocks-layouts/.

What the skills can build

• Static sections — heroes, pricing, cards, FAQs, CTAs, full landing pages
• Dynamic content — query loops (blog grids, related posts, archives), 27 dynamic tags with exact syntax
• Custom fields — ACF text/image/link/group fields, repeater loops, options pages, meta queries
• Motion — native transitions, hover/focus feedback and reduced-motion guards; unsupported effects are simplified unless external code is explicitly requested
• Conditions — GB Pro block/menu conditions, form-field conditions, free-plugin alternatives
• GB Pro blocks — accordion, tabs, carousel, navigation, site header, overlays/mega menus, the 2.6 Forms system
• Full-site templates — GeneratePress Elements (loop templates, page heroes, hooks, display rules), FSE block themes

Reusable design-system kit

Paper and Ink product-page kit: 19 tokens, 23 shared styles, six reusable sections, native query/accordion/form blocks, and two brand presets. Both 65-block pages survived real editor reload/save with byte-identical content. Imports, collision preservation, CSS parser/compiler parity, responsive layout, and local form behavior were checked.

Quick Install

Install skills for your AI coding assistant with one command:

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

This launches an interactive installer that sets up skills for your preferred tools.

Supported Tools

This table describes files written by the installer, not a guarantee of automatic loading by every client version. For current Codex skill-directory installation, see the wiki installation guide. Combined rule files reference this checkout and replace their target files; preserve unrelated instructions before installing over them.

Install Options

./install.sh              # Interactive mode (choose tools)
./install.sh --all        # Install for all tools
./install.sh claude       # Claude Code only
./install.sh cursor codex # Multiple tools at once
./install.sh --help       # Show help

Alternative: Manual Setup

If you prefer not to use the installer, you have two options:

Option A: Upload a Skill File

Download a .skill or .zip archive and use your assistant's supported skill or file workflow. Archive support, persistent installation and script execution vary by client. If it cannot inspect the archive, extract it and provide access to the complete folder. See Installation.

Option B: Point Your AI to the Skill File

With Claude Code, Cursor, or Windsurf, just reference the skill directly:

Read skills/generateblocks-layouts/SKILL.md and create a testimonial slider with 3 cards

Direct links to skill files:

• skills/generateblocks-layouts/SKILL.md
• skills/html-to-generateblocks/SKILL.md
• skills/elementor-to-generateblocks/SKILL.md
• skills/figma-to-generateblocks/SKILL.md

Validated Examples

Use the compact examples inside skills/generateblocks-layouts/examples/. They cover buttons, containers, an interactive card, a restrained hero, a V2 Query/Looper grid, and SVGs. Every file passes the bundled preflight.py.

Before inserting one into WordPress:

1. identify the destination theme and plugin versions; resolve the record if one exists;
2. use the real post ID if available, otherwise a random four-digit layout scope;
3. replace example URLs/content/media;
4. inherit the destination's design system and registered at-rules;
5. run preflight.py <file> --id-scope <SCOPE>; resolve the actual record separately before an authorized write.

The root examples/ gallery contains older exploration and production exports. Treat it as historical visual/structural reference, not as recovery-safe copy-paste markup. It predates the current CSS Mode parity, post-scoped ID, and anti-slop gates.

What's Included

generateblocks-skills/
├── install.sh                 # Multi-tool skill installer
├── CLAUDE.md                  # Claude Code project instructions
├── AGENTS.md                  # Universal LLM instructions
├── skills/                    # Skill source files
│   ├── generateblocks-layouts/
│   │   ├── SKILL.md           # Main entry point (slim — depth in references/)
│   │   ├── references/        # Routed reference files (see map below)
│   │   └── examples/          # Basic, compound, layout, SVG examples
│   ├── html-to-generateblocks/
│   ├── elementor-to-generateblocks/
│   └── figma-to-generateblocks/
├── importable/                # .skill and .zip files for upload
├── examples/                  # Historical exploration/exports; not current copy-paste fixtures
├── generateblocks/            # Plugin source (2.5.0) for reference
└── generateblocks-pro/        # Pro plugin source (2.8.0; git-ignored) for reference

Skills

Reference map (generateblocks-layouts/references/)

Importable Formats

The importable/ folder contains two formats for each skill:

• .skill — Skill archive for clients that support this format
• .zip — Compressed skill with references included

After editing any skill, regenerate all bundles with ./build-bundles.sh.

GenerateBlocks V2 Quick Reference

Four core blocks plus the query family:

generateblocks/element    → Containers (div, section, nav, figure, a, ul/ol/li, dl/dt/dd)
generateblocks/text       → Text (h1-h6, p, span, div, a, button, figcaption, li)
generateblocks/media      → Images (img only — static and dynamic)
generateblocks/shape      → SVG icons
generateblocks/query      → Dynamic lists (+ looper, loop-item, query-no-results, query-page-numbers)

The rules that matter most:

• Use generateblocks/element (NOT /container), generateblocks/text (NOT /headline or /button)