skills.rest
mattszein
mattszeinCOMMUNITY
Explore all skills by this author →
GitHub

frontend

Build Rails presentation layers with ViewComponents, Stimulus, and Turbo Frames.

2|Updated Jun 13, 2025
Search Tags:#frontend#turbo#rails#tailwindcss#lookbook#viewcomponent#stimulus
One-click install
npx skills add https://github.com/mattszein/pro-rails --skill frontend-mattszein
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/mattszein/pro-rails/tree/main/.claude/skills/frontend
Command: npx skills add https://github.com/mattszein/pro-rails --skill frontend-mattszein

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you build and maintain the Rails presentation layer without leaking backend logic into views, components, or client-side behavior.

Core Features & Use Cases

  • View and component work: Create and refine ViewComponents, partials, layouts, and form markup for production Rails interfaces.
  • Interactive UI behavior: Implement Stimulus controllers, Turbo Frames, Turbo Streams, lazy loading, inline editing, and modal patterns.
  • Styling and UI polish: Apply TailwindCSS utilities, Lookbook previews, and animated icon patterns to ship consistent, maintainable interfaces.
  • Use case: Update an admin dashboard so new records open in a modal, list items edit inline, and broadcasts appear live without adding frontend framework complexity.

Quick Start

Build a Rails page using explicit translated labels, a ViewComponent, a thin Stimulus controller, and Turbo Frame updates with Tailwind styling.

Frequently Asked Questions about frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build Rails frontends without leaking backend business logic into UI code?▼

To build Rails frontends cleanly, use ViewComponents, thin Stimulus controllers, and Turbo Frames to isolate presentation logic from backend orchestration. This approach maintains a clear boundary between business logic and UI code.

How do I implement inline editing and modal patterns in Rails without adding a frontend framework?▼

Implement inline editing and modal patterns using Turbo Frames for lazy loading and targeted updates, paired with thin Stimulus controllers for interactive UI behavior. This avoids adding complex frontend framework dependencies.

What is the best way to wire Turbo broadcasts for live updates in a ViewComponent-based Rails interface?▼

Wire Turbo broadcasts using subscription-only broadcast targeting and dom_id-based frame targeting. This ensures live updates appear correctly within ViewComponent structures without mixing backend logic into UI code.

How do you apply TailwindCSS and Lookbook previews to maintain consistent Rails UI components?▼

Apply TailwindCSS utilities for styling and generate Lookbook previews to visually test ViewComponents. This workflow ensures consistent, maintainable interfaces and animated icon patterns across the Rails presentation layer.

Does this approach work for updating existing Rails admin dashboards with interactive product interfaces?▼

Yes, this approach works for Rails admin dashboards by using Turbo Streams for live broadcasts, ViewComponents for markup, and Stimulus for interactive behavior to open modals and edit list items inline.

Related Skills

Explore More Software Engineering Skills→
newstlernewstler
20

hotwire-patterns

Apply Turbo and Stimulus patterns to Rails CRUD views for interactive interfaces.

Community
Intermediate
nschneblenschneble

turbo-agent

Integrate Turbo Drive, Frames, and Streams into Rails 8.1+ applications.

Community
Advanced
jikig-aijikig-ai
12

dhh-rails-style

Apply 37signals DHH Rails conventions to Ruby and Rails code.

Official
Advanced
reckerswartzreckerswartz

hotwire

Implement Turbo Drive, Frames, Streams, and Stimulus in Rails 8 views.

Community
Advanced