rails-design

Make a full-stack Rails 8.1 Hotwire UI accessible to WCAG 2.2 AA — semantic HTML, ARIA patterns, keyboard operability, visible focus, color contrast, screen-reader support, and the focus-management gotchas specific to Turbo Drive/Frames/Streams swaps — then prove it with axe automation in system tests. Menu-driven for the conformance target and the testing approach (default WCAG 2.2 AA, axe-core in Capybara system tests). This is the canonical accessibility rubric the other design-* skills cross-link to instead of repeating; apply when auditing or fixing a11y, adding ARIA, wiring keyboard/focus behavior, or setting up automated a11y tests. Web apps only.

Build a reusable UI component library for a full-stack Rails 8.1 app — choose the component architecture (ViewComponent, Phlex, or ERB partials), adopt a UI kit (daisyUI, Flowbite, Tailwind UI, or hand-rolled Tailwind), and preview/document components in isolation with Lookbook. Menu-driven with a Recommended default per menu; detects the view layer the app already chose (honors installed view_component/phlex-rails) and the installed UI kit first, builds components from the tokens design-foundations established, and verifies they render in isolation and in a page. Apply when creating buttons/cards/badges/component primitives, organizing a design system, integrating a UI kit, or setting up component previews. Web apps only.

Design the forms of a full-stack Rails 8.1 Hotwire app for usability and accessibility — the form builder (form_with helpers, simple_form, or a form object), the layout (stacked, floating, or inline labels), and the validation/error UX (server-rendered errors via Turbo Streams with a 422, inline hints, or full reload), plus multi-step flows and accessible input patterns. Menu-driven with a Recommended default per menu; detects the installed form gem and validation approach first, builds from design-foundations tokens and design-components inputs, and verifies forms submit, show errors correctly, and pass an accessibility check. Owns form layout and error UX; defers params to rails-controllers, validations to rails-models, and Turbo response codes to rails-hotwire. Web apps only.

Establish the design-system foundations of a full-stack Rails 8.1 app — the color/spacing/typography tokens, the theming strategy, dark mode, and the modular type & spacing scale — on top of the app's chosen CSS stack (Tailwind v4 CSS-first `@theme`, Tailwind v3 `tailwind.config.js`, daisyUI semantic themes, or plain CSS custom properties). Menu-driven with a Recommended default per menu; detects the Tailwind major and any installed UI kit first (v4 configures tokens in CSS via `@theme`, v3 in JS), and verifies the stylesheet builds and the tokens render. Start here before building components — every other design-* skill consumes these tokens. Web apps only; API-only apps have no design layer.

Design the interactive UX micro-patterns of a full-stack Rails 8.1 Hotwire app — modals/dialogs, drawers, dropdowns, tabs, toast/flash notifications, inline editing, loading/skeleton states, empty states, and infinite scroll — built with Turbo Frames/Streams and Stimulus. Menu-driven with a Recommended default per menu (native <dialog> + Turbo Frame + Stimulus for overlays, Stimulus auto-dismiss + Turbo Stream for toasts, Turbo loading states + skeletons for feedback). Owns the visual/UX shape of these patterns and the accessibility contract each must meet (the canonical a11y rules live in design-accessibility); the Turbo/Stimulus plumbing is rails-hotwire. Detects the installed UI kit and Hotwire wiring first, then verifies the interaction works and is keyboard/screen-reader accessible. Apply when building any of these patterns. Web apps only.

Build the page structure and navigation of a full-stack Rails 8.1 Hotwire app — the application shell (layout + content regions, header/main/footer landmarks), primary navigation (top navbar, sidebar, or hybrid), breadcrumbs and active-state highlighting, responsive/mobile navigation, and pagination UX (Pagy). Menu-driven with a Recommended default per menu; detects the existing layout, nav, and pagination gem first, builds from design-foundations tokens and design-components primitives, and verifies the shell renders responsively with correct landmarks. Apply when creating the app layout, a navbar/sidebar, breadcrumbs, a responsive menu, or paginating a list. Web apps only.

Prove the UI of a full-stack Rails 8.1 Hotwire app actually works — system tests that exercise the rendered Turbo/Stimulus flows, visual-regression screenshots to catch unintended visual changes, automated accessibility checks (axe) wired into the suite, and Lookbook-based component review. Menu-driven with a Recommended default per menu (Selenium/headless Chrome driver, built-in screenshot diffing, axe-core a11y assertions). Owns the visual/UX assertions; the test stack itself — framework, driver, CI — is owned by rails-testing, and the a11y rules by design-accessibility. Detects the installed test framework and driver first, then verifies the UI renders, matches its baseline, and is accessible. Apply when testing UI flows, catching visual regressions, or gating a11y in CI. Web apps only.