superpowers-sage:sage-forms

Render WordPress HTML Forms in Sage Blade views with hf-validation.

13|Updated Mar 19, 2026
One-click install
npx skills add https://github.com/codigodoleo/superpowers-sage --skill superpowers-sage-sage-forms
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: superpowers-sage:sage-forms
Source: https://github.com/codigodoleo/superpowers-sage/tree/main/skills/sage-forms
Command: npx skills add https://github.com/codigodoleo/superpowers-sage --skill superpowers-sage-sage-forms

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

HTML Forms integration for Sage solves the friction of rendering and validating WordPress HTML Forms by bridging the HTML Forms plugin with Blade views and a cohesive Sage-based workflow.

Core Features & Use Cases

  • Stateless form rendering via the HTML Forms plugin; forms are CPT-based posts (html-form) surfaced through ACF blocks and rendered via a Blade bridge to project-specific templates.
  • Client-side validation integration via hf-validation, allowing per-form messages and custom validators while preserving server-side plugin handling.
  • Design-system aligned form primitives with the x-form.* components and x-html-forms wrapper; zero block CSS coupling; accessible error messaging.

Quick Start

Install the sage HTML Forms bridge in your Sage project, create an html-form CPT post, and render it in a Blade view with hf_get_form($form->ID)->get_html().

Frequently Asked Questions about superpowers-sage:sage-forms

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

FAQPage Schema
How do I render WordPress HTML Forms using Sage Blade views?

Sage form rendering bridges the HTML Forms plugin with Blade views by embedding html-form CPT posts through ACF blocks and outputting them via hf_get_form($form->ID)->get_html(). This approach enables modular, stateless form rendering within your Sage project templates.

Can I use ACF blocks to embed HTML Forms in a Sage theme?

Yes, you can embed HTML Forms in a Sage theme using ACF blocks. The html-form custom post type posts are surfaced through ACF blocks, which are then bridged to project-specific Blade templates for seamless front-end rendering.

How do I add client-side validation to HTML Forms in a Sage project?

Client-side validation is integrated using hf-validation, allowing per-form messages and custom validators while preserving server-side plugin handling. This ensures accessible error messaging and design-system aligned form primitives.

What is the best way to decouple HTML Forms block CSS from my Sage design system?

Decoupling block CSS is achieved by using design-system aligned form primitives with x-form.* components and the x-html-forms wrapper. This provides zero block CSS coupling and accessible error messaging for your Sage project.

Does the HTML Forms plugin work with Sage for frontmatter-based discovery and scalable rendering?

Yes, the bridge satisfies frontmatter-based discovery, reference wiring, and optional resources organization for scalable deployments. It connects the HTML Forms plugin directly to your Sage Blade views and ACF blocks.

Why are my HTML Forms not displaying correctly in my Sage Blade templates?

Forms may not display if they are not properly bridged through ACF blocks or if the Blade template is missing the hf_get_form($form->ID)->get_html() call. Ensure your html-form CPT posts are correctly wired to your Sage views.