GenerateBlocks Skills for AI Tools (Free, MIT, 38 Templates)

A free, MIT-licensed skill pack that teaches Claude, Cursor, Windsurf, Copilot, and every other AI assistant how to produce production-quality GenerateBlocks v2 layouts from plain English. 38 ready-to-paste section templates across 14 types, an installer script, and per-tool format conversion.

I maintain GenerateBlocks layouts for gauravtiwari.org, gatilab.com, and half a dozen client sites. The default LLM output for “build me a hero section with GenerateBlocks” is DIVception — wrong block names, broken uniqueIDs, invented attributes. The skills repo fixes that by giving the model the exact block shapes, the real utility class names, and ready-to-paste section examples. Any agent that reads the skill file produces markup that works on first paste, no editor errors, no manual clean-up.

What the skills pack does

  • Teaches AI tools the GenerateBlocks v2 format — exact block names (generateblocks/element, generateblocks/text, generateblocks/media), attribute shapes, uniqueID rules
  • Installer script — one command to install skills into Claude Code, Cursor, Windsurf, Codex CLI, Gemini CLI, Copilot, Cline, Roo, or Aider — each tool gets the correct format
  • 38 copy-paste templates across 14 section types — hero, features, testimonials, pricing, CTAs, FAQs, footers — each one real Gutenberg block markup
  • Three conversion skills — HTML → GenerateBlocks, Elementor → GenerateBlocks (eliminates DIVception), Figma → GenerateBlocks
  • Portable .skill files for web-based AI (Claude.ai, ChatGPT, Gemini) — drag-drop to start a chat with the skill loaded
  • Core framework class reference — the actual utility classes GB v2 ships, so the model uses .grid, .flex-row, not invented names

Install in 30 seconds

Clone the repo, run the installer, pick your tool. For Claude Code, Cursor, Windsurf — each gets a directory of skills loaded automatically. For terminal LLMs (Codex, Gemini) — a single combined markdown file is concatenated to the instructions. For web chat — drag a .skill file into the conversation.

# Install for your preferred tools
git clone https://github.com/wpgaurav/generateblocks-skills.git
cd generateblocks-skills
chmod +x install.sh
./install.sh              # interactive picker
./install.sh --all        # install for every supported tool
./install.sh claude       # Claude Code only
./install.sh cursor codex # multiple at once

# Alternative: point an AI at a skill file directly, no install
# "Read skills/generateblocks-layouts/SKILL.md and build me a pricing table"

# Alternative: download a portable .skill and upload to Claude.ai or ChatGPT
# https://github.com/wpgaurav/generateblocks-skills/tree/main/importable

How the skill pack works

Each skill file is a frontmatter-fronted Markdown document: a 200-word description at the top (“use this when…”), then the actual reference material. When an AI agent opens a project, it reads the skill file and treats it as ground-truth for how to produce GenerateBlocks markup. The skill files include real block.json attributes (pulled from GB source), the actual utility classes shipped with GB v2 (not invented ones), and 38 worked examples organised by section type. The installer handles format differences — Claude Code wants skill directories, Windsurf wants a single rules/ file, Copilot wants .github/copilot-instructions.md, etc. One repo, every tool.

Download and source

FAQs

Do I need GenerateBlocks Pro for this?

No. All skills target the free GenerateBlocks v2 plugin. Pro features (global styles, conditional logic, query loop) are covered in separate skill files that gracefully degrade if you are on the free version.

Does it work with the old GenerateBlocks v1 format?

No — only v2. v1 is deprecated (deprecated since GB 2.0 in 2024) and the skill files emit v2-only markup. If you need v1, fork the repo and pin an earlier release.

Can I use this with Elementor or Beaver Builder?

This skill pack is GB-specific. For Elementor → GB migration it includes a conversion skill that flattens Elementor DIVception into clean GB nesting. See also the sibling repos bricks-skills and kadence-skills.

Will this work with a custom child theme?

Yes. The skill files know about theme.json integration so generated markup picks up your theme palette, font sizes, spacing presets automatically. No theme.json file? GB v2 provides sensible fallbacks.

How do I keep the skills updated?

Pull the repo and re-run the installer. The installer detects existing installs and either updates in place or prompts for confirmation. GitHub Releases page tracks breaking changes.

Does this burn extra tokens on every AI request?

No. Skill files are loaded on-demand — Claude Code reads them when a relevant task starts, not on every message. For token-sensitive setups, use the .skill portable format and load only on specific tasks.

Disclaimer: This site is reader-supported. If you buy through some links, I may earn a small commission at no extra cost to you. I only recommend tools I trust and would use myself. Your support helps keep gauravtiwari.org free and focused on real-world advice. Thanks. - Gaurav Tiwari