skills.rest
jvsandhu
jvsandhuCOMMUNITY
Explore all skills by this author →
GitHub

design_responsive

Implements responsive layouts using breakpoints, fluid typography, and CSS container queries.

Updated Jan 14, 2026
Search Tags:#responsive design#mobile-first#css#tailwind#breakpoints#fluid typography#container queries
One-click install
npx skills add https://github.com/jvsandhu/agentic-skills --skill design-responsive-jvsandhu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design_responsive
Source: https://github.com/jvsandhu/agentic-skills/tree/main/skills/design_responsive
Command: npx skills add https://github.com/jvsandhu/agentic-skills --skill design-responsive-jvsandhu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that adapt cleanly across mobile, tablet, desktop, and ultra-wide screens is error-prone, often causing horizontal overflow, unreadable text, and broken layouts at edge-case viewports. ## Core Features & Use Cases - Breakpoint & Grid Standards: Provides standard breakpoint ranges (320px to 2560px), Tailwind mappings, and grid column/gutter tables per device class. - Fluid Typography & Container Queries: Supplies ready-to-use clamp() scales and @container query patterns so components respond to their own container, not just the viewport. - Accessibility & Performance Workflow: Includes a phased checklist covering mobile-first strategy, prefers-reduced-motion and dark mode support, touch target sizing, and Core Web Vitals audits. - Use Case: When building a card component that must reflow from a single column on phones to a two-column grid inside a sidebar, use the container query pattern and fluid type scale to implement it without device-specific hacks. ## Quick Start Apply the responsive design skill to make my landing page layout adapt fluidly from 320px mobile screens up to ultra-wide desktop monitors.

Frequently Asked Questions about design_responsive

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

FAQPage Schema
How do I implement fluid typography in CSS?▼

Use the clamp() function with a minimum, preferred viewport-relative, and maximum value, such as clamp(1rem, 0.9rem + 0.5vw, 1.125rem). This scales font size smoothly between breakpoints without media query jumps.

How to use CSS container queries for responsive components?▼

Set container-type: inline-size on the parent element, then use @container (min-width: 400px) rules to restyle children based on the container's width. This lets components adapt to their local context rather than the viewport.

What are the standard breakpoints for responsive design?▼

Common ranges are mobile 0-639px, tablet 640-1023px, desktop 1024-1439px, and wide 1440px+. Tailwind maps these to sm (640px), md (768px), lg (1024px), xl (1280px), and 2xl (1536px).

Does container queries work in all browsers?▼

Container queries are supported in modern versions of Chrome, Safari, Firefox, and Edge. For older browsers, provide a viewport-based media query fallback so layouts still degrade gracefully.

Why does my responsive layout have horizontal scroll on mobile?▼

Horizontal overflow usually comes from fixed-width elements, unwrapped long content, or negative margins exceeding the viewport. Audit with overflow checks at 320px width and use fluid sizing instead of fixed pixel widths.

How do I respect user preferences like reduced motion in CSS?▼

Wrap animations in a @media (prefers-reduced-motion: reduce) block that sets animation-duration near zero. Similarly use prefers-color-scheme for dark mode and prefers-contrast for high-contrast support.

Related Skills

Explore More Design & Creative Skills→
ravnhqravnhq
16

design-frontend

Validate UI components against design system tokens and responsive guidelines.

Official
Basic
ivanshtokovivanshtokov
2

performance-profiling

Run Lighthouse audits to measure Core Web Vitals and detect front-end performance regressions.

Community
Intermediate
avel123111avel123111

design-accessibility-review

Audit designs and pages for WCAG 2.1 AA accessibility compliance.

Community
Basic
fusenginefusengine
22

tailwindcss-responsive

Implements responsive design in Tailwind CSS using predefined and custom breakpoints.

Community
Basic