responsive-design-system

Create layouts that adapt seamlessly across devices using mobile-first principles and Tailwind CSS. This skill covers breakpoint configuration, fluid typography with CSS clamp, container queries for component-level responsiveness, and production-ready layout patterns.

Responsive Design System helps you build mobile-first layouts with Tailwind CSS breakpoints and adaptive components.

AI-generated summary based on this skill's SKILL.md

★ 52 ⁮ 8 MIT updated 2026-01-12 by patricio0312rev

Install

patricio0312rev/skills/responsive-design-system

Manual (git clone) CLI (skillfed)

git clone https://github.com/patricio0312rev/skills
cp -r skills/frontend/responsive-design-system ~/.claude/skills/responsive-design-system

npx skillfed install patricio0312rev/skills/responsive-design-system

Frequently asked questions

AI-generated answers based on this skill's SKILL.md and metadata

How do I make responsive design with Tailwind CSS?

responsive-design-system teaches you to build adaptive layouts using Tailwind's mobile-first breakpoint system. Start by styling for mobile screens first, then layer in larger breakpoints (sm, md, lg, xl, 2xl) to progressively enhance your design. Use Tailwind's responsive prefixes (e.g., md:flex, lg:grid) to apply styles conditionally. This approach ensures your layouts work on all devices while keeping CSS lean and maintainable.

What are mobile-first breakpoints in Tailwind?

responsive-design-system emphasizes that mobile-first breakpoints mean designing for the smallest screen first, then expanding upward. Tailwind's default breakpoints are sm (640px), md (768px), lg (1024px), xl (1280px), and 2xl (1536px). Write base styles without prefixes for mobile, then add prefixed utilities for larger screens. This strategy reduces CSS bloat and ensures mobile users get optimized experiences without unnecessary code.

How do container queries enable responsive components?

responsive-design-system covers container queries as a modern alternative to media queries for size-based styling. Instead of querying the viewport, container queries let components adapt based on their parent container's width. Use @container to define query contexts and apply styles like @container (min-width: 400px) { ... }. This enables truly reusable components that respond to their layout context rather than fixed screen sizes.

What is fluid typography with CSS clamp?

responsive-design-system teaches fluid typography using CSS clamp() to scale font sizes smoothly between viewports without discrete breakpoints. The syntax is clamp(min, preferred, max)—for example, clamp(1rem, 2vw, 2rem) scales from 1rem to 2rem as the viewport grows. This eliminates jarring size jumps and creates elegant, continuously responsive text that adapts naturally across all devices.

How should I design touch-friendly interfaces?

responsive-design-system emphasizes proper target sizes and interactions for touch devices. Maintain minimum touch targets of 44×44px (or 48×48px for optimal spacing) to prevent mis-taps. Use Tailwind's spacing utilities (p-3, p-4) to ensure adequate padding around interactive elements. Add clear hover and active states, increase tap feedback, and avoid hover-only interactions on mobile. Test on real devices to verify usability.

How do I test responsive designs across devices?

responsive-design-system recommends testing across multiple devices and orientations to verify your layouts work everywhere. Use browser DevTools to simulate different screen sizes, but also test on real phones and tablets. Check both portrait and landscape orientations, verify touch interactions, and test on various browsers. Automated tools and manual testing together ensure your responsive design handles real-world usage patterns reliably.

SKILL.md

rendered from the published skill — quoted content, verbatim