By ether-moon
7 skills (1 gateway + 6 specialists) for building Rails frontend with Hotwire — Turbo Drive, Turbo Frames, Turbo Streams, Stimulus, view transitions, forms, media, and native bridge.
npx claudepluginhub ether-moon/hotwire-frontend-skills --plugin hotwire-frontend-skillsEntry 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.
Implements Turbo Drive and Turbo Frames navigation: Drive cache lifecycle, tabbed navigation, pagination, infinite scroll, lazy loading, faceted search, Turbo 8 page refresh, render interception, view transitions, scroll restoration, partial page updates, and frame loading states. Use when building navigation, tabs, pagination, lazy-loaded content, SPA-like page transitions, infinite scroll, or rendering lifecycle. Cross-references: turbo-streams for real-time updates, hotwire-forms for form navigation, stimulus-controllers for client-side behavior, frontend-craft for triage.
Builds real-time features with Turbo Streams: inline stream tags, custom stream actions, broadcasting over WebSocket, Turbo 8 morphing, optimistic UI with reconciliation, ULID-based optimistic identity, cross-tab synchronization, and list animations. Use when adding real-time updates, broadcasting, morphing, optimistic state, live notifications, or server-pushed content changes. Cross-references: stimulus-controllers for client-side orchestration, turbo-navigation-rendering for frame navigation, hotwire-native for mobile broadcasting.
A Claude Code plugin that teaches Claude how to build Rails frontends with Hotwire. 7 skills — 1 gateway that triages requests and 6 specialists covering Turbo, Stimulus, forms, media, and native bridge — each backed by curated reference articles, official handbook chapters, and troubleshooting cookbooks.
| Skill | Domain | Knowledge |
|---|---|---|
frontend-craft | Gateway — triage, routing, common principles | SKILL.md only |
turbo-navigation-rendering | Drive, Frames, rendering lifecycle, view transitions | 7 refs, 7 handbook, 4 examples |
turbo-streams | Streams, broadcasting, morphing, optimistic state | 8 refs, 2 handbook, 1 example |
stimulus-controllers | Controller design, lifecycle, DOM, browser APIs | 9 refs, 11 handbook, 1 example |
hotwire-forms | Form submission, validation, autosave, submit UX | 7 refs, 3 examples |
media-content | Media playback, gallery, preview, rich content | 7 refs |
hotwire-native | Native bridge, web/native boundary | 7 refs, 4 handbook, 1 example |
Ask Claude anything about Hotwire frontend development. The frontend-craft gateway skill classifies the problem, applies cross-cutting principles, and routes to the right specialist. Each specialist follows a 5-step workflow with GOOD/BAD code guardrails, loading only the references it needs.
User request
→ frontend-craft (classify, apply principles)
→ specialist skill (references + handbook + examples)
→ code with guardrails
Add to your .claude/settings.json:
{
"permissions": {
"allow": []
},
"extraKnownMarketplaces": {
"hotwire-frontend-skills": {
"source": { "source": "github", "repo": "ether-moon/hotwire-frontend-skills" }
}
},
"enabledPlugins": {
"hotwire-frontend-skills@hotwire-frontend-skills": true
}
}
plugins/hotwire-frontend-skills/
├── .claude-plugin/
│ └── plugin.json # Plugin metadata (name, version, author)
├── skills/
│ ├── frontend-craft/ # Gateway skill
│ │ └── SKILL.md
│ ├── turbo-navigation-rendering/
│ │ ├── SKILL.md
│ │ ├── references/ # Pattern articles with GOOD/BAD examples
│ │ ├── handbook/ # Official Turbo documentation chapters
│ │ └── examples/ # Cookbooks and troubleshooting guides
│ ├── turbo-streams/
│ ├── stimulus-controllers/
│ ├── hotwire-forms/
│ ├── media-content/
│ └── hotwire-native/
├── hooks/
│ ├── hooks.json
│ └── on-prompt.sh
├── scripts/
└── schema/
Each specialist skill draws from up to three knowledge layers:
bash tests/all.sh
Validates JSON syntax, plugin.json fields, skill frontmatter, and structural integrity.
CI runs automatically on push and PR to main.
MIT
Advanced Ruby on Rails skills for MVC patterns, Active Record, and Hotwire
Share bugs, ideas, or general feedback.
Production-ready skills library for enhanced development workflows. Curated collection of tested skills for Claude Code deployments.
Rails development coordinator with domain skills for Rails 8+, Hotwire, security, and TDD. Built on Superpowers workflows.
Apply opinionated StimulusJS best practices from betterstimulus.com — patterns for writing, reviewing, and refactoring Stimulus controllers
Ruby on Rails development tools. Includes 5 specialized agents, 3 commands, 39 skills, and enhanced toolbox with 6 research hooks.
Permanent coding companion for Claude Code — survives any update. MCP-based terminal pet with ASCII art, stats, reactions, and personality.