Skip to main content
affpapa.org
RU EN
skill CX Codex

tailwind-responsive-ui — Claude Code skill: responsive Tailwind UI

A skill for Claude and other AI editors that helps turn Tailwind CSS interfaces into layouts that work on mobile and desktop.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add pproenca/dot-skills --skill tailwind-responsive-ui -a claude-code
Open on GitHub

What tailwind-responsive-ui does

The skill packs 49 rules across 8 priority-ranked categories. Inside: breakpoint strategy, layout transformation, responsive spacing, fluid typography, mobile navigation, touch interaction, responsive media and data table adaptation. Each rule lives in its own file under references/, prefixed by category: bp-, layout-, rspac-, fluid-, nav-, touch-, rmedia-, data-.

The rules come from Refactoring UI by Adam Wathan and Steve Schoger. Your agent reaches for them when you ask to make an interface responsive, refactor a layout for several screen sizes, or review existing Tailwind code for breakpoint and typography problems.

This is built for Tailwind CSS specifically. On plain CSS or another utility library the breakpoint and spacing rules have no ready-made classes to map to, so you would translate them by hand.

What it helps with

  • make a desktop-only interface usable on phones
  • refactor a layout for several screen sizes
  • spot breakpoint problems in existing Tailwind code
  • build mobile navigation instead of a horizontal menu
  • size touch targets and form inputs for fingers

Example prompts for the agent

  • make this page responsive for mobile using tailwind-responsive-ui
  • review the layout for breakpoint and spacing issues
  • turn the sidebar into an off-canvas drawer on mobile

How to install tailwind-responsive-ui

1Skills CLI (Vercel)

npx skills add pproenca/dot-skills --skill tailwind-responsive-ui -a claude-code

2Manually: put the files in place

~/.claude/skills/tailwind-responsive-ui/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/tailwind-responsive-ui/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about tailwind-responsive-ui

How do I install tailwind-responsive-ui in Claude?

Run npx skills add pproenca/dot-skills --skill tailwind-responsive-ui -a claude-code. The skill lands in ~/.claude/skills/tailwind-responsive-ui/SKILL.md.

What does tailwind-responsive-ui do?

It gives your agent a rule set for responsive Tailwind CSS work: breakpoints, layout, spacing, typography, navigation, touch interaction and data tables.

Which platforms does the skill support?

Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. Each platform has its own install command.

Source text

SKILL.md · MIT 
---
name: tailwind-responsive-ui
description: 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.
---

# 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`](references/bp-mobile-first-default.md) - Use Mobile-First Breakpoint Direction
- [`bp-content-driven-breakpoints`](references/bp-content-driven-breakpoints.md) - Set Breakpoints Where Content Breaks
- [`bp-avoid-device-widths`](references/bp-avoid-device-widths.md) - Avoid Device-Specific Breakpoint Values
- [`bp-consolidate-breakpoints`](references/bp-consolidate-breakpoints.md) - Consolidate Breakpoints to Three or Four
- [`bp-min-width-over-max`](references/bp-min-width-over-max.md) - Use min-width Over max-width for Breakpoints
- [`bp-debug-breakpoints`](references/bp-debug-breakpoints.md) - Use Visual Breakpoint Indicators During Development

### 2. Layout Transformation (CRITICAL)

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

### 3. Responsive Spacing (HIGH)

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

### 4. Fluid Typography (HIGH)

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

### 5. Navigation Patterns (MEDIUM-HIGH)

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

### 6. Touch & Interaction (MEDIUM)

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

### 7. Responsive Media (MEDIUM)

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

### 8. Data Adaptation (LOW-MEDIUM)

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

## How to Use

Read individual reference files for detailed explanations and code examples:

- [Section definitions](references/_sections.md) - Category structure and impact levels
- [Rule template](assets/templates/_template.md) - Template for adding new rules

## Reference Files

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

© pproenca · MIT · pproenca/dot-skills

Similar skills

Everything for Frontend and UI →
tailwind-css manutej A Tailwind CSS skill covering utility classes, responsive variants, dark mode and production optimization. Handy when you build UI and want to stay in your markup. CX Codex +1 461installs Frontend Responsive Design Standards am-will A skill that gives your coding agent rules for mobile-first layouts: breakpoints, relative units, touch targets and content priority. CX Codex +1 1,200installs tailwindcss-responsive-darkmode JosiahSiegel A Tailwind CSS skill covering responsive layout, dark mode, runtime theme switching and FOUC prevention. CX Codex +1 476installs responsive-design-system patricio0312rev A skill that walks your coding agent through mobile-first layouts: breakpoints, container queries, fluid typography and adaptive grids built on Tailwind CSS. CX Codex +1 343installs frontend-tailwind-best-practices sergiodxa Ten Tailwind CSS rules for frontend work: stack utilities, gap-based spacing, dark color schemes and className merging. Useful when an agent writes component styles. CX Codex +1 464installs tailwind-css-patterns giuseppe-trisciuoglio A skill that hands your agent ready Tailwind CSS patterns: responsive grids, cards, forms, dark mode. Useful when it styles React, Vue or Svelte components. CX Codex +1 17,700installs

From the same set45

chrome-extension A skill with 67 rules for Chrome Extensions on Manifest V3. Useful when you write a service worker, a content script, or migrate off MV2. CX Codex +1 717installs shell A skill with 49 rules for bash and POSIX sh: quoting, strict mode, error handling. Useful whenever the agent writes or reviews a script. CX Codex +1 692installs refactor A skill with 43 refactoring rules drawn from Martin Fowler's catalog and Clean Code. Useful when you want the agent to restructure code by a fixed set of rules instead of guessing. CX Codex +1 641installs react A skill with 49 React 19 rules and a codebase review algorithm. Useful when writing components, migrating from React 18, or auditing a repo. CX Codex +1 489installs tailwind-ui-refactor A skill that refactors HTML with Tailwind utility classes: hierarchy, spacing, typography, color. Useful when you build UI without a designer on hand. CX Codex +1 458installs zustand A skill with 43 rules for Zustand in React: store architecture, selectors, re-render fixes. Useful when you write or refactor a store. CX Codex +1 446installs debug The debug skill gives your agent a fixed order for bug work: reproduce, test hypotheses, find the root cause. Useful when a stack trace or a failing test lands on you. CX Codex +1 436installs ios-design A skill with 62 rules for building SwiftUI interfaces: semantic colors, typography, state, navigation and accessibility. CX Codex +1 418installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor