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

superpowers-sage:sage-forms

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

13|Updated Mar 19, 2026
Search Tags:#validation#wordpress#blade#acorn#html-forms#roots-sage#frontend-modules
One-click install
npx skills add https://github.com/hekivo/superpowers-sage --skill superpowers-sage-sage-forms-hekivo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: superpowers-sage:sage-forms
Source: https://github.com/hekivo/superpowers-sage/tree/main/skills/sage-forms
Command: npx skills add https://github.com/hekivo/superpowers-sage --skill superpowers-sage-sage-forms-hekivo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves the problem of building stateless HTML Forms (via the HTML Forms WordPress plugin) inside a Roots Sage/Acorn project while keeping frontend validation reliable and consistent.

Core Features & Use Cases

  • Drop-in Sage integration for HTML Forms: Render html-form CPT posts through a Blade routing layer provided by log1x/sage-html-forms, selected by an ACF addPostObject field.
  • Design-system-first Blade views: Render form markup using shared x-form.* primitives (like x-form.field, x-form.input, x-form.textarea) so styling and accessibility come from your component library.
  • Progressive client-side validation: Use a per-project ES module (initHfValidation) layered on top of the HTML Forms submission pipeline, driven by HTML Constraint Validation plus custom validators and plugin DOM events (hf-success, hf-error, hf-submitted).
  • Trap-aware correctness: Avoid three production-breaking validation pitfalls (Blade attribute escaping for pattern, Chrome behavior for type="tel", and ValidityState being non-enumerable).

Quick Start

Ask your AI assistant to scaffold the exact Blade form view for a new html-form CPT slug using the provided x-html-forms wrapper and x-form.* components, and to wire the block JS to initHfValidation with correct per-field messages and validators.

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 add HTML Forms to a Roots Sage theme using Blade templates?▼

You can embed HTML Forms in a Roots Sage/Acorn project by rendering `html-form` CPT posts through a dedicated Blade routing layer, using shared `x-form.*` components for consistent styling and accessibility.

Why does frontend validation silently fail for phone fields in Sage Blade views?▼

Validation can silently fail due to three pitfalls: Blade attribute escaping for `pattern`, Chrome behavior for `type="tel"`, and `ValidityState` being non-enumerable, all of which require specific workarounds to prevent.

Can I use ACF fields to select and display specific WordPress HTML Forms in Sage blocks?▼

Yes, you can use an ACF `addPostObject` field to select `html-form` CPT posts, enabling block-based embedding of forms that render through a `resources/views/forms/{form-slug}.blade.php` route.

How do I implement progressive client-side validation for HTML Forms in WordPress?▼

Progressive validation is implemented using a per-project ES module (`initHfValidation`) layered on the HTML Forms submission pipeline, driven by HTML Constraint Validation, custom validators, and plugin DOM events like `hf-success`.

What's the best way to style HTML Forms output in a Roots Sage design system?▼

The best way is rendering form markup using shared Blade primitives like `x-form.field`, `x-form.input`, and `x-form.textarea` so styling and accessibility inherit directly from your component library.

Does the HTML Forms WordPress plugin support custom JavaScript validation hooks?▼

Yes, the plugin supports custom JavaScript validation through DOM events such as `hf-success`, `hf-error`, and `hf-submitted`, allowing you to hook into the submission pipeline for reliable frontend validation.

Related Skills

Explore More Software Engineering Skills→
codigodoleocodigodoleo
13

superpowers-sage:sage-forms

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

Official
Intermediate
alexandereiseghohialexandereiseghohi

create-web-form

Create accessible web forms with HTML, CSS, JavaScript validation, PHP/Python processing.

Community
Intermediate
mgd34msumgd34msu
4

alpine-js

Integrate Alpine.js directives to add reactive behavior to HTML markup.

Community
Basic
jherrjherr

netlify-forms

Configure Netlify Forms with HTML, AJAX, honeypot spam filtering, and file uploads.

Community
Intermediate