skills.rest
reckerswartz
reckerswartzCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

viewcomponent

Generate reusable Rails ViewComponents with slots, previews, and Tailwind styling.

Updated Mar 19, 2026
Search Tags:#tailwind#rails#rspec#hotwire#viewcomponent#stimulus
One-click install
npx skills add https://github.com/reckerswartz/resume_builder --skill viewcomponent
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: viewcomponent
Source: https://github.com/reckerswartz/resume_builder/tree/main/.devin/skills/viewcomponent
Command: npx skills add https://github.com/reckerswartz/resume_builder --skill viewcomponent

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines the creation of reusable Rails UI components by providing a structured, tested pattern with slots, previews, and Tailwind styling.

Core Features & Use Cases

  • Reusable UI components built with ViewComponent and slots for flexible composition
  • Tailwind CSS styling integrated with Stimulus/Hotwire for interactive UI elements
  • Lookbook previews and comprehensive tests to document API usage and ensure consistent UI
  • Accessibility-first, mobile-first design guidance embedded in all components

Quick Start

Generate a basic Button component with text and size, along with tests and a Lookbook preview.

Frequently Asked Questions about viewcomponent

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

FAQPage Schema
How do I build reusable Rails UI components with ViewComponent and Tailwind?▼

Reusable Rails UI components with ViewComponent and Tailwind are built by automating component creation with slots, previews, and styling. This generates modular blocks like cards and modals with a defined API and test coverage.

How do I add Stimulus and Hotwire interactivity to Rails ViewComponents?▼

Stimulus and Hotwire interactivity is integrated into Rails ViewComponents by embedding interactive UI logic directly into the component structure. This pairs seamlessly with Tailwind CSS styling for dynamic elements.

How do I generate Lookbook previews and RSpec tests for ViewComponents?▼

Lookbook previews and RSpec tests for ViewComponents are generated automatically alongside the component code. This documents API usage and ensures consistent test coverage for UI blocks.

Does this ViewComponent generator support mobile-first and accessibility design?▼

Yes, mobile-first and accessibility design are supported. Accessibility considerations and a mobile-first design workflow are embedded directly into all generated ViewComponents.

What is the best way to structure a Rails ViewComponent with slots for flexible composition?▼

The best way to structure a Rails ViewComponent with slots is using an automated pattern that defines a clear API. This enables flexible composition for modular UI blocks like tables and dashboards.

Can I use this to create a complete Rails component with tests and documentation?▼

Yes, you can create a complete Rails component with tests and documentation. The process outputs the component file, RSpec test coverage, and a Lookbook preview for API documentation.

Related Skills

Explore More Software Engineering Skills→
reckerswartzreckerswartz

tailwind-agent

Style Rails ERB views and ViewComponents with Tailwind CSS 4 utilities.

Community
Advanced
nschneblenschneble

turbo-agent

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

Community
Advanced
reckerswartzreckerswartz

viewcomponent-agent

Generate and test reusable Rails ViewComponents with slots and Lookbook previews.

Community
Advanced
ThinkOodleThinkOodle
5

rails-components

Guide reusable UI component creation in Ruby on Rails applications.

Official
Intermediate