mcpField
H
hwc-forms-validation

hwc-forms-validation

github.com/lucianghindaDevelopment42537 installsUpdated today
Repository

About hwc-forms-validation

A forms and validation skill for Hotwire developers using Turbo Frames and Stimulus. It guides in-place error rendering, submission responses, and preserving user context during rerenders.

Key features

  1. 01Plan common form interaction flows
  2. 02Render validation errors in Turbo Frames
  3. 03Distinguish failure and success responses
  4. 04Preserve focus and caret position
  5. 05Avoid duplicate input state

Use cases

  1. 01Implement inline editing and modal forms
  2. 02Build typeahead with validation
  3. 03Handle controls outside a frame

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/lucianghinda/superpowers-ruby --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.

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
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

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