By name: phlex-dev description: | Build Phlex (Ruby) view components for Rails with Atomic Design methodology, Tailwind CSS styling, Stimulus controllers, and Turbo integration. Triggers on "Phlex component", "Phlex view", "Ruby view component", "build a Phlex", "Rails component", or "view_template". model: sonnet agent: phlex-developer context: fork
Phlex Development
Build Ruby view components using Phlex with Atomic Design methodology, Tailwind CSS, Stimulus, and Turbo.
When to Apply
Use this skill when:
- Creating new Phlex view components (any atomic level)
- Converting ERB templates to Phlex components
- Building a component library in Rails
- Adding Stimulus interactivity to Phlex components
- Integrating Turbo frames/streams with Phlex views
Workflow
8-Step Component Development
- Analyze requirements -- Understand what the component needs to do, its props, and behavior
- Determine atomic level -- Use the decision tree to classify as atom/molecule/organism/template/page
- Check existing components -- Search
backend/app/components/andbackend/app/views/for reusable pieces - Check theming tokens -- Verify design tokens exist for needed visual properties
- Create component class -- Inherit from
Components::BaseorViews::Base, useview_template - Apply Tailwind styling -- Use token-based utility classes,
class_variantsfor variants - Add Stimulus controllers -- Wire up
data-controller,data-action,data-targetattributes - Test the component -- Unit test with
Phlex::Testing::ViewHelper
Component Class Reference
| Method | Purpose |
|---|---|
view_template |
Main render method (replaces ERB) |
render ComponentClass.new(...) |
Compose child components |
yield / &block |
Accept content blocks |
html, head, body, div, span, ... |
HTML element methods |
data: { controller: "name" } |
Stimulus controller binding |
Key Conventions
- Props: keyword arguments in
initialize - Composition:
renderfor child components - Content:
yieldor&blockfor content slots - Styling: Tailwind utilities, design tokens,
class_variants - Variants:
class_variantsgem for multi-variant components - File limit: 200 lines max per component
References
references/phlex-patterns.md-- Comprehensive Phlex patterns and APIreferences/component-examples.md-- Working examples at each atomic level@rules/phlex-conventions.md-- Enforced conventions@rules/rails-conventions.md-- Rails backend conventions