skills.rest
Kaakati
KaakatiCOMMUNITY
Explore all skills by this author →
Website𝕏@kaakatiGitHub

phlex-dev

Generate Ruby Phlex view components for Rails with Atomic Design.

2|1|Updated Feb 27, 2026
Search Tags:#atomic design#tailwind css#turbo#rails#component development#stimulus#phlex
One-click install
npx skills add https://github.com/Kaakati/sdh-claude-skills --skill phlex-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: phlex-dev
Source: https://github.com/Kaakati/sdh-claude-skills/tree/main/.claude/skills/phlex-dev
Command: npx skills add https://github.com/Kaakati/sdh-claude-skills --skill phlex-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation of reusable, maintainable, and well-structured view components in Rails applications using the Phlex gem, adhering to Atomic Design principles.

Core Features & Use Cases

  • Component Generation: Create Phlex view components for Rails applications.
  • Atomic Design Methodology: Organizes components into atoms, molecules, organisms, templates, and pages for better scalability.
  • Styling Integration: Supports Tailwind CSS for efficient and consistent styling.
  • Interactivity: Integrates Stimulus controllers for client-side interactivity.
  • Turbo Integration: Facilitates seamless integration with Turbo for enhanced user experiences.
  • Use Case: Develop a new button component following Atomic Design principles, apply Tailwind CSS for styling, and wire up a Stimulus controller for hover effects, all within the Phlex framework.

Quick Start

Create a new Phlex component for a user avatar with a given image URL and size.

Frequently Asked Questions about phlex-dev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build Rails Phlex components using Atomic Design?▼

You can build them by generating Ruby Phlex view components that follow class structure rules, keyword argument props, content blocks, and composition patterns to enforce scalable UI architecture.

What is the best way to structure Phlex view components in a Rails application?▼

The best way to structure Phlex view components is by applying Atomic Design principles, organizing your Ruby code into distinct hierarchy levels like atoms, molecules, and organisms for better maintainability.

Can I use Tailwind CSS and Stimulus with Phlex components?▼

Yes, Phlex components support Tailwind CSS for efficient styling and integrate seamlessly with Stimulus controllers to add client-side interactivity within your Rails application.

Does Phlex component generation work with Turbo for Rails interactivity?▼

Turbo integration is fully supported during Phlex component generation, facilitating seamless integration to enhance user experiences and interactive page updates without writing custom JavaScript.

How do I pass props and content blocks to a Phlex component?▼

Phlex components require adherence to specific class structures, accepting data through keyword argument props and rendering nested elements using content blocks to ensure predictable composition patterns.

Are there limitations to using Phlex over standard Rails view templates?▼

Using Phlex requires strict adherence to its component class structure, keyword argument props, and composition patterns, demanding a shift from traditional HTML view templates to Ruby-based rendering logic.

Related Skills

Explore More Software Engineering Skills→
xtonextone
3

implementing-hotwire-admin

Automate Turbo-powered Rails 8 admin interfaces with Playwright/Capybara tests.

Official
Advanced
KaakatiKaakati
10

Turbo & Hotwire Patterns

Implement Turbo and Stimulus patterns for real-time Rails UI updates.

Community
Intermediate
sandnapsandnap
6

stimulus

Wire Stimulus controllers to DOM elements via data-controller attributes for declarative interactivity.

Community
Advanced
mlbrightmlbright

tailwind-agent

Style Rails ERB views and ViewComponents with Tailwind CSS 4 utility classes.

Community
Intermediate