Rails Design System

A pragmatic approach to Rails frontend architecture that pushes back against premature abstraction. Wait until you've used something three times before extracting it, prefer partials over components until complexity demands otherwise, and define design tokens through Tailwind's @theme directive. Covers the full modern Rails stack: Turbo Frames and Streams for targeted updates, Stimulus controllers for interactions, custom FormBuilders for consistent forms, and explicit partial locals. The 51 rules are prioritized by impact, which is refreshing when most design system docs treat everything as equally important. Best used alongside rails-dev for backend patterns and tailwind for utility classes, filling the gap between raw CSS and full component frameworks.

skills.sh installs: 270
GitHub stars: 222
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add pproenca/dot-skills --skill rails-design-system --agent claude-code

Installs into .claude/skills of the current project.

Files

Community Ruby on Rails Design System Best Practices

Comprehensive design system guide for Ruby on Rails applications, maintained by Community. Contains 51 rules across 9 categories, prioritized by impact to guide automated refactoring and code generation. Covers the full Rails frontend stack: Turbo (Drive, Frames, Streams), Stimulus, ERB partials, design tokens, form builders, and view helpers. Complements rails-dev (controllers, models, queries) and tailwind (CSS patterns) by covering the systematic UI component architecture layer.