skills.rest
hekivo
hekivoOFFICIAL
Explore all skills by this author →
WebsiteGitHub

superpowers-sage:block-scaffolding

Scaffold ACF Composer Gutenberg blocks with Blade templates and scoped CSS.

13|Updated Mar 19, 2026
Search Tags:#custom elements#gutenberg#wordpress theme#design-system tokens#acf composer#block scaffolding#editor preview parity
One-click install
npx skills add https://github.com/hekivo/superpowers-sage --skill superpowers-sage-block-scaffolding-hekivo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: superpowers-sage:block-scaffolding
Source: https://github.com/hekivo/superpowers-sage/tree/main/skills/block-scaffolding
Command: npx skills add https://github.com/hekivo/superpowers-sage --skill superpowers-sage-block-scaffolding-hekivo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill removes the repeated, error-prone work of scaffolding ACF Composer Gutenberg blocks while keeping Blade markup, custom element structure, CSS cascade tokens, and theme variations consistent across editor preview and frontend rendering.

Core Features & Use Cases

  • End-to-end block scaffold: Generates the ACF Composer controller class, Blade view template, custom element JS class, and block-scoped CSS entry points.
  • Design-system aligned styling: Builds scoped CSS custom property cascades from the project’s shared components and enforces token-based color behavior for light, neutral, and dark modes.
  • Editor/front-end parity safeguards: Ensures get_block_wrapper_attributes() and the @unless ($block->preview) wrapper strategy preserve variation classes and layout consistently.
  • Optional HTML Forms integration: Detects form-related intent and wires the block view to the sage-forms skill with validation module stubs and JS initialization hooks when applicable.

Quick Start

Tell your agent: "Use superpowers-sage:block-scaffolding to scaffold a new ACF Composer block named HeroBlock."

Frequently Asked Questions about superpowers-sage:block-scaffolding

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold an ACF Composer Gutenberg block with matching editor and frontend markup?▼

Scaffolding an ACF Composer block generates the controller class, Blade view, custom element JS, and block CSS stubs together, ensuring editor preview and frontend rendering parity through get_block_wrapper_attributes and scoped token-driven CSS.

How do I maintain design-system token parity between the Gutenberg editor and frontend rendering?▼

Maintaining design-system parity involves generating scoped CSS custom property cascades from shared components, enforcing token-based color behavior for light, neutral, and dark modes across both editor preview and frontend rendering.

Can I integrate HTML Forms when creating a new WordPress theme block?▼

Yes, block scaffolding detects form-related intent and optionally wires the Blade view to sage-forms references, generating validation module stubs and enqueuing JS initialization hooks for form fields.

Does block scaffolding automatically enqueue CSS and JS assets via ThemeServiceProvider?▼

Yes, scaffolding automatically imports block CSS into editor.css and enqueues all block assets via ThemeServiceProvider to ensure styles and conditional JS lifecycle wiring load correctly.

What's the best way to generate consistent variants for custom element Gutenberg blocks?▼

Generating consistent variants requires scaffolding custom element JS classes alongside Blade templates and scoped CSS, using the @unless preview wrapper strategy to preserve variation classes and layout consistently.

Related Skills

Explore More Software Engineering Skills→
hekivohekivo
13

superpowers-sage:sage-lando

Guide Sage theme scaffolding with Acorn and Lando generators.

Official
Advanced
codigodoleocodigodoleo
13

superpowers-sage:block-scaffolding

Scaffold ACF Composer blocks for Sage themes with PHP, Blade, and assets.

Official
Advanced
hekivohekivo
13

superpowers-sage:sage-forms

Integrate stateless HTML Forms submissions into Roots Sage Blade workflows with progressive validation.

Official
Intermediate
wpgauravwpgaurav
14

wp-block-markup

Explain and validate WordPress Gutenberg block markup syntax and attribute serialization.

Community
Advanced