How does the fluid typography work?

It utilizes the CSS clamp() function to automatically scale font sizes between a defined minimum and maximum based on the viewport width, eliminating the need for excessive media queries.

Can I use container queries with this skill?

Yes, the skill provides templates for container-type and @container queries to build modular components that respond to their parent container's size rather than the viewport.

Does it support React projects?

Yes, it includes specialized React patterns like useMediaQuery and useBreakpoint hooks, along with a Responsive component wrapper for conditional rendering.

What are the default breakpoints used in this skill?

The skill follows a standard mobile-first scale: sm (640px), md (768px), lg (1024px), xl (1280px), and 2xl (1536px).

Responsive Design Patterns

Name: Responsive Design Patterns
Author: iButters

byiButters

•

디자인 도구

Generates mobile-first, fluid layouts and responsive design systems using modern CSS and React patterns.

소개

This skill provides a comprehensive framework for building modern, responsive web interfaces directly within Claude Code. It offers standardized mobile-first breakpoints, fluid typography scales using CSS clamp, and flexible grid layouts that adapt seamlessly across devices. By integrating token-based design systems and React-specific hooks like useMediaQuery, the skill ensures that developers can implement production-ready, accessible, and performant UI components that prioritize mobile users while scaling elegantly to large desktops.

주요 기능

Custom React hooks for programmatic media query tracking and conditional rendering.
Standardized mobile-first breakpoint system ranging from mobile to ultra-wide screens.
Adaptive CSS layout patterns including fluid grids, responsive stacks, and container queries.
Design token integration for consistent spacing and container max-widths.
Fluid typography implementation using CSS clamp for smooth, automated text scaling.
1 GitHub stars

사용 사례

Building complex React components that need to change structure dynamically based on screen size.
Converting a fixed-width desktop site into a mobile-first responsive application.
Implementing a fluid design system with consistent spacing and typography tokens.

소개

주요 기능

Custom React hooks for programmatic media query tracking and conditional rendering.
Standardized mobile-first breakpoint system ranging from mobile to ultra-wide screens.
Adaptive CSS layout patterns including fluid grids, responsive stacks, and container queries.
Design token integration for consistent spacing and container max-widths.
Fluid typography implementation using CSS clamp for smooth, automated text scaling.
1 GitHub stars

사용 사례

Building complex React components that need to change structure dynamically based on screen size.
Converting a fixed-width desktop site into a mobile-first responsive application.
Implementing a fluid design system with consistent spacing and typography tokens.