← ClaudeAtlas

rails-viewcomponentslisted

Use when creating, extracting, or refactoring ViewComponents in a Rails app — including slot design, component API, testing, and when to extract vs keep as partials
mickzijdel/rails-toolkit · ★ 0 · Web & Frontend · score 70
Install: claude install-skill mickzijdel/rails-toolkit
# Rails ViewComponents ## Overview ViewComponents are Ruby objects that render HTML. Think of them as "ActiveRecord for UI" — they bring testability, explicit interfaces, and reuse to view code that would otherwise be scattered across partials. ## When to Use - Replacing a partial that has grown logic or conditional rendering - A UI pattern appears in 3+ places (three-instance rule before extracting) - The view needs unit-testable behaviour - You want an explicit, typed interface instead of implicit local assigns **Keep as a partial when:** it's simple, single-use, and has no logic. ## Component Types | Type | Purpose | Example | |------|---------|---------| | **General-purpose** | Reusable UI pattern | `ButtonComponent`, `CardComponent` | | **Domain-specific** | Wraps a model into a general component | `User::AvatarComponent` → `DesignSystem::AvatarComponent` | Extract general-purpose components only after they're proven useful in multiple contexts — "good frameworks are extracted, not invented." ## File Structure ``` app/components/ button_component.rb button_component.html.erb user/ avatar_component.rb avatar_component.html.erb ``` ## Defining a Component Make the component the **single source of truth** for its styling: keep the class map in a constant and resolve it through one method — never scatter `btn btn-*` shims across views. ```ruby class ButtonComponent < ViewComponent::Base VARIANT_CLASSES = { primary: "bg-blue-600 text-white h