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
Decision gist · record as of 2026-01-12
Responsive Design System helps you build mobile-first layouts with Tailwind CSS breakpoints and adaptive components. 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.
Use it when
- responsive-design-system emphasizes that mobile-first breakpoints mean designing for the smallest screen first, then expanding upward.
- responsive-design-system covers container queries as a modern alternative to media queries for size-based styling.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Similar skills
Install
patricio0312rev/skills/responsive-design-system
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
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.
Responsive Design System
Build adaptive, mobile-first layouts with modern CSS features and Tailwind.
Core Workflow
- Define breakpoints: Establish responsive breakpoint system
- Set fluid typography: Clamp-based responsive fonts
- Create layout grid: Responsive grid system
- Add container queries: Component-level responsiveness
- Build responsive components: Adaptive patterns
- Test across devices: Verify on all viewports
Breakpoint System
Tailwind Default Breakpoints
| Breakpoint | Min Width | Target Devices |
|---|---|---|
sm |
640px | Large phones (landscape) |
md |
768px | Tablets |
lg |
1024px | Laptops |
xl |
1280px | Desktops |
2xl |
1536px | Large screens |
Custom Breakpoints
```javascript // tailwind.config.js module.exports = { theme: { screens: {
(truncated - see the full file via the links below)
File tree — 1 file
frontend/responsive-design-system/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build responsive layouts using mobile-first design with Tailwind breakpoints”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Apply Tailwind CSS to Capacitor mobile applications with guidance on responsive mobile design, notch and safe area handling, and touch-optimized components. Covers dark mode integration, 44px minimum touch targets, and mobile-specific patterns like bottom sheets and swipe actions.
Master Tailwind CSS v4's CSS-first configuration model, Rust-powered engine, and modern setup across Vite and PostCSS. This skill covers installation methods, @theme-based theming, custom utilities and variants, plugin loading, and the shift from JavaScript config to pure CSS. Includes v3-to-v4 migration guidance and reference for new v4 utilities.
Responsive Layout Builder guides you through constructing layouts that adapt seamlessly to any device. It covers Grid and Flexbox techniques, mobile-first strategies, and practical patterns like sidebars, card grids, and hero sections.
This skill covers Tailwind CSS, a utility-first framework that lets you compose designs from low-level utility classes instead of writing CSS. Learn responsive design patterns, dark mode implementation, configuration options, and how to integrate Tailwind into modern component frameworks.
Learn to build dark mode interfaces using Tailwind's class-based and media-query strategies, plus responsive design patterns across mobile, tablet, and desktop. Covers system preference detection, runtime toggling, FOUC prevention, and container queries for component-level responsiveness.
Learn advanced layout techniques with Tailwind CSS, covering CSS Grid fundamentals like grid-template-areas and auto-fit, Flexbox space distribution, container queries for responsive design, and practical patterns for sticky headers, masonry effects, and multi-section page structures.
More skills tailwind-css-patterns (MIT) · design-to-component-translator (MIT) · Responsive Design (unlicensed) · Figma Design Analyzer (unlicensed) · page-layout-builder (MIT) · tailwind-best-practices (MIT) · Social Media (unlicensed)