mcpField
H
hwc-forms-validation

hwc-forms-validation

github.com/thehotwireclubDevelopment152229 installsUpdated 3w ago
Repository

About hwc-forms-validation

A skill for implementing form-focused Hotwire workflows with Turbo Frames and Stimulus. It guides developers through form patterns, validation responses, and preserving user context during rerenders.

Key features

  1. 01Identify common form flows
  2. 02Use Turbo Frames for inline rerenders
  3. 03Set validation and success responses
  4. 04Preserve focus and selection
  5. 05Consult focused form references

Use cases

  1. 01Building inline editing forms
  2. 02Creating modal validation flows
  3. 03Implementing typeahead search
  4. 04Handling controls outside a frame

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/thehotwireclub/hotwire_club-skills --skill hwc-forms-validation

After installing, type/hwc-forms-validationin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
references/
2023-11-07-turbo-frames-typeahead-search.md
2024-01-16-stimulus-action-parameters.md
2024-02-27-turbo-frames-inline-edit.md
2024-05-21-turbo-frames-modals-validation.md
2025-10-20-turbo-frames-typeahead-validation.md
2026-02-03-turbo-frames-external-form.md
2026-03-24-turbo-frames-chained-selects.md
INDEX.md

Details

From the project README

Forms & Validation

Implement form-centric Hotwire workflows with Turbo Frames and Stimulus.

Core Workflow

  1. Identify the form flow: create/edit, inline edit, typeahead, modal form, or external controls.
  2. Wrap the form interaction scope in a Turbo Frame when validation errors must rerender in place.
  3. Return 422 for validation failures and 303 for successful redirects.
  4. Handle post-submit behavior with turbo:submit-end only when Turbo defaults are insufficient.
  5. Preserve user context during rerenders (focus/caret/selection).

Guardrails

  • Keep one source of truth for input state; avoid duplicate controls across frame and non-frame DOM.
  • Use the HTML form attribute for controls rendered outside the target <form> hierarchy.
  • Avoid firing submit logic on every keystroke without debounce/throttle.
  • Keep post-submit behavior explicit when form responses update only a frame.

Load References Selectively

Open only the file needed for the current request.

  • Inline editing: references/2024-02-27-turbo-frames-inline-edit.md
  • Modal validation flows: references/2024-05-21-turbo-frames-modals-validation.md
  • Typeahead search: references/2023-11-07-turbo-frames-typeahead-search.md
  • Typeahead validation with focus handling: references/2025-10-20-turbo-frames-typeahead-validation.md
  • External form controls in frames: references/2026-02-03-turbo-frames-external-form.md
  • Stimulus action parameters for forms: references/2024-01-16-stimulus-action-parameters.md
  • Dependent/chained select fields: references/2026-03-24-turbo-frames-chained-selects.md

Use references/INDEX.md for the full catalog.

Escalate to Neighbor Skills

  • Navigation/history/cache behavior: use hwc-navigation-content
  • WebSocket or Turbo Stream push updates: use hwc-realtime-streaming
  • Media upload/playback behavior: use hwc-media-content
  • Generic UX polish (spinners/progress/transitions): use hwc-ux-feedback
  • General Stimulus API design questions: use hwc-stimulus-fundamentals

Comments

Markdown supported