rails-visual-design

Orchestrate a Rails 8 design system with Tailwind CSS, Hotwire, and Propshaft.

Updated Jun 9, 2026
One-click install
npx skills add https://github.com/arthun01/achados-uesc --skill rails-visual-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rails-visual-design
Source: https://github.com/arthun01/achados-uesc/tree/main/.opencode/skills/rails-visual-design
Command: npx skills add https://github.com/arthun01/achados-uesc --skill rails-visual-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tailwindcss, hotwire, turbo, stimulus, propshaft, importmap, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a comprehensive approach to creating visually stunning, functional interfaces for Rails 8 projects, streamlining the design-to-implementation process.

Core Features & Use Cases

  • Design System Integration: Orchestrate the full design system workflow, from tokens to layout, components, and interactivity.
  • Rails 8 Compatibility: Tailored for Rails 8.1+ with Tailwind CSS v4, Hotwire (Turbo + Stimulus), and Propshaft + Importmap.
  • Use Case: When you need to design, redesign, or enhance the UI of any page, feature, or layout in a Rails project using Tailwind and Hotwire.

Quick Start

Use the rails-visual-design skill to create a new layout for your Rails project with Tailwind CSS and Hotwire.

Frequently Asked Questions about rails-visual-design

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

FAQPage Schema
How do I build a UI design system in Rails 8 using Tailwind CSS and Hotwire?▼

To build a UI design system in Rails 8, this Skill orchestrates the workflow from design tokens to layout, components, and interactivity using Tailwind CSS v4, Hotwire (Turbo + Stimulus), and Propshaft. It provides a structured process for implementing visually functional interfaces.

Can I use Tailwind CSS v4 with Hotwire and Propshaft for Rails UI development?▼

Yes, Tailwind CSS v4 works with Hotwire and Propshaft for Rails UI development. This Skill is specifically tailored for Rails 8.1+ applications, utilizing Importmap alongside Turbo and Stimulus to orchestrate the full design system workflow.

What is the best way to structure a Rails 8 application layout with Turbo and Stimulus?▼

The best way to structure a Rails 8 application layout is by orchestrating design tokens, layout structures, and component interactivity. This Skill provides a structured workflow integrating Turbo and Stimulus to build premium, functional interfaces seamlessly.

Does this Rails UI design approach support Propshaft and Importmap?▼

Yes, this Rails UI design approach fully supports Propshaft and Importmap. It is explicitly tailored for Rails 8.1+ projects, combining these asset pipeline tools with Tailwind CSS v4 and Hotwire to streamline the design-to-implementation process.

How do I integrate design tokens into a Rails 8 project?▼

To integrate design tokens into a Rails 8 project, this Skill orchestrates a full design system workflow starting from tokens and extending to layout and components. It uses Tailwind CSS, Hotwire, and Propshaft to ensure structured UI implementation.

When should I use a structured workflow for Rails UI design rather than custom styling?▼

You should use a structured workflow for Rails UI design when you need to design, redesign, or enhance interfaces requiring a cohesive design system. This approach streamlines the design-to-implementation process for Rails 8 projects using Tailwind and Hotwire.