Does this skill allow for custom CSS files?

The skill discourages custom CSS and hardcoded styles, instead focusing on Tailwind utility classes and DaisyUI components to maintain design system consistency.

Are the generated components accessible?

The skill leverages DaisyUI's built-in accessibility features and checks for WCAG-compliant color contrast ratios.

Does it support mobile-first development?

Yes, the skill enforces a mobile-first approach, requiring responsive breakpoints for all layout and typography utilities.

Is it compatible with ViewComponents?

Yes, it is designed to work seamlessly with standard Rails ERB templates and ViewComponent architectures.

How does it handle dark mode in Rails?

It implements dark mode using DaisyUI's data-theme attributes and provides JavaScript controller patterns for theme switching.

Rails UI Styling with Tailwind & DaisyUI

Name: Rails UI Styling with Tailwind & DaisyUI
Author: zerobearing2

byzerobearing2

•

デザインツール

Styles Ruby on Rails applications using Tailwind CSS and DaisyUI to create responsive, accessible, and themeable user interfaces without custom CSS.

概要

This skill provides a comprehensive framework for styling Rails applications by leveraging the utility-first power of Tailwind CSS and the semantic component library of DaisyUI. It enforces an opinionated design system that prioritizes mobile-first responsiveness, accessibility, and consistency while strictly prohibiting hardcoded colors and inline styles. By using this skill, developers can rapidly prototype and build production-ready UIs that support advanced features like dark mode and theme switching through standardized design tokens and reusable patterns.

主な機能

Semantic component implementation with DaisyUI
Built-in theme switching and dark mode support
Utility-first layout construction using Tailwind CSS
18 GitHub stars
Mobile-first responsive design enforcement
Accessibility-verified UI patterns (WCAG 2.1 AA)

ユースケース

Building responsive, production-grade Rails view templates
Rapidly prototyping mobile-friendly layouts without manual CSS
Implementing consistent design systems and themeable UI components

概要

主な機能

Semantic component implementation with DaisyUI
Built-in theme switching and dark mode support
Utility-first layout construction using Tailwind CSS
18 GitHub stars
Mobile-first responsive design enforcement
Accessibility-verified UI patterns (WCAG 2.1 AA)

ユースケース

Building responsive, production-grade Rails view templates
Rapidly prototyping mobile-friendly layouts without manual CSS
Implementing consistent design systems and themeable UI components