skills.rest
RoleModel
RoleModelOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-patterns

Create Rails frontends using Slim templates, Stimulus controllers, and Optics utilities.

6|1|Updated Feb 4, 2026
Search Tags:#templates#forms#rails#frontend-patterns#slim#stimulus#optics
One-click install
npx skills add https://github.com/RoleModel/rolemodel-skills --skill frontend-patterns-rolemodel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/RoleModel/rolemodel-skills/tree/main/skills/frontend-patterns
Command: npx skills add https://github.com/RoleModel/rolemodel-skills --skill frontend-patterns-rolemodel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires .

What problem does it solve?

This Skill offers a structured approach to building Rails frontends by providing Slim templates, Stimulus-driven interactivity, and Optics-based styling patterns, ensuring consistency across views.

Core Features & Use Cases

  • Slim Templates Best Practices: conventions for clean, readable templates with minimal logic.
  • Stimulus Controller Patterns: modular, focused controllers that handle UI behavior.
  • CSS with Optics Utilities: scalable styling with utility classes and consistent naming.
  • Guided Componentization: guidance on extracting partials and components for reuse in views.
  • Form and UI Consistency: recommended use of Simple Form and consistent form layouts.

Quick Start

Create a Slim-based Rails view for a resource, attach a Stimulus controller to manage interactivity, and apply Optics utilities for styling, then extract repeated markup into partials as needed.

Frequently Asked Questions about frontend-patterns

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

FAQPage Schema
What are the best practices for structuring Rails frontend views with Slim templates?▼

Rails frontend views with Slim templates should follow conventions for clean, readable templates with minimal logic, enforcing structure around helper versus partial usage and documentation-driven patterns for consistent view rendering.

How do I organize Stimulus controllers for consistent Rails UI interactivity?▼

Organize Stimulus controllers by creating modular, focused controllers that handle specific UI behavior, ensuring consistent front-end conventions for interactivity across common scenarios like form handling and component composition.

How do I extract partials and components in Rails to avoid repeating view markup?▼

Extract partials and components in Rails by applying guided componentization patterns that identify repeated markup in views, pulling them into reusable partials to maintain consistent structure and reduce duplication.

Can I use Simple Form with Optics CSS utilities for consistent Rails form layouts?▼

Simple Form works with Optics CSS utilities to establish consistent Rails form layouts, combining recommended form helper usage with scalable utility classes and consistent naming for reliable styling.

Does this Rails frontend approach require a specific CSS framework or can I use standard stylesheets?▼

This Rails frontend approach uses CSS with Optics utilities for scalable styling, applying utility classes and consistent naming conventions rather than relying on standard stylesheets for component composition.

Related Skills

Explore More Software Engineering Skills→
rubakasrubakas
4

rails-views

Organize Rails views with structured templates, partials, layouts, and forms.

Official
Advanced
majesticlabs-devmajesticlabs-dev
47

viewcomponent-coder

Create and test reusable ViewComponent-based UI components in Rails.

Official
Advanced
arthun01arthun01

rails-components

Create reusable Rails UI components with ERB templates and class-based helpers.

Community
Intermediate
mlbrightmlbright

tailwind-agent

Style Rails ERB views and ViewComponents with Tailwind CSS 4 utility classes.

Community
Intermediate