Provides Ruby on Rails design system guidelines for consistent UI using Turbo, Stimulus, ERB partials, ViewComponent, Phlex, Tailwind tokens. For creating or refactoring views, partials, components, forms, helpers.
npx claudepluginhub joshuarweaver/cascade-code-general-misc-1 --plugin pproenca-dot-skills-1This skill uses the workspace's default tool permissions.
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, queri...
Applies Acme Corporation brand guidelines including colors, fonts, layouts, and messaging to generated PowerPoint, Excel, and PDF documents.
Builds DCF models with sensitivity analysis, Monte Carlo simulations, and scenario planning for investment valuation and risk assessment.
Calculates profitability (ROE, margins), liquidity (current ratio), leverage, efficiency, and valuation (P/E, EV/EBITDA) ratios from financial statements in CSV, JSON, text, or Excel for investment analysis.
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.
Reference these guidelines when:
@theme| 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- |
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 needstoken-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 neededturbo-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 conflictspartial-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/sharedcomp-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 HTMLform-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 builderhelper-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 utilitiesstim-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 controllersorg-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 ADRsRead individual reference files for detailed explanations and code examples:
| File | Description |
|---|---|
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |