agentsclimarketplace
Sign in

Responsive tailwind ui

Skill itsyasirkhandev/spec-driven-development/skills/UI Design/responsive-tailwind-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.From its SKILL.md

Install
npx -y skills add itsyasirkhandev/spec-driven-development --skill responsive-tailwind-ui

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

8.1 KB, ~1.8k tokens by cl100k_base, as published. Nobody here has run it

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

PriorityCategoryImpactPrefix
1Breakpoint StrategyCRITICALbp-
2Layout TransformationCRITICALlayout-
3Responsive SpacingHIGHrspac-
4Fluid TypographyHIGHfluid-
5Navigation PatternsMEDIUM-HIGHnav-
6Touch & InteractionMEDIUMtouch-
7Responsive MediaMEDIUMrmedia-
8Data AdaptationLOW-MEDIUMdata-

Quick Reference

1. Breakpoint Strategy (CRITICAL)

2. Layout Transformation (CRITICAL)

3. Responsive Spacing (HIGH)

4. Fluid Typography (HIGH)

5. Navigation Patterns (MEDIUM-HIGH)

6. Touch & Interaction (MEDIUM)

7. Responsive Media (MEDIUM)

8. Data Adaptation (LOW-MEDIUM)

How to Use

Read individual reference files for detailed explanations and code examples:

Reference Files

FileDescription
references/_sections.mdCategory definitions and ordering
assets/templates/_template.mdTemplate for new rules
metadata.jsonVersion and reference information

What ships with it: 52 files

177.4 KB alongside SKILL.md

assets/

references/

12 more files not listed here. See all 52 in the repository.

Gives 0 of the 12 instructions most css styling skills give in ~1.8k tokens

Counted across 512 of the 512 authors here whose files we hold, read 2026-09-06

  • Animate only transform and opacityin 32 of 512, across 30 files
  • Respect prefers-reduced-motionin 21 of 512
  • Support reduced motion preferencesin 16 of 512, across 6 files
  • Use Tailwind CSS for stylingin 14 of 512, across 13 files
  • Specify AnimatePresence mode explicitlyin 12 of 512, across 2 files
  • Set initial states explicitlyin 12 of 512, across 2 files
  • Use semantic HTML elementsin 11 of 512, across 10 files
  • Use oklch for color valuesin 11 of 512, across 10 files
  • Honor prefers-reduced-motion in animationsin 10 of 512
  • Provide a reduced-motion fallback for animationsin 10 of 512, across 9 files
  • Use property names in camelCasein 9 of 512, across 4 files
  • Ensure UI animations stay under 300msin 9 of 512, across 6 files

Said here and by no other author read

  • use mobile first breakpoint direction
  • set breakpoints where content breaks
  • stack elements on mobile row on desktop
  • use compact spacing on mobile generous on desktop
  • transform tables to cards on mobile

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.