Kadence Blocks Skills for AI Tools (Free, MIT)

A free, MIT-licensed skill pack that teaches AI assistants how to produce valid Kadence Blocks Gutenberg markup — hero sections, feature grids, testimonials, CTAs, data tables, forms. Copy the skill link into any AI chat and start generating block layouts you can paste straight into the WordPress editor.

Kadence Blocks is one of the top-three Gutenberg block libraries alongside GenerateBlocks and Stackable, with a clean hierarchy of kadence/rowlayout → kadence/column → content blocks. Plain LLMs generate Kadence markup that breaks in the editor — wrong block names, missing uniqueIDs, invalid 3-value responsive arrays. This skill pack fixes that with tight block references, worked section templates, and the responsive breakpoint rules Kadence actually uses.

What the skills pack does

  • Teaches AI the Kadence Blocks format — kadence/rowlayout, kadence/column, kadence/advancedheading, kadence/infobox, kadence/accordion, kadence/tabs, and 15+ more
  • Responsive-array rules — Kadence uses [desktop, tablet, mobile] 3-value arrays for padding, font size, columns; the skill teaches the model to emit these correctly
  • Section templates — hero, features, testimonials, CTAs, data tables, contact forms, pricing — each one a complete, pasteable block structure
  • UniqueID generation — every Kadence block needs a unique identifier; the skill teaches the model to generate valid ones and reference them in child blocks
  • theme.json integration — generated markup respects Kadence theme colours, spacing presets, and typography tokens
  • Form field reference — the full Kadence advanced form schema so AI can build contact + lead forms that work on first paste

How to use

Clone the repo and use with any AI coding assistant. For Claude Code and Cursor, the CLAUDE.md auto-loads. For web AI (Claude.ai, ChatGPT, Gemini), copy the specific skill file content and paste it into your chat before asking for a layout.

# Clone and use
git clone https://github.com/wpgaurav/kadence-skills.git
cd kadence-skills

# Path A: Claude Code or Cursor auto-loads CLAUDE.md
claude  # or open folder in Cursor

# Path B: paste a specific skill into web AI
# Open kadence-hero.md, copy, paste into Claude.ai or ChatGPT
# Then: "Create a hero section with a headline, 2 CTAs, and a background image"

# Path C: point AI at the repo URL (Claude Code with web tools, Cursor agent mode)
# "Read https://github.com/wpgaurav/kadence-skills and build a pricing table"

# After AI produces markup:
# 1. Copy the wp: block comment markup
# 2. Paste into a WordPress post/page in the Block Editor
# 3. Editor resolves all blocks — uniqueIDs are valid, responsive values work
# 4. Kadence Blocks plugin must be active

How the skill files are structured

Eight skill files organised by use case. SKILL.md is the root — core block reference, uniqueID rules, responsive array format, how blocks nest. kadence-hero.md, kadence-features.md, kadence-testimonials.md, kadence-cta.md, kadence-table.md, kadence-forms.md, kadence-snippets.md each cover a section type with 3-8 worked examples. The examples include the full block-markup with comments, the uniqueID pattern, and responsive values for three breakpoints. When an AI asks “create a testimonial grid”, it reads the root skill + the testimonial-specific file and produces markup that resolves cleanly in the editor.

Download and source

FAQs

Do I need Kadence Blocks Pro?

No for most skill files. The free Kadence Blocks covers 90% of the generated markup. Pro is only required for advanced forms (conditional logic, multi-step), gallery block with carousel, and portfolio query. Skills emit free-compatible markup by default and flag Pro-only features when they use them.

Does this work with classic Kadence theme or only Block Theme?

Both. The skills emit Gutenberg block markup that works on classic Kadence theme (with Block Editor) and on Kadence Block Theme. theme.json integration picks up palette and typography either way.

What about Kadence Cloud design library imports?

Cloud is a separate system — pre-built Kadence section templates you import from their library. Skills complement Cloud: use Cloud for complex pre-designed sections, skills for per-project custom sections.

Will generated markup respect my brand colours?

Yes, when Kadence reads your theme.json. The skill emits colour references like "color":"palette-primary" rather than hex codes, so your theme palette is authoritative. If your theme.json is empty, Kadence falls back to defaults.

How does this compare to Kadence vs GenerateBlocks?

Different tools, different strengths. Kadence has stronger out-of-the-box form + carousel + countdown blocks, GenerateBlocks is more minimal and performance-focused. Pick based on your site stack; skills exist for both.

Does it handle Kadence-specific responsive edge cases?

Yes. Kadence uses 3-value arrays [desktop, tablet, mobile] for padding, font size, columns, spacing — the skill teaches this pattern explicitly and the AI consistently emits correctly-shaped arrays. That is the bug most plain LLMs produce otherwise.