hotwire-frontend-skills

Entry skill for broad or ambiguous Hotwire frontend requests. Triages problems, applies common principles, and routes to specialist skills. Use for Rails frontend, Hotwire frontend, Turbo, Stimulus, frontend architecture, page layout, component architecture, or when the request spans multiple concerns and is not clearly scoped to navigation, streams, controllers, forms, media, or native.

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.

Builds native iOS and Android apps with Hotwire Native: iOS/Android setup, path configuration for server-driven routing, bridge components for web-to-native communication, native navigation patterns, authentication flows, and Rails backend integration. Use when building mobile apps, wrapping a Rails app in a native shell, iOS app, Android app, Hotwire Native iOS, Hotwire Native Android, bridge components, or native features. Cross-references: turbo-navigation-rendering for web view navigation, stimulus-controllers for bridge component JavaScript.

Handles media-heavy Hotwire features: image/video/audio uploads, previews, playback controls, progress tracking, galleries, carousels, and third-party integrations (WaveSurfer, Swiper, Picture-in-Picture, Blurhash). Use when the core problem is media rendering, playback state, audio/video player, file preview, carousel, gallery, waveform display, or media library integration. Cross-references: turbo-streams for server-pushed updates, hotwire-forms for upload forms, stimulus-controllers for non-media controller patterns.

Implements robust Stimulus controllers: lifecycle hooks, values and valueChanged callbacks, targets and target callbacks, outlets API, action parameters, keyboard events, MutationObserver patterns, and production-ready controller design. Use when building Stimulus controllers, adding JavaScript behavior, wiring up interactivity, implementing toggles, dropdowns, or client-side DOM interactions. Cross-references: hotwire-forms for form controllers, turbo-streams for stream orchestration, turbo-navigation-rendering for navigation controllers.

1 hook across 1 event