MCP Development
coollabsio/coolify
A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.
Ruby on Rails design system guidelines for building consistent, maintainable UI with minimal abstraction.
Install Rails Design System
$ npx skills add pproenca/dot-skills --skill rails-design-system -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install pproenca/dot-skills rails-design-system --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/.experimental/rails-design-system .claude/skills/rails-design-system && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "rails-design-system" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/rails-design-system into .claude/skills/rails-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "rails-design-system", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/rails-design-systemType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add pproenca/dot-skills --skill rails-design-system -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install pproenca/dot-skills rails-design-system --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/.experimental/rails-design-system .agents/skills/rails-design-system && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "rails-design-system" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/rails-design-system into .agents/skills/rails-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "rails-design-system", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pproenca/dot-skills --skill rails-design-system -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install pproenca/dot-skills rails-design-system --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/.experimental/rails-design-system .cursor/skills/rails-design-system && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "rails-design-system" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/rails-design-system into .cursor/skills/rails-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "rails-design-system", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/pproenca/dot-skills.git --path skills/.experimental/rails-design-system--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add pproenca/dot-skills --skill rails-design-system -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install pproenca/dot-skills rails-design-system --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/.experimental/rails-design-system .gemini/skills/rails-design-system && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "rails-design-system" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/rails-design-system into .gemini/skills/rails-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "rails-design-system", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install pproenca/dot-skills rails-design-systemInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add pproenca/dot-skills --skill rails-design-system -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/.experimental/rails-design-system .github/skills/rails-design-system && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "rails-design-system" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/rails-design-system into .github/skills/rails-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "rails-design-system", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pproenca/dot-skills --skill rails-design-system -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install pproenca/dot-skills rails-design-system --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/.experimental/rails-design-system .opencode/skills/rails-design-system && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "rails-design-system" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/rails-design-system into .opencode/skills/rails-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "rails-design-system", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
rails-design-system- GitHub stars
- 214
- Token cost
- ~2.4k tokens
- SKILL.md length
- 725 words
- Files
- 55 (incl. references, assets)
- Skills in repo
- 182
- Repo updated
- First seen
- Licence
- MIT
At a glance
Ruby on Rails design system guidelines for building consistent, maintainable UI with minimal abstraction.
- Works in 9 steps: Design Decisions (CRITICAL) → Design Tokens (CRITICAL) → Turbo Integration (HIGH) → …
- Tasks involving ERB partials
- SKILL.md covers When to Apply, Rule Categories by Priority, Quick Reference and How to Use, plus 1 more section
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Rails Design System is an agent skill from pproenca/dot-skills. Ruby on Rails design system guidelines for building consistent, maintainable UI with minimal abstraction. This skill should be used when creating or refactoring Rails views, partials, components, form builders, helpers, Stimulus controllers, Turbo Frames, Turbo Streams, or design tokens. Triggers on tasks involving ERB partials, Turbo navigation, Turbo Streams, ViewComponent, Phlex, Tailwind design tokens, custom form builders, view helpers, Stimulus behaviors, Import Maps, Lookbook previews, or design system…
Its SKILL.md is about 2.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 57 other files, including reference files and assets (for example `assets/templates/_template.md`, `metadata.json` and `references/_sections.md`).
It sits in Frontend & Design, covering Backend development, Design systems and Design tokens. It works with Ruby on Rails and Tailwind CSS. The repository describes itself as: A collection of AI agent skills following the Agent Skills open format. The licence is MIT.
When your agent uses it
- Tasks involving ERB partials
- Turbo navigation
- Tailwind design tokens
- Custom form builders
Example prompts
- “/rails-design-system”
Workflow steps
9 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit cf93c57. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Rails Design System loads about 2.4k tokens when it runs, and up to ~44k if it reads all its reference files. Until then it costs about 139 tokens; SKILL.md has 725 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from pproenca/dot-skills at commit cf93c57, republished under its MIT licence (© pproenca). 725 words, ~2,380 tokens.
Download SKILL.mdSave it as
.claude/skills/rails-design-system/SKILL.md (or your agent's skills folder). This skill also uses 54 other files; get the full folder from GitHub.- name
- rails-design-system
- description
- Ruby on Rails design system guidelines for building consistent, maintainable UI with minimal abstraction. This skill should be used when creating or refactoring Rails views, partials, components, form builders, helpers, Stimulus controllers, Turbo Frames, Turbo Streams, or design tokens. Triggers on tasks involving ERB partials, Turbo navigation, Turbo Streams, ViewComponent, Phlex, Tailwind design tokens, custom form builders, view helpers, Stimulus behaviors, Import Maps, Lookbook previews, or design system consistency audits.
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
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Design Decisions | CRITICAL | decide- |
| 2 | Design Tokens | CRITICAL | token- |
| 3 | Turbo Integration | HIGH | turbo- |
| 4 | Partial Patterns | HIGH | partial- |
| 5 | Component Architecture | HIGH | comp- |
| 6 | Form System | MEDIUM-HIGH | form- |
| 7 | Helper Patterns | MEDIUM | helper- |
| 8 | Stimulus Behaviors | MEDIUM | stim- |
| 9 | Consistency & Organization | LOW-MEDIUM | org- |
Quick Reference
1. Design Decisions (CRITICAL)
decide-three-uses-rule- Extract only after a pattern appears in 3+ placesdecide-partial-vs-component- Choose partials for simple reuse, components for complex logicdecide-helper-vs-partial- Use helpers for tiny HTML fragments, partials for layout blocksdecide-prove-then-extract- Prove patterns in production before abstractingdecide-avoid-wrapper-components- Avoid thin wrappers that add indirection without valuedecide-design-system-scope- Scope the design system to what the app actually needs
2. Design Tokens (CRITICAL)
token-tailwind-theme- Define tokens with Tailwind CSS @theme directivetoken-semantic-color-names- Name colors by purpose, not appearancetoken-spacing-scale- Use a constrained spacing scale for consistent layouttoken-typography-scale- Define a typography scale for headings, body, and UI texttoken-component-tokens- Create component-level tokens for repeated patternstoken-share-tokens-with-ruby- Share token values between CSS and Ruby when needed
3. Turbo Integration (HIGH)
turbo-drive-defaults- Let Turbo Drive handle navigation by defaultturbo-frame-decompose- Decompose pages into Turbo Frames for targeted updatesturbo-frame-naming- Name Turbo Frames with dom_id conventionsturbo-frame-vs-stream- Choose Turbo Frames vs Turbo Streams by scope of changeturbo-stream-crud- Use Turbo Streams for multi-element page updatesturbo-stimulus-coordination- Coordinate Turbo and Stimulus without conflicts
4. Partial Patterns (HIGH)
partial-explicit-locals- Always pass locals explicitly to partialspartial-presenter-objects- Use presenter objects to encapsulate view logicpartial-naming-conventions- Name partials by what they render, prefixed with underscorepartial-yield-blocks- Use yield blocks for flexible partial layoutspartial-collection-with-spacer- Use collection rendering with spacer templatespartial-shared-directory- Place cross-controller partials in app/views/shared
Show full SKILL.md (278 more words)Show less
5. Component Architecture (HIGH)
comp-when-to-use- Use components when partials outgrow simple renderingcomp-explicit-args- Define explicit typed arguments for every componentcomp-slots-for-markup- Use slots for caller-provided markup blockscomp-test-rendered-output- Test components by asserting on rendered HTML
6. Form System (MEDIUM-HIGH)
form-custom-builder- Create a custom FormBuilder for consistent form renderingform-set-default-builder- Set the custom builder as the application defaultform-error-display- Display field errors inline with consistent markupform-accessible-labels- Generate accessible labels and ARIA attributes automaticallyform-group-wrapper- Wrap label + input + error in a consistent group elementform-button-consistency- Standardize submit buttons through the form builder
7. Helper Patterns (MEDIUM)
helper-tag-helpers- Use tag helpers for small generated HTML fragmentshelper-conditional-classes- Use class_names for conditional CSS classeshelper-icon-helper- Create an icon helper for consistent icon renderinghelper-badge-pattern- Build a badge helper for status indicatorshelper-scope-to-domain- Scope helpers to specific domains, not generic utilities
8. Stimulus Behaviors (MEDIUM)
stim-general-purpose- Write general-purpose controllers, not one-off scriptsstim-data-attribute-config- Configure behavior through data attributes, not JavaScriptstim-small-controllers- Keep controllers small and single-responsibilitystim-composable-controllers- Compose multiple controllers on one elementstim-use-outlets- Use outlets for cross-controller communicationstim-leverage-library- Use stimulus-components before writing custom controllers
9. Consistency & Organization (LOW-MEDIUM)
org-naming-conventions- Follow consistent naming across partials, components, and helpersorg-file-structure- Organize design system files in predictable locationsorg-deduplication-audit- Periodically audit views for duplicated patternsorg-import-maps- Use Import Maps for zero-build JavaScript deliveryorg-preview-with-lookbook- Preview components with Lookbook in developmentorg-document-design-decisions- Document design system decisions in ADRs
How to Use
Read individual reference files for detailed explanations and code examples:
- Section definitions - Category structure and impact levels
- Rule template - Template for adding new rules
Reference Files
| File | Description |
|---|---|
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |
© pproenca, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 54 other files (references, assets) in skills/.experimental/rails-design-system of pproenca/dot-skills.
- SKILL.md
- assets/templates/_template.md
- metadata.json
- references/_sections.md
- references/comp-explicit-args.md
- references/comp-slots-for-markup.md
- references/comp-test-rendered-output.md
- references/comp-when-to-use.md
- references/decide-avoid-wrapper-components.md
- references/decide-design-system-scope.md
- references/decide-helper-vs-partial.md
- references/decide-partial-vs-component.md
- references/decide-prove-then-extract.md
- references/decide-three-uses-rule.md
- references/form-accessible-labels.md
- references/form-button-consistency.md
- references/form-custom-builder.md
- references/form-error-display.md
- … and 37 more
Open the folder on GitHubat commit cf93c57
Compare with similar skills
Rails Design System next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Rails Design System this skillpproenca/dot-skills | 214 | — | ~2.4k | Automated safety check: Pass | MIT | |
| MCP Developmentcoollabsio/coolify | 63k | 1 repos | ~949 | Automated safety check: Pass | MIT | |
| Refactoring UIwondelai/skills | 2.4k | — | ~3.9k | Automated safety check: Pass | MIT | |
| Tailwind Design SystemSuFxGIT/scoutarr | 114 | 5 repos | ~5.6k | Automated safety check: Pass | None | |
| Extract DesignManavarya09/design-extract | 4.2k | — | ~786 | Automated safety check: Notes | MIT | |
| Tailwind Design Systemjh941213/my-cc-harness | 126 | 9 repos | ~4.7k | Automated safety check: Pass | None |
Similar skills
Refactoring UI
wondelai/skills
Audit and fix visual hierarchy, spacing, color, and depth in web UIs.
Tailwind Design System
SuFxGIT/scoutarr
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns.
Extract Design
Manavarya09/design-extract
Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.
Tailwind Design System
jh941213/my-cc-harness
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns.
Unslop UI
JCarterJohnson/vibecoded-design-tells
Strips the cues that make a website read as AI-generated and forces a deliberate, project-specific design choice instead of the model's default.
More from pproenca/dot-skills
All 182 skills in this repoAudio Voice Recovery
pproenca/dot-skills
Audio forensics and voice recovery guidelines for CSI-level audio analysis.
Codemod React Pipeline
pproenca/dot-skills
Guided, scripted pipeline for running JSX/TSX/React codemods safely across large legacy codebases.
Dev Rfc
pproenca/dot-skills
Create well-structured RFCs and technical proposals for software projects.
Dx Harness
pproenca/dot-skills
Developer-experience friction auditing and fixing — slow onboarding, repeated manual setup steps, missing bootstrap/reset/seed scripts, undiscoverable conventions.
Language Spec Author
pproenca/dot-skills
Turn a rough idea for a language into a complete, implementable specification — a DSL, query, config/data, template, or protocol language — by interviewing the author dimension by dimension until…
Python Pep Author
pproenca/dot-skills
Drafting Python Enhancement Proposals (PEPs) — proposing a Python language feature, a standard library change, an interoperability standard, or an informational/process document for the Python…
Related
Works with
Categories
Questions about Rails Design System
What does Rails Design System do?
Ruby on Rails design system guidelines for building consistent, maintainable UI with minimal abstraction. Rails Design System is an agent skill from pproenca/dot-skills. Ruby on Rails design system guidelines for building consistent, maintainable UI with minimal abstraction.
When should I use Rails Design System?
Rails Design System fits situations like: tasks involving ERB partials; turbo navigation; tailwind design tokens; custom form builders.
How do I install Rails Design System in Claude Code?
Run `npx skills add pproenca/dot-skills --skill rails-design-system -a claude-code`. Or copy the skill folder (skills/.experimental/rails-design-system in pproenca/dot-skills) into .claude/skills/rails-design-system in your project. Claude Code loads it when a task matches its description.
How do I install Rails Design System in Codex?
Run `npx skills add pproenca/dot-skills --skill rails-design-system -a codex`. Or copy the skill folder (skills/.experimental/rails-design-system in pproenca/dot-skills) into .agents/skills/rails-design-system in your project. Codex loads it when a task matches its description.
Can I use Rails Design System in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add pproenca/dot-skills --skill rails-design-system -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/rails-design-system, .gemini/skills/rails-design-system, .github/skills/rails-design-system and .opencode/skills/rails-design-system in your project.
What does Rails Design System need to run?
SKILL.md names no scripts, command-line tools or credentials: Rails Design System is instructions for the agent only.
Does Rails Design System access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Rails Design System safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Rails Design System use?
Rails Design System is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Rails Design System use?
About 2.4k tokens (SKILL.md is roughly 9.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 41k tokens, read only when the agent opens those files.
What are the alternatives to Rails Design System?
Skills that share tags, products or a category with Rails Design System: MCP Development (coollabsio/coolify, 63k stars), Refactoring UI (wondelai/skills, 2.4k stars), Tailwind Design System (SuFxGIT/scoutarr, 114 stars) and Extract Design (Manavarya09/design-extract, 4.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Rails Design System?
pproenca (a GitHub user) maintains it in pproenca/dot-skills, which has 214 GitHub stars. The repository holds 182 skills in this directory. The repository was last updated on August 15, 2026.
Source: pproenca/dot-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.