maquina-ui-standards

Standardize Ruby on Rails UI development with reusable maquina_components patterns.

138|8|Updated Jan 15, 2025
One-click install
npx skills add https://github.com/maquina-app/maquina_components --skill maquina-ui-standards
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: maquina-ui-standards
Source: https://github.com/maquina-app/maquina_components/tree/main/skill
Command: npx skills add https://github.com/maquina-app/maquina_components --skill maquina-ui-standards

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill standardizes UI development for Ruby on Rails by providing a cohesive set of reusable components and patterns via maquina_components, helping teams deliver consistent, accessible interfaces faster.

Core Features & Use Cases

  • Reusable components: Card, Badge, Table, Empty State, and more, designed to compose into pages and widgets.
  • Layout & patterns: Sidebar, Header, Breadcrumbs, and responsive grids to speed up page assembly.
  • Form & interaction patterns: Inline errors, validated inputs, combobox, date pickers, toasts, and Turbo integration.
  • Accessibility & theming: Data attributes-driven styling, aria attributes, and dark mode via CSS variables.

Quick Start

Install and reference this UI standards skill in your Rails project to apply maquina_components patterns across features.

Frequently Asked Questions about maquina-ui-standards

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

FAQPage Schema
How do I standardize UI components and layouts in a Ruby on Rails application?

You can standardize Rails UI by applying reusable components like Cards, Badges, and Tables through maquina_components. This enforces consistent view construction, form patterns, and accessible interfaces across your application.

How do I build accessible forms with inline errors and Turbo integration in Rails?

You can build accessible Rails forms using standardized interaction patterns for inline errors and Turbo integration. The skill provides validated inputs, comboboxes, and toasts guided by ARIA attributes and data-driven styling.

What is the best way to implement responsive grids and breadcrumbs for Rails view construction?

The best way to implement responsive layouts is using predefined pattern components for sidebars, headers, and breadcrumbs. These accelerate page assembly while maintaining UI consistency and accessibility standards across your Rails project.

Does this Rails UI standardization approach support dark mode and Tailwind styling?

Yes, standardizing Rails UI with this approach supports dark mode and Tailwind styling. It leverages CSS variables for theming and data attributes to drive styling, ensuring flexible and accessible interface design.

Can I use Stimulus and Turbo with these reusable Rails UI components?

Yes, you can use Stimulus and Turbo with these reusable Rails UI components. The skill provides explicit guidance on Turbo and Stimulus integration for interactive elements like date pickers and toasts.

How do I manage SKILL.md metadata contracts and optional resources for Rails UI tooling?

To manage Rails UI tooling resources, the skill enforces a metadata contract in SKILL.md requiring a name and description. It also recognizes optional scripts, references, and assets directories to support on-demand tooling.