rails-cto-view-component

The ViewComponent skill. Handles reusable UI components in a Hotwire project.

What it does

Guides the agent through building reusable, testable UI components with ViewComponent, Turbo, and Stimulus. The skill covers:

• Component structure. Ruby class + ERB template, named after the responsibility (ButtonComponent, CardComponent, DropdownComponent).
• Variants over parameters. A finite set of variants (primary, secondary, danger) rather than accepting arbitrary class strings from callers.
• Turbo Frames and Streams. When a component manages its own state, the skill wires it via Turbo — not custom JavaScript.
• Stimulus integration. Frontend behavior attaches via data-controller attributes on the component template, reusing existing Stimulus controllers where possible.
• Lookbook previews. Every component gets a preview file under test/components/previews/ so designers and developers can view it in isolation.
• Component tests. Each component has a matching test using the Minitest::Spec DSL — same rules as rails-cto-minitest.

When it triggers

• Creating or modifying any file under app/components/
• Adding a new component or refactoring an existing one
• Building Turbo Frames or Streams that wrap reusable UI
• Writing component previews for Lookbook
• When you mention viewcomponent, component, preview, lookbook, turbo frame, or reusable UI

Example

You: Extract the bookmark card into a reusable component.

Agent: [invokes /rails-cto-view-component]
       [creates app/components/bookmark_card_component.rb]
       [creates app/components/bookmark_card_component.html.erb]
       [creates test/components/bookmark_card_component_test.rb]
       [creates test/components/previews/bookmark_card_component_preview.rb]
       [invokes /rails-cto-qa after the .rb changes]
       [invokes /rails-cto-erb and /rails-cto-tailwind after the .html.erb change]

View source

skills/rails-cto-view-component/SKILL.md on GitHub →