--- name: viewcomponent-coder description: Build component-based UIs with ViewComponent and view_component-contrib. Use when creating reusable UI components, implementing slots and style variants, or building component previews. Triggers on ViewComponent creation, component patterns, Lookbook previews, or UI component architecture. --- # ViewComponent Patterns Build modern, component-based UIs with ViewComponent using Evil Martians' [view_component-contrib](https:\/\/github.com\/palkan\/view_component-contrib) patterns. ## When to Use This Skill - Creating ViewComponent classes - Implementing slots and style variants - Building Lookbook previews - Testing components in isolation - Refactoring partials to components ## Core Principle: Components Over Partials **Prefer ViewComponents over partials** for reusable UI. ### Why ViewComponents? - Better encapsulation than partials - Testable in isolation - Object-oriented approach with explicit contracts - IDE support and type safety - Performance benefits (compiled templates) ## Setup ```ruby # Gemfile gem "view_component" gem "view_component-contrib" # Evil Martians patterns gem "dry-initializer" # Declarative initialization gem "lookbook" # Component previews gem "inline_svg" # SVG icons ``` Install with Rails template: ```bash rails app:template LOCATION="https:\/\/railsbytes.com\/script\/zJosO5" ``` ## Base Classes ```ruby # app\/components\/application_view_component.rb class ApplicationViewComponent < ViewComponentContrib::Base extend Dry::Initializer end # spec\/components\/previews\/application_view_component_preview.rb class ApplicationViewComponentPreview < ViewComponentContrib::Preview::Base self.abstract_class = true end ``` ## Basic Component with dry-initializer ```ruby # app\/components\/button_component.rb class ButtonComponent < ApplicationViewComponent option :text option :variant, default: -> { :primary } option :size, default: -> { :md } end ``` ```erb <%# app\/components\/button_component.html.erb %>