Handles Hotwire form workflows: form submission lifecycle (422/303), inline editing, validation errors, typeahead/autocomplete, modal forms, external form controls, autosave, activity indicators, and symmetric submit locking. Use when building interactive forms, inline editing, click-to-edit, search, autocomplete, form validation errors, or submission UX. Cross-references: turbo-streams for real-time validation, stimulus-controllers for complex form behavior, turbo-navigation-rendering for frame navigation context.
npx claudepluginhub ether-moon/hotwire-frontend-skills --plugin hotwire-frontend-skillsThis skill is limited to using the following tools:
Implement form-centric Hotwire workflows with Turbo Frames and Stimulus. This skill covers the full form lifecycle: submission, validation, inline edit, typeahead, autosave, activity indicators, and submit UX.
examples/inline-edit-form.mdexamples/modal-form.mdexamples/multi-step-wizard.mdreferences/INDEX.mdreferences/action-parameters-forms.mdreferences/form-submission-lifecycle.mdreferences/turbo-drive-progress-bar.mdreferences/turbo-frames-external-forms.mdreferences/turbo-frames-inline-edit.mdreferences/turbo-frames-modal-validation.mdreferences/turbo-frames-typeahead.mdProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Analyzes competition with Porter's Five Forces, Blue Ocean Strategy, and positioning maps to identify differentiation opportunities and market positioning for startups and pitches.
Share bugs, ideas, or general feedback.
Implement form-centric Hotwire workflows with Turbo Frames and Stimulus. This skill covers the full form lifecycle: submission, validation, inline edit, typeahead, autosave, activity indicators, and submit UX.
| Requirement | Pattern | Reference |
|---|---|---|
| Click-to-edit content in place | Inline edit with Turbo Frames | references/turbo-frames-inline-edit.md |
| Form inside a modal dialog | Modal form with validation | references/turbo-frames-modal-validation.md |
| As-you-type search filtering | Typeahead search | references/turbo-frames-typeahead.md |
| Typeahead with validation/focus | Typeahead search (validation section) | references/turbo-frames-typeahead.md |
| Submit button outside the form | External form controls | references/turbo-frames-external-forms.md |
| Standard form create/update | Form submission lifecycle | references/form-submission-lifecycle.md |
| Dynamic form behavior from data | Stimulus action parameters | references/action-parameters-forms.md |
Every interactive form pattern needs a Turbo Frame boundary:
Turbo requires specific HTTP status codes:
422 Unprocessable Entity — Turbo re-renders the form with errors.303 See Other redirect — Turbo follows the redirect.200 for validation errors breaks Turbo.See references/form-submission-lifecycle.md for full controller patterns.
data-turbo-submits-with for submit button loading states.turbo:submit-start and turbo:submit-end.<%# GOOD: Turbo handles button state %>
<%= f.submit "Save", data: { turbo_submits_with: "Saving..." } %>
Let Rails handle CSRF tokens automatically. Never manually inject tokens.
<%# GOOD %>
<%= form_with model: @task do |f| %>
<% end %>
<%# BAD %>
<form action="/tasks" method="post">
<input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
</form>
Use form_with, not form_tag. form_with generates Turbo-compatible forms by default.
Return 422 for validation errors, 303 for success. Returning 200 prevents Turbo from re-rendering. See Step 3 above.
Wrap modal forms in their own Turbo Frame. Match the frame ID to the trigger link's target.
Use data-turbo-submits-with for button states. Do not write custom JavaScript for this.
Prefer form_with url: for search forms. Search forms use GET and do not map to a model.
Keep one source of truth for input state. Avoid duplicating controls across frame and non-frame DOM.
Use the HTML form attribute for controls rendered outside the target <form> hierarchy.
Debounce/throttle keystroke-driven submissions. Do not fire submit on every keystroke.
Keep submit locking symmetric. Every lock on turbo:submit-start must unlock on turbo:submit-end.
Full catalog: references/INDEX.md.
Out-of-scope requests: route back to frontend-craft for triage.