Comprehensive skills collection for GenerateBlocks, enhancing WordPress development.

GenerateBlocks Skills

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

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

Tool	Install Location	Format
Claude Code	`~/.claude/skills/`	Skill directories
Cursor	`~/.cursor/skills/`	Skill directories
Windsurf	`~/.windsurf/rules/`	Combined markdown
OpenAI Codex CLI	`~/.codex/instructions.md`	Combined markdown
Gemini CLI	`GEMINI.md` (project root)	Combined markdown
GitHub Copilot	`.github/copilot-instructions.md`	Combined markdown
Cline / Roo Code	`.clinerules` (project root)	Combined markdown
Aider	`CONVENTIONS.md` (project root)	Combined markdown

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 file and upload it at the start of a new chat in Claude.ai, ChatGPT, Gemini, or any AI assistant.

Skill	Download
GenerateBlocks Layouts	.skill
HTML to GenerateBlocks	.skill
Elementor to GenerateBlocks	.skill
Figma to GenerateBlocks	.skill

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:

Copy-Paste Examples

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

Section	Description
Hero Section	Stats bar, dual CTAs (5 variations)
Pricing Table	3-tier with "Popular" badge
Card Grid	Blog posts, portfolio
Feature List	6 features with icons
FAQ Section	Numbered Q&A, two columns
Testimonials	Quotes, avatars, stars
Sticky CTA	Dark banner, dual buttons
Post Grid	Featured + small posts
Stats Section	4 metrics on dark bg
Services Grid	Bento layout
Logo Carousel	Client/partner logos
Team Grid	Team member cards
Timeline	Vertical timeline
Comparison Table	Feature comparison

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.

Using Examples

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

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
│   │   ├── 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

Skills

Skill	Purpose
GenerateBlocks Layouts	Build layouts using GB V2 blocks (element, text, media, shape)
HTML to GenerateBlocks	Convert HTML/CSS to GenerateBlocks block markup
Elementor to GenerateBlocks	Migrate Elementor layouts to clean GB blocks
Figma to GenerateBlocks	Convert Figma designs to GB blocks

Importable Formats

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

GenerateBlocks V2 Quick Reference

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-*)

Example Prompts

"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]"

Limitations

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

Development

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

Other LLMs

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

License

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