skills.rest
iButters
iButtersCOMMUNITY
Explore all skills by this author →
GitHub

responsive-design

Creates mobile-first web layouts with fluid typography, breakpoints, and container queries.

3|1|Updated Nov 28, 2025
Search Tags:#mobile-first#breakpoints#responsive-design#container-queries#fluid-typography
One-click install
npx skills add https://github.com/iButters/ClaudeCodePlugins --skill responsive-design-ibutters
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-design
Source: https://github.com/iButters/ClaudeCodePlugins/tree/main/plugins/ui-kit-generator/skills/responsive-design
Command: npx skills add https://github.com/iButters/ClaudeCodePlugins --skill responsive-design-ibutters

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Responsive web design patterns for mobile-first development, including breakpoints, fluid typography, and container queries.

Core Features & Use Cases

  • Mobile-first breakpoints: Structured breakpoint system.
  • CSS Token Integration: Tokens for spacing, typography, and layout.
  • Fluid typography & spacing: clamp-based scales.
  • Container queries: Adapt styles based on container size.
  • React Pattern: useBreakpoint/useMediaQuery examples.

Quick Start

Build a responsive layout using grid and media queries, and add fluid typography via clamp() tokens.

Frequently Asked Questions about responsive-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build layouts that work on mobile, tablet, and desktop?▼

Mobile-first responsive design uses CSS breakpoints and fluid grids to adapt layouts across screen sizes. Define your layout for mobile first, then add media queries to expand and reorganize content at tablet and desktop breakpoints, ensuring consistent presentation on all devices.

What's the best way to handle typography that scales across different screen sizes?▼

Fluid typography uses CSS clamp() to scale font sizes smoothly between minimum and maximum values based on viewport width. This eliminates the need for multiple font-size rules per breakpoint while maintaining readability across all devices.

When should I use container queries instead of media queries?▼

Container queries adapt component styles based on their container's size rather than viewport size. Use them when reusable components must respond to their parent's context independently, enabling truly modular responsive components across different layout contexts.

Can I use responsive design patterns with React?▼

Yes. React supports responsive design through useBreakpoint and useMediaQuery hooks that detect breakpoints and media query changes, allowing components to conditionally render or adjust styles based on screen size without adding CSS complexity.

How do I maintain consistent spacing and typography across breakpoints?▼

CSS tokens define reusable values for spacing, typography, and layout that scale consistently across all breakpoints. Using token-based systems ensures your design maintains cohesion while avoiding hardcoded values scattered through media queries.

Related Skills

Explore More Design & Creative Skills→
p-o-ke-naep-o-ke-nae

responsive-design

Design responsive interfaces with CSS Grid, Flexbox, and media queries.

Community
Advanced
majesticlabs-devmajesticlabs-dev
47

tailwind-styling

Generate responsive Tailwind CSS styles for React components.

Official
Intermediate
ancolemanancoleman
503

designing-layouts

Design responsive layouts with CSS Grid, Flexbox, and breakpoints.

Community
Advanced
Shaarav4795Shaarav4795

tailwindcss-advanced-layouts

Provide Tailwind CSS grid, flexbox, and container query layout patterns.

Community
Advanced