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.
npx claudepluginhub ether-moon/hotwire-frontend-skills --plugin hotwire-frontend-skillsThis skill is limited to using the following tools:
Triage incoming Hotwire frontend requests, apply cross-cutting principles, and route to the right specialist skill. This skill owns no implementation cookbook — each specialist carries its own.
Provides 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.
Triage incoming Hotwire frontend requests, apply cross-cutting principles, and route to the right specialist skill. This skill owns no implementation cookbook — each specialist carries its own.
| Request Pattern | Route To |
|---|---|
| URL, history, frame navigation, Drive caching, rendering lifecycle, view transitions, page-refresh morphing | turbo-navigation-rendering |
| Turbo Streams, broadcasting, stream morphing, optimistic state, real-time sync via broadcasting | turbo-streams |
| Stimulus controller design, lifecycle, DOM behavior, browser APIs | stimulus-controllers |
| Form submission, validation, autosave, inline edit, submit UX | hotwire-forms |
| Media playback, gallery, upload preview, rich content integrations | media-content |
| Native bridge, web/native boundary, path configuration | hotwire-native |
| Broad or ambiguous frontend request | Stay here — apply principles below, then route |
Determine the primary domain: navigation/rendering, streams/state sync, controller behavior, forms/submission, media UX, or native bridge. If the request clearly maps to one domain, route immediately.
Before routing, check whether these cross-cutting principles apply:
data-turbo-* attributes, frame src, and stream actions before reaching for custom JavaScript.turbo:load, turbo:submit-end, turbo:before-stream-render) instead of setTimeout.Documentation accuracy: When specific API code is needed, use context7 (
resolve-library-id→query-docs) to fetch the latest official documentation. Core patterns and architectural guidance in this skill are version-stable, but specific method signatures and configuration formats should be verified against current docs.
When a request spans multiple skills, assign a lead skill:
| Overlap | Lead | Support |
|---|---|---|
| Form inside a lazy-loaded frame | hotwire-forms | turbo-navigation-rendering |
| Stream-driven form validation | hotwire-forms | turbo-streams |
| Media upload with progress indicator | media-content | hotwire-forms |
| Optimistic UI with stream reconciliation | turbo-streams | turbo-navigation-rendering |
| Controller coordinating frame navigation | turbo-navigation-rendering | stimulus-controllers |
| Bridge component with form submission | hotwire-native | hotwire-forms |
| CSS architecture for controller-driven UI | stimulus-controllers | (reference only) |
Page-refresh morphing (<meta name="turbo-refresh-method" content="morph">) | turbo-navigation-rendering | turbo-streams |
Stream-action morphing (turbo_stream.replace method: :morph) | turbo-streams | turbo-navigation-rendering |
| View transitions during page navigation (Drive visits, frame navigation) | turbo-navigation-rendering | turbo-streams |
| View transitions triggered by stream updates (list animations, item add/remove) | turbo-streams | turbo-navigation-rendering |
Rule: the skill that owns the hardest constraint (correctness, data integrity, platform boundary) leads.
| User Request | Classification | Route |
|---|---|---|
| "Add a modal that lets users edit their profile inline" | Form + frame boundary | Lead: hotwire-forms, Support: turbo-navigation-rendering |
| "Make the notification count update in real-time across tabs" | Real-time + cross-tab sync | turbo-streams |
| "Add a carousel for product images with swipe gestures" | Media rendering + library integration | media-content |
Hand off to the identified specialist skill by invoking it directly. Pass along any context from Step 2 (applicable principles) and Step 3 (lead/support assignment). The specialist will load its own references, handbook, and examples as needed. For multi-skill requests, invoke the lead skill — it will escalate to the support skill when needed.
| Signal | Action |
|---|---|
| Request requires server-side model/controller changes | Escalate to backend — outside this plugin's scope |
| Request requires native platform APIs beyond bridge components | Route to hotwire-native |
| Request is about deployment, CI, or infrastructure | Outside this plugin's scope |
| Request is about non-Hotwire JavaScript frameworks | Outside this plugin's scope |
This plugin covers the Hotwire frontend layer: Turbo Drive, Turbo Frames, Turbo Streams, Stimulus, and view-layer patterns (CSS, transitions, media). It does not cover: