skill_skill

Overview

This skill helps you build consistent, accessible Rails UIs using maquina_components — ERB partials styled with Tailwind CSS and Stimulus. It codifies composition patterns, form conventions, and design tokens so teams ship predictable views and interactions. Use it to implement pages, forms, lists, and interactive components with accessibility and theme variables in mind.

How this skill works

The skill inspects feature specs, view creation, form implementations, and mentions of maquina_components usage to recommend components and patterns. It maps UI needs to the component catalog (cards, badges, tables, empty states, dropdowns, etc.), enforces data-attribute styling, and guides input attributes and error handling. It also provides layout and verification workflows to validate implementation against a spec checklist.

When to use it

• Implementing UI for a feature or spec
• Creating new views, pages, or layouts
• Building forms with validation and accessible inputs
• Reviewing UI implementation for consistency and accessibility
• Adding or refactoring component composition and theming

Best practices

• Compose small partials instead of configuring monolithic props—favor composition over configuration
• Use data attributes (data-component, data-*-part) for styling; avoid inline Tailwind in components
• Prefer inline field errors with a brief flash summary instead of a single alert listing all errors
• Add robust HTML5 attributes (type, required, maxlength, inputmode, autocomplete, pattern) on inputs
• Use icon_for helper and a single icon system; include ARIA attributes and focus states
• Handle empty states, loading, and disabled states explicitly; follow the spec checklist before marking complete

Example use cases

• Dashboard: grid of stat cards, main table with badges and row actions, pagination integration
• Form screen: form_with + data-component=form, labeled inputs with required/maxlength, inline errors and submit button variant
• Index page: render components/table with header/body partials and shared row_actions for per-row menus
• Empty state: components/empty with media, title, description, and primary action button
• Booking UI (Haab): status badges mapped to variants, themed color variables, money and time display patterns