agentsclimarketplace

Rails design system

Skill ComeOnOliver/skillshub/skills/pproenca/dot-skills/rails-design-system

🧠 The right skill, one API call. AI agent skills registry with token-efficient skill resolution. 5,000+ skills from 500+ top repos.

Install
npx -y skills add ComeOnOliver/skillshub --skill rails-design-system

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

8.7 KB, as published. Nobody here has run it

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.

When to Apply

Reference these guidelines when:

  • Deciding whether to extract a partial, component, or helper
  • Defining design tokens with Tailwind CSS @theme
  • Creating or refactoring ERB partials with explicit locals
  • Decomposing pages into Turbo Frames for targeted updates
  • Using Turbo Streams for multi-element CRUD updates
  • Coordinating Turbo navigation with Stimulus controllers
  • Building ViewComponent or Phlex components for complex UI
  • Implementing a custom FormBuilder for consistent forms
  • Writing view helpers for badges, icons, and conditional classes
  • Adding Stimulus controllers for interactive behaviors
  • Managing JavaScript dependencies with Import Maps
  • Auditing the codebase for UI duplication and naming drift

Rule Categories by Priority

PriorityCategoryImpactPrefix
1Design DecisionsCRITICALdecide-
2Design TokensCRITICALtoken-
3Turbo IntegrationHIGHturbo-
4Partial PatternsHIGHpartial-
5Component ArchitectureHIGHcomp-
6Form SystemMEDIUM-HIGHform-
7Helper PatternsMEDIUMhelper-
8Stimulus BehaviorsMEDIUMstim-
9Consistency & OrganizationLOW-MEDIUMorg-

Quick Reference

1. Design Decisions (CRITICAL)

2. Design Tokens (CRITICAL)

3. Turbo Integration (HIGH)

4. Partial Patterns (HIGH)

5. Component Architecture (HIGH)

6. Form System (MEDIUM-HIGH)

7. Helper Patterns (MEDIUM)

8. Stimulus Behaviors (MEDIUM)

9. Consistency & Organization (LOW-MEDIUM)

How to Use

Read individual reference files for detailed explanations and code examples:

Reference Files

FileDescription
references/_sections.mdCategory definitions and ordering
assets/templates/_template.mdTemplate for new rules
metadata.jsonVersion and reference information

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.