user-experience-design_skill

Overview

This skill provides production-ready UX design patterns tailored for Rails applications. It covers mobile-first responsive layouts, motion and transition patterns, dark mode, loading states, form UX, and Core Web Vitals-focused performance optimizations. Use it to implement polished, accessible, and performant user-facing features across enterprise Rails projects.

How this skill works

The skill supplies concrete component patterns, Tailwind-first CSS snippets, and Stimulus + Turbo controllers you can drop into a Rails app. It inspects common UX concerns—breakpoints, touch targets, animations, reduced-motion preferences, dark-mode toggling, loading indicators, and form flows—and offers ready JS controllers and markup to control behavior. Patterns are aimed at minimizing layout shifts and improving perceived performance for Core Web Vitals.

When to use it

• Building responsive, mobile-first pages and navigation for Rails views
• Adding micro-interactions, page transitions, modals, or drawer animations
• Implementing dark mode with a persistent toggle and system fallback
• Designing loading states: skeletons, spinners, progress bars, and toasts
• Improving form UX: inline validation, multi-step flows, and autosave
• Optimizing perceived and real performance to meet Core Web Vitals

Best practices

• Design mobile-first: apply base styles for small screens and layer up with Tailwind breakpoints
• Respect accessibility: 44x44px touch targets, ARIA on interactive elements, and motion-reduced support
• Use class-based dark mode and persist preference in localStorage with a fallback to system preference
• Prefer subtle, fast transitions (200–300ms) and keep animations disabled for users who prefer reduced motion
• Use skeletons and progressive loading to reduce layout shift and improve perceived speed
• Measure and iterate on Core Web Vitals (LCP, FID/INP, CLS) when adding visual enhancements

Example use cases

• Replace desktop-only tables with responsive card layouts on mobile and a full table on large screens
• Add Turbo-based page transitions and Stimulus controllers for fade/slide animations between views
• Implement a site-wide dark-mode toggle that persists user choice and respects system settings
• Create accessible modal and drawer components with backdrop click handling and body-scroll lock
• Show skeleton loaders and an animated progress bar during long imports or report generation