Individual skill

tailwind-responsive-ui

Responsive UI transformation patterns for Tailwind CSS applications. This skill should be used when making interfaces responsive, refactoring layouts for multiple screen sizes, or reviewing responsive Tailwind code. Triggers on tasks involving breakpoint strategy, layout adaptation, responsive spacing, fluid typography, mobile navigation, touch interaction, responsive media, or data table responsiveness.

skills/.experimental/tailwind-responsive-ui/SKILL.md

Read pinned source

Source commit cf93c57cac89d6fc3e4194686000411567f5caf3

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: No
Repository scan complete: No
Skill scan complete: Yes
Observed behavior: Not checked yet
Last checked: Nov 5, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 222
Repository last updated: Aug 15, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

design Derived category
data Derived category
design-interface Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 8,314 bytes
assets/templates/_template.mddoc · 699 bytes
metadata.jsonasset · 1,005 bytes
references/_sections.mddoc · 2,345 bytes
references/bp-avoid-device-widths.mddoc · 2,225 bytes
references/bp-consolidate-breakpoints.mddoc · 2,206 bytes
references/bp-content-driven-breakpoints.mddoc · 2,032 bytes
references/bp-debug-breakpoints.mddoc · 2,436 bytes
references/bp-min-width-over-max.mddoc · 2,512 bytes
references/bp-mobile-first-default.mddoc · 2,131 bytes
references/data-horizontal-scroll-table.mddoc · 4,977 bytes
references/data-list-density-mobile.mddoc · 4,991 bytes
references/data-responsive-data-grid.mddoc · 5,911 bytes
references/data-responsive-form-layout.mddoc · 6,236 bytes
references/data-table-to-cards.mddoc · 5,118 bytes
references/data-truncate-overflow.mddoc · 4,434 bytes
references/fluid-clamp-font-size.mddoc · 2,049 bytes
references/fluid-responsive-letter-spacing.mddoc · 2,414 bytes
references/fluid-responsive-line-height.mddoc · 2,501 bytes
references/fluid-responsive-measure.mddoc · 2,876 bytes
references/fluid-scale-headings-independently.mddoc · 2,571 bytes
references/fluid-type-scale.mddoc · 3,087 bytes
references/layout-aspect-ratio-containers.mddoc · 3,421 bytes
references/layout-fixed-to-relative.mddoc · 3,921 bytes
references/layout-grid-column-reduction.mddoc · 3,352 bytes
references/layout-holy-grail-responsive.mddoc · 3,623 bytes
references/layout-sidebar-collapse.mddoc · 2,874 bytes
references/layout-stack-to-row.mddoc · 3,007 bytes
references/layout-sticky-to-static.mddoc · 2,962 bytes
references/nav-breadcrumb-collapse.mddoc · 3,311 bytes
references/nav-dropdown-to-fullscreen.mddoc · 4,121 bytes
references/nav-horizontal-to-hamburger.mddoc · 4,446 bytes
references/nav-sidebar-drawer.mddoc · 4,908 bytes
references/nav-sticky-header-compact.mddoc · 6,576 bytes
references/nav-tab-bar-mobile.mddoc · 7,048 bytes
references/rmedia-avatar-responsive.mddoc · 3,767 bytes
references/rmedia-background-image-bp.mddoc · 2,838 bytes
references/rmedia-embed-responsive.mddoc · 2,705 bytes
references/rmedia-icon-size-scaling.mddoc · 4,611 bytes
references/rmedia-responsive-images.mddoc · 2,291 bytes
references/rmedia-video-aspect-ratio.mddoc · 2,476 bytes
references/rspac-compact-mobile-generous-desktop.mddoc · 6,289 bytes
references/rspac-container-padding.mddoc · 4,884 bytes
references/rspac-inline-to-stack-spacing.mddoc · 3,837 bytes
references/rspac-responsive-gap.mddoc · 3,898 bytes
references/rspac-scale-padding-per-bp.mddoc · 2,649 bytes
references/rspac-section-spacing.mddoc · 5,348 bytes
references/touch-focus-visible-touch.mddoc · 2,461 bytes
references/touch-hover-to-tap.mddoc · 2,625 bytes
references/touch-input-sizing-mobile.mddoc · 2,944 bytes
references/touch-min-touch-target.mddoc · 2,550 bytes
references/touch-scroll-snap-mobile.mddoc · 3,644 bytes
references/touch-swipe-affordance.mddoc · 3,487 bytes

Read excerpt


# 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