skills.rest
TechCorp25
TechCorp25COMMUNITY
Explore all skills by this author →
GitHub

responsive-design

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

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

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 reused in different contexts. This Skill provides proven patterns for modern responsive CSS so layouts adapt to both viewport and container size. ## Core Features & Use Cases - Container Queries: Build component-level responsiveness with container-type, named containers, and container query units (cqi, cqw) so components adapt wherever they are placed. - Fluid Typography & Spacing: Create smooth-scaling type and spacing scales with CSS clamp(), min(), and max() instead of hard breakpoint jumps. - Responsive Layout Patterns: Apply CSS Grid auto-fit layouts, Flexbox switchers, responsive navigation, tables, and images with srcset and art direction. - Use Case: A card component must show a stacked layout in a narrow sidebar but a horizontal layout in the main content area. Use container queries so the card responds to its own width rather than the viewport. ## Quick Start Ask the AI to refactor a card component to use container queries and fluid typography so it adapts to its container width instead of the viewport.

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 (min-width: 400px) rules to style children based on the container's width. This lets components adapt to their own size rather than the viewport, making them reusable in sidebars, grids, or full-width sections.

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). The font scales smoothly with viewport width while staying within the minimum and maximum bounds.

Container queries vs media queries: when should I use each?▼

Use media queries for page-level layout changes tied to the viewport, such as overall grid structure. Use container queries for component-level responsiveness, like a card switching from stacked to horizontal based on the space it actually occupies.

Does Tailwind CSS support container queries?▼

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

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

Mobile browsers include dynamic UI like address bars in the vh calculation, causing content to be cut off. Use 100dvh (dynamic viewport height) instead, which adjusts as browser UI shows or hides, or 100svh for the minimum guaranteed height.

What are the browser support limitations of container queries?▼

Container queries work in Chrome 105+, Firefox 110+, and Safari 16+. For older browsers, provide fallbacks using @supports (container-type: inline-size) feature queries combined with viewport-based media query defaults.

Related Skills

Explore More Design & Creative Skills→
matthewharwoodmatthewharwood

utopia-fluid-scales

Generate fluid type and space scale tokens using Utopia and cqi units.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-breakpoint-boundary

Detect CSS breakpoint overflow and edge-cutoff defects at exact viewport widths.

Community
Intermediate
foxtrottwistfoxtrottwist
1

axiom-accessibility-diag

Audit iOS/macOS app accessibility for VoiceOver, Dynamic Type, contrast, touch targets, keyboard navigation, and Reduce Motion.

Community
Advanced
toddmoytoddmoy
1

responsive layout

Build mobile-first responsive layouts with Tailwind CSS, Grid, and Flexbox.

Community
Advanced