skills.rest
doncan-orozco
doncan-orozcoCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Implement shadcn/ui Radix UI patterns with Phlex components and Tailwind CSS v4.

Updated Jan 20, 2023
Search Tags:#design system#shadcn/ui#ui components#rails#stimulus#phlex
One-click install
npx skills add https://github.com/doncan-orozco/papyro --skill design-system-doncan-orozco
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/doncan-orozco/papyro/tree/main/.ai/skills/design-system
Command: npx skills add https://github.com/doncan-orozco/papyro --skill design-system-doncan-orozco

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of Phlex components that mirror shadcn/ui's design patterns, enabling developers to build consistent, accessible, and themeable user interfaces rapidly within a Rails application.

Core Features & Use Cases

  • Pixel-Perfect Conversion: Components are direct translations of shadcn/ui Radix UI components, ensuring visual fidelity.
  • Semantic Token Integration: Leverages Tailwind CSS v4's OKLCH color space and semantic tokens for easy theming and dark mode support.
  • Interactive Component Patterns: Includes Stimulus controllers for dynamic elements like switches, tabs, dialogs, and tooltips, with clear usage patterns.
  • Use Case: A developer needs to implement a new user profile card. They can use the Components::Ui::Card and Components::Ui::Avatar components, ensuring it matches the project's design system and integrates seamlessly with existing interactive elements.

Quick Start

Use the design-system skill to generate a new button component with the 'destructive' variant.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I use shadcn/ui components in a Rails application?▼

You can use shadcn/ui components in a Rails application by implementing Radix UI design patterns using Phlex components. This approach provides direct visual translations of shadcn/ui elements while integrating seamlessly with your Rails stack.

What is the best way to add interactive UI elements like dialogs and tabs in Rails?▼

The best way to add interactive UI elements in Rails is by using Stimulus controllers paired with Phlex components. This combination handles dynamic behaviors for elements like switches, tabs, and tooltips while maintaining consistent design patterns.

Does Tailwind CSS v4 support OKLCH color space for dark mode theming?▼

Yes, Tailwind CSS v4 supports OKLCH color space and class-based dark mode. By leveraging semantic tokens within this setup, you can easily theme your UI components and manage dark mode states effectively.

Can I use Phlex to build accessible user interfaces without React?▼

Yes, you can use Phlex to build accessible user interfaces without React. It mirrors shadcn/ui Radix UI design patterns directly in Ruby, ensuring visual fidelity and accessibility while keeping your Rails stack framework-native.

How do I convert shadcn/ui components to Phlex?▼

You can convert shadcn/ui components to Phlex using detailed conversion guides and examples. These resources provide direct translations of Radix UI components, ensuring pixel-perfect visual fidelity within your Rails application.

What are the limitations of using Phlex for shadcn/ui patterns?▼

Limitations of using Phlex for shadcn/ui patterns include the need to manually pair dynamic elements with Stimulus controllers. While base components are straightforward, interactive elements require careful JavaScript integration to match Radix UI behaviors.

Related Skills

Explore More Software Engineering Skills→
KaakatiKaakati
2

phlex-dev

Generate Ruby Phlex view components for Rails with Atomic Design.

Community
Intermediate
ZempTimeZempTime
3

vanilla-rails-hotwire

Codifies Hotwire and Stimulus conventions for Rails apps to ensure stable UI updates.

Community
Basic
stevegeekstevegeek
40

Vident

Build type-safe Rails components with Stimulus integration via a Ruby DSL.

Community
Advanced
rubakasrubakas
4

rails-view-components-advanced

Organize complex Rails ViewComponent UI patterns with composition, slots, and lifecycle guidance.

Official
Advanced