viewcomponent-patterns_skill

Overview

This skill creates ViewComponents for reusable Rails UI elements using a TDD-first workflow. It provides patterns and examples for cards, badges, tables, modals, collection components, slots, and presenter-style wrappers. The focus is on testable, encapsulated view logic and explicit interfaces for predictable, maintainable UI components.

How this skill works

Start by writing a component spec (RED), run the failing test, scaffold a minimal component, implement behavior, then iterate until specs pass (GREEN). The skill supplies component templates, slot patterns, variant constants, collection rendering, and helper methods to keep markup and logic encapsulated. It also includes previews and recommended spec examples for variants, slots, and collections.

When to use it

• Building reusable, testable UI elements instead of Rails partials
• Extracting complex view partials into encapsulated components
• Creating consistent cards, badges, tables, modals, or status displays
• Rendering a collection of model-backed components with with_collection
• Needing flexible content areas via slots (header/footer/actions)

Best practices

• Write the component spec first and run it red before implementation
• Extend a shared ApplicationComponent for common helpers and behavior
• Use renders_one / renders_many slots for flexible composition
• Define variant classes as frozen constants and map variants to CSS safely
• Test variants, slots, and collection rendering with component specs
• Provide previews for local visual development and iterate with tests

Example use cases

• A CardComponent that accepts title, optional subtitle, and block content with header/footer slots
• BadgeComponent exposing variant constants for consistent status styling and unit tests for each variant
• TableComponent that renders columns and items or accepts row slots for custom row components
• ModalComponent with trigger, title, and footer slots and configurable size classes
• EventCardComponent wrapping a model, delegating attributes, formatting dates, and rendering nested badges