convert-htmx-react

Convert HTMX and Alpine.js HTML artifacts into scaffolder-ready React TSX components.

Updated Feb 16, 2026
One-click install
npx skills add https://github.com/GQAdonis/artifact-refiner-skill --skill convert-htmx-react-gqadonis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: convert-htmx-react
Source: https://github.com/GQAdonis/artifact-refiner-skill/tree/main/skills/convert-htmx-react
Command: npx skills add https://github.com/GQAdonis/artifact-refiner-skill --skill convert-htmx-react-gqadonis

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Migrating HTMX + Alpine.js prototypes to React requires tedious manual rewriting of attributes, bindings, and state, and it is easy to silently lose behaviors like hx-post or x-model during translation. ## Core Features & Use Cases - Mechanical JSX Transforms: Automatically converts class to className, inline styles to style objects, and self-closing tags via spec-conformant parse5 HTML parsing. - Alpine State Lifting: Lifts x-data declarations into React useState hooks or zustand+immer stores based on the state shape, producing a named use<Feature>State hook. - Ambiguity Sidecar: Surfaces HTMX hx-* behaviors and complex Alpine constructs in a review sidecar markdown with recommended React equivalents instead of guessing. - Use Case: You have an HTMX dashboard fragment with Alpine counters and hx-post forms. Run the converter to get a scaffolder-ready TSX component plus a sidecar listing the server-interaction regions that need manual fetch + setState wiring. ## Quick Start Ask the AI to convert your HTMX file by providing the source HTML path, a kebab-case feature name, and the desired output TSX path.

Frequently Asked Questions about convert-htmx-react

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

FAQPage Schema
How do I convert HTMX to React components?▼

Run the conversion script with the source HTML path, a kebab-case feature name, and an output TSX path. It parses the HTML with parse5, applies mechanical JSX transforms, lifts Alpine state into hooks, and emits a scaffolder-ready component.

How to migrate Alpine.js x-data state to React hooks?▼

The converter lifts x-data objects into React state automatically. Single boolean fields become local useState hooks, while multi-field or non-boolean state becomes a zustand+immer store with a hook adapter named use<Feature>State.

What happens to hx-get and hx-post attributes during conversion?▼

HTMX hx-* behaviors are not auto-converted because they involve server interactions requiring judgment. They are listed in an ambiguous sidecar markdown with recommended React equivalents like fetch plus setState, and a marker comment is left in the JSX.

Can I convert React components back to HTMX?▼

No, the conversion is one-directional: HTMX to React only. The reverse direction (React to HTMX) is explicitly deferred and not supported in the current version.

What are the limitations of automated HTMX to React conversion?▼

The script handles about 90 percent of mechanical transforms but cannot confidently convert x-show, x-model, x-if, or complex Alpine expressions. These regions are documented in the sidecar file and must be reviewed and applied manually before scaffolding.