skills.rest
smaller-world
smaller-worldOFFICIAL
Explore all skills by this author →
WebsiteGitHub

maquina-ui-standards

Provides reusable, accessible UI components for Rails applications.

4|1|Updated Mar 17, 2025
Search Tags:#accessibility#design-system#rails#ui-components#frontend-patterns#turbo-frames#maquina-components
One-click install
npx skills add https://github.com/smaller-world/smallerworld.club --skill maquina-ui-standards-smaller-world
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: maquina-ui-standards
Source: https://github.com/smaller-world/smallerworld.club/tree/main/.agents/skills/maquina-ui-standards
Command: npx skills add https://github.com/smaller-world/smallerworld.club --skill maquina-ui-standards-smaller-world

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Rails teams struggle to maintain consistent, accessible UI across features, dashboards, and forms.

Core Features & Use Cases

  • Reusable, accessible UI components (Card, Badge, Table, Empty, etc.) to enforce a cohesive design system.
  • Documentation-driven patterns and references to guide layout, forms, and navigation.
  • Turbo-friendly patterns for frame-based, morphing, and streaming updates with minimal custom JS.

Quick Start

Create a new UI page by composing maquina_components from the catalog using a Card container, then add a Header and Content sections.

Frequently Asked Questions about maquina-ui-standards

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

FAQPage Schema
How do I maintain consistent, accessible Rails UI components across different features and dashboards?▼

You can standardize Rails UI development using reusable, accessible components that enforce a cohesive design system. Composing pre-built elements like Cards, Badges, and Tables ensures consistent layout, form building, and navigation across your application.

Does this approach work with Turbo Frames and streaming updates in Rails?▼

Yes, the UI patterns are Turbo-friendly, supporting frame-based, morphing, and streaming updates. This allows you to build dynamic interfaces with minimal custom JavaScript by leveraging standard Rails Turbo capabilities.

What is the best way to start constructing a new Rails view with these UI standards?▼

Start constructing a new Rails view by composing components from the catalog within a Card container, then add Header and Content sections. This documentation-driven pattern provides structured guidance for layouts and forms.

Can I use these design system patterns for both public pages and internal dashboards?▼

Yes, these UI standards apply directly to feature development, view construction, and layout design across both public pages and internal dashboards. The reusable components ensure accessibility and visual consistency throughout your entire Rails application.

Do I need any specific frontend dependencies or custom JavaScript to implement these Rails UI components?▼

No specific frontend dependencies are required to use these UI components. The patterns are designed to minimize custom JavaScript by relying on standard Rails features and Turbo for interactive updates.

Related Skills

Explore More Design & Creative Skills→
mikkermikker
102

rails-hotwire

Apply Rails Hotwire best practices across Turbo Drive, Frames, Streams, Morphing, and Stimulus.

Community
Advanced
newstlernewstler
20

hotwire-patterns

Apply Turbo and Stimulus patterns to Rails CRUD views for interactive interfaces.

Community
Intermediate
ThinkOodleThinkOodle
5

turbo

Guide Rails UI development with Turbo Drive, Frames, and Streams.

Official
Intermediate
SlevoDevSlevoDev

ui-ux-pro-max

Generate UI/UX design systems with palettes, typography, and accessibility checks.

Official
Advanced