Agent Skills: Community Responsive UI Tailwind CSS Best Practices

Community Responsive UI Tailwind CSS Best Practices

Comprehensive responsive transformation guide for Tailwind CSS applications, based on Refactoring UI by Adam Wathan & Steve Schoger and modern responsive design patterns. Contains 49 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

When to Apply

Reference these guidelines when:

• Making an existing UI responsive across screen sizes
• Building new responsive layouts with Tailwind CSS
• Refactoring desktop-only interfaces for mobile support
• Reviewing responsive code for breakpoint, spacing, and typography issues
• Adapting navigation, forms, and data tables for touch devices

Rule Categories by Priority

| Priority | Category | Impact | Prefix | |----------|----------|--------|--------| | 1 | Breakpoint Strategy | CRITICAL | bp- | | 2 | Layout Transformation | CRITICAL | layout- | | 3 | Responsive Spacing | HIGH | rspac- | | 4 | Fluid Typography | HIGH | fluid- | | 5 | Navigation Patterns | MEDIUM-HIGH | nav- | | 6 | Touch & Interaction | MEDIUM | touch- | | 7 | Responsive Media | MEDIUM | rmedia- | | 8 | Data Adaptation | LOW-MEDIUM | data- |

Quick Reference

1. Breakpoint Strategy (CRITICAL)

• bp-mobile-first-default - Use Mobile-First Breakpoint Direction
• bp-content-driven-breakpoints - Set Breakpoints Where Content Breaks
• bp-avoid-device-widths - Avoid Device-Specific Breakpoint Values
• bp-consolidate-breakpoints - Consolidate Breakpoints to Three or Four
• bp-min-width-over-max - Use min-width Over max-width for Breakpoints
• bp-debug-breakpoints - Use Visual Breakpoint Indicators During Development

2. Layout Transformation (CRITICAL)

• layout-stack-to-row - Stack Elements on Mobile, Row on Desktop
• layout-sidebar-collapse - Collapse Sidebar to Top or Bottom on Mobile
• layout-grid-column-reduction - Reduce Grid Columns at Narrower Breakpoints
• layout-holy-grail-responsive - Use Responsive Holy Grail Layout with Grid
• layout-sticky-to-static - Convert Sticky Elements to Static on Mobile
• layout-fixed-to-relative - Replace Fixed Positioning with Relative on Mobile
• layout-aspect-ratio-containers - Use Aspect Ratio for Responsive Containers

3. Responsive Spacing (HIGH)

• rspac-scale-padding-per-bp - Scale Padding Independently Per Breakpoint
• rspac-responsive-gap - Use Responsive Gap for Grid and Flex Spacing
• rspac-compact-mobile-generous-desktop - Use Compact Spacing on Mobile, Generous on Desktop
• rspac-section-spacing - Scale Section Dividers with Viewport
• rspac-inline-to-stack-spacing - Convert Inline Spacing to Stack Spacing on Mobile
• rspac-container-padding - Use Responsive Container Padding

4. Fluid Typography (HIGH)

• fluid-clamp-font-size - Use clamp() for Fluid Font Sizing
• fluid-responsive-line-height - Tighten Line Height as Font Size Increases
• fluid-responsive-measure - Constrain Line Length to 45-75 Characters
• fluid-scale-headings-independently - Scale Heading Sizes Independently Across Breakpoints
• fluid-responsive-letter-spacing - Adjust Letter Spacing for Responsive Headlines
• fluid-type-scale - Use a Responsive Type Scale

5. Navigation Patterns (MEDIUM-HIGH)

• nav-horizontal-to-hamburger - Collapse Horizontal Nav to Hamburger on Mobile
• nav-tab-bar-mobile - Use Bottom Tab Bar for Primary Mobile Navigation
• nav-breadcrumb-collapse - Truncate Breadcrumbs on Mobile
• nav-sidebar-drawer - Convert Sidebar Nav to Off-Canvas Drawer on Mobile
• nav-dropdown-to-fullscreen - Expand Dropdown Menus to Full-Width on Mobile
• nav-sticky-header-compact - Compact the Header on Scroll for Mobile

6. Touch & Interaction (MEDIUM)

• touch-min-touch-target - Ensure Minimum 44px Touch Targets on Mobile
• touch-hover-to-tap - Replace Hover Interactions with Tap-Friendly Alternatives
• touch-swipe-affordance - Add Visual Swipe Affordances for Horizontal Scrolling
• touch-scroll-snap-mobile - Use Scroll Snap for Carousel-Like Mobile Interfaces
• touch-input-sizing-mobile - Size Form Inputs to Prevent iOS Zoom
• touch-focus-visible-touch - Use focus-visible for Touch-Friendly Focus Styles

7. Responsive Media (MEDIUM)

• rmedia-responsive-images - Use Responsive Image Sizing with Object-Fit
• rmedia-video-aspect-ratio - Maintain Video Aspect Ratio Across Breakpoints
• rmedia-icon-size-scaling - Scale Icons Per Breakpoint, Not with Font Size
• rmedia-avatar-responsive - Scale Avatar Sizes Per Context and Breakpoint
• rmedia-background-image-bp - Swap Background Images at Breakpoints
• rmedia-embed-responsive - Make Embedded Content Responsive with Container Constraints

8. Data Adaptation (LOW-MEDIUM)

• data-table-to-cards - Transform Tables to Cards on Mobile
• data-horizontal-scroll-table - Use Horizontal Scroll for Dense Data Tables
• data-responsive-data-grid - Adapt Data Grid Density for Screen Size
• data-list-density-mobile - Increase List Item Density on Mobile
• data-truncate-overflow - Truncate Overflowing Text on Mobile
• data-responsive-form-layout - Stack Form Fields on Mobile, Use Grid on Desktop

How to Use

Read individual reference files for detailed explanations and code examples:

• Section definitions - Category structure and impact levels
• Rule template - Template for adding new rules

Reference Files

| File | Description | |------|-------------| | references/_sections.md | Category definitions and ordering | | assets/templates/_template.md | Template for new rules | | metadata.json | Version and reference information |