skills.rest
kiprotichgidii
kiprotichgidiiCOMMUNITY
Explore all skills by this author →
GitHub

responsive-design

Implement responsive layouts using container queries, fluid typography, and CSS Grid.

Updated May 8, 2026
Search Tags:#responsive design#css#tailwind#breakpoints#css grid#fluid typography#container queries
One-click install
npx skills add https://github.com/kiprotichgidii/agent-skills --skill responsive-design-kiprotichgidii
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-design
Source: https://github.com/kiprotichgidii/agent-skills/tree/main/skills/responsive-design
Command: npx skills add https://github.com/kiprotichgidii/agent-skills --skill responsive-design-kiprotichgidii

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building interfaces that adapt cleanly across phones, tablets, and desktops often leads to brittle breakpoint hacks, fixed pixel widths, and components that break when moved between layouts. This Skill provides proven CSS patterns for container queries, fluid typography, and grid systems so layouts adapt to both viewport and component context. ## Core Features & Use Cases - Container Queries: Build component-level responsive behavior with container-type, named containers, and container query units (cqi, cqw) so cards, widgets, and navs adapt to their own size. - Fluid Typography & Spacing: Generate clamp()-based type and spacing scales that scale smoothly between minimum and maximum bounds without media query jumps. - Responsive Layout Patterns: Apply CSS Grid auto-fit layouts, Flexbox switchers, responsive navigation, tables, and images with srcset and art direction. - Use Case: You are building a product card that appears in a narrow sidebar and a wide main content area. Use container queries so the card switches from stacked to horizontal layout based on its container width, not the viewport. ## Quick Start Use the responsive-design skill to convert my card component to use container queries with a fluid typography scale.

Frequently Asked Questions about responsive-design

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

FAQPage Schema
How do I use CSS container queries for responsive components?▼

Set container-type: inline-size on a wrapper element, then use @container rules like @container (min-width: 400px) to style children based on the container's width. Named containers via container-name let you target specific contexts in nested layouts.

How to create fluid typography with CSS clamp()?▼

Use clamp(min, preferred, max) where the preferred value combines a rem base with a vw term, such as clamp(1rem, 0.9rem + 0.5vw, 1.125rem). This scales text smoothly between the minimum and maximum sizes as the viewport changes.

Do container queries work in all browsers?▼

Container queries are supported in Chrome 105+, Firefox 110+, and Safari 16+. For older browsers, wrap container query rules in @supports (container-type: inline-size) and provide media query fallbacks.

Does Tailwind CSS support container queries?▼

Yes, Tailwind CSS v3.2+ supports container queries through the @tailwindcss/container-queries plugin. Add @container to a wrapper element, then use variants like @md:flex-row or named containers like @container/sidebar.

Why does 100vh cause layout issues on mobile browsers?▼

100vh includes space hidden behind mobile browser UI like address bars, causing content cutoff. Use 100dvh (dynamic viewport height) instead, which adjusts as browser UI shows or hides, or 100svh for the minimum guaranteed height.

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

Use container queries when a component's layout should depend on the space it occupies rather than the viewport, such as reusable cards or widgets placed in sidebars and main areas. Media queries remain appropriate for page-level layout changes.

Related Skills

Explore More Software Engineering Skills→
alirezarezvanialirezarezvani
25.3k

ui-design-system

Generate design tokens, color palettes, typography scales, and developer handoff documentation from a brand color.

Community
Intermediate
anouar1991anouar1991
1

responsive-design-tester

Audit web pages across six viewports for responsive design issues.

Community
Advanced
flitzrrrflitzrrr
4

responsive-design

Implement mobile-first CSS with fluid grids, responsive images, and touch optimization.

Community
Intermediate
angelgarciasolorzanoangelgarciasolorzano

tailwindcss

Develop web interfaces with Tailwind CSS utility classes and responsive variants.

Community
Intermediate