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

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.

./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

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

Download a .skill file and upload it at the start of a new chat in Claude.ai, ChatGPT, Gemini, or any AI assistant.

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

Browse the examples/ folder for 38 ready-to-use templates across 14 section types:

Each folder contains multiple variations plus the prompt that generated them.

Bonus: Check out examples/from-gauravtiwari-org/ for real-world sections from production sites.

1. Open any examples/ folder
2. Copy any output-*.html file content
3. In WordPress, open your page/post
4. Switch to Code Editor (three dots menu > Code Editor)
5. Paste the blocks
6. Switch back to Visual Editor

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
│   │   ├── references/        # Block types, CSS, responsive, queries, etc.
│   │   └── examples/          # Basic, compound, layout, SVG examples
│   ├── html-to-generateblocks/
│   ├── elementor-to-generateblocks/
│   └── figma-to-generateblocks/
├── importable/                # .skill and .zip files for upload
├── examples/                  # 38 golden examples across 14 sections
└── generateblocks/            # Plugin source (V2.2.0) for reference

The importable/ folder contains two formats for each skill:

• .skill — Upload to any AI chat (Claude.ai, ChatGPT, Gemini)
• .zip — Compressed skill with references included

Four block types:

generateblocks/element  → Containers (div, section, nav, etc.)
generateblocks/text     → Text (h1-h6, p, span, a, button)
generateblocks/media    → Images
generateblocks/shape    → SVG icons

V2 Naming Rules:

• Use generateblocks/element (NOT /container)
• Use generateblocks/text (NOT /headline or /button)
• Classes MUST be: gb-element-{id} gb-element and gb-text gb-text-{id}
• htmlAttributes must be a plain object ({"href":"/about"}) — never an array
• Element <a> with text-only content causes recovery errors — use generateblocks/text with tagName: "a" for simple text links; only use generateblocks/element with tagName: "a" when wrapping inner blocks

Block format:

<!-- wp:generateblocks/element {"uniqueId":"hero001","className":"gb-element-hero001 gb-element","tagName":"section","styles":{...},"css":"..."} -->
<section class="gb-element-hero001 gb-element">
    <!-- content -->
</section>
<!-- /wp:generateblocks/element -->

<!-- wp:generateblocks/text {"uniqueId":"hero002","tagName":"h1","styles":{...},"css":"..."} -->
<h1 class="gb-text gb-text-hero002">Heading</h1>
<!-- /wp:generateblocks/text -->

Key attributes:

• uniqueId — Required for CSS targeting (format: hero001, card023)
• tagName — HTML element type
• styles — CSS properties as JSON (camelCase)
• css — Base CSS string (minified, alphabetically sorted). Pseudo-elements, media queries in css. NO hover/transitions
• htmlAttributes — Additional HTML attributes (href, target, aria-*)

"Create a hero section with headline, subheadline, two CTA buttons, and a 4-stat bar"

"Build a 3-column pricing table with a highlighted middle tier"

"Make a testimonial grid with avatars, star ratings, and quote marks"

"Convert this HTML to GenerateBlocks: [paste HTML]"

• No external URLs — Provide HTML, screenshots, or descriptions
• Static output — CSS-only, no JavaScript interactions
• Placeholder images — Replace with real images after generation
• Hover inference — Interactive states inferred from static designs

cd generateblocks

npm run build          # Production build
npm run start          # Watch mode
npm run test:unit      # Jest unit tests
npm run test:e2e       # Playwright E2E
npm run wp-env:start   # Local WordPress

For non-Claude assistants (GPT, Gemini, etc.), see AGENTS.md for universal instructions — or just run ./install.sh to set up your tool automatically.

• Plugin source code: GPL-2.0-or-later
• Skill documentation: MIT