skills.rest
olli107x
olli107xCOMMUNITY
Explore all skills by this author →
GitHub

responsive-design

Implement mobile-first responsive design with CSS Grid and fluid typography.

Updated Aug 27, 2026
Search Tags:#web development#frontend#responsive design#mobile-first#css#ui/ux
One-click install
npx skills add https://github.com/olli107x/claude-code-starter-kit --skill responsive-design-olli107x
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-design
Source: https://github.com/olli107x/claude-code-starter-kit/tree/main/skills/development/frontend/responsive-design
Command: npx skills add https://github.com/olli107x/claude-code-starter-kit --skill responsive-design-olli107x

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers systematically implement mobile-first responsive design principles to ensure websites and applications look and function optimally across all devices and screen sizes.

Core Features & Use Cases

  • Mobile-First Methodology: Guides the creation of styles starting from small screens and progressively enhancing for larger ones.
  • Breakpoint Strategies: Provides examples for defining and using breakpoints effectively with CSS Custom Properties and frameworks like Tailwind.
  • Container Queries: Demonstrates how to make components responsive to their parent container's size, not just the viewport.
  • Fluid Typography & Spacing: Implements scalable text and spacing using clamp() for smooth transitions.
  • Responsive Images: Covers srcset, sizes, Next.js Image component, and <picture> for art direction.
  • Touch Target Optimization: Ensures interactive elements are easily tappable on touch devices.
  • Layout Patterns: Illustrates common responsive layouts like Stack, Sidebar, and Holy Grail using Flexbox and Grid.
  • Testing: Recommends DevTools, automated visual regression, and testing on physical devices.

Quick Start

Implement a mobile-first responsive design for a card component using CSS Grid and fluid typography.

Frequently Asked Questions about responsive-design

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

FAQPage Schema
How do I implement mobile-first responsive design in web development?▼

Mobile-first responsive design starts with base styles for small screens and progressively enhances layouts using breakpoint strategies, CSS Grid, and Flexbox to adapt interfaces across all viewport sizes.

What is the best way to handle fluid typography and spacing in CSS?▼

Fluid typography and spacing use the CSS clamp() function to scale text and layout dimensions smoothly, ensuring user interface elements transition optimally between different screen widths without abrupt shifts.

How do container queries differ from viewport breakpoints for responsive layouts?▼

Container queries make individual components responsive to their parent container's size rather than the entire viewport, allowing modular UI elements to adapt their layout contextually within any page section.

Does this responsive design guidance cover touch target sizing for mobile devices?▼

Yes, responsive design guidance includes touch target optimization to ensure interactive elements like buttons are easily tappable on touch devices, preventing user input errors on small mobile screens.

What are common responsive design anti-patterns to avoid?▼

Common responsive design anti-patterns include fixed pixel widths, ignoring image optimization, and untestable layouts; avoiding these ensures websites function optimally across all devices and screen sizes.

What's the best way to implement responsive images across different frameworks?▼

Responsive images are implemented using srcset and sizes attributes, the picture element for art direction, and framework-specific components like Next.js Image to deliver appropriately scaled media across devices.

Related Skills

Explore More Software Engineering Skills→
VKirillVKirill
15

frontend-craft

Enforces WCAG AA accessibility and BEM naming in frontend UI markup and stylesheets.

Community
Intermediate
HieubkavHieubkav

Frontend Responsive

Implement responsive mobile-first layouts with fluid containers, breakpoints, and touch targets.

Community
Basic
moughamirmoughamir

tailwindcss-advanced-layouts

Generate Tailwind CSS grid and flexbox layouts with responsive breakpoints.

Community
Advanced
haotoolhaotool
2

responsive-design

Build adaptive interfaces using container queries, grid layouts, and fluid typography.

Official
Advanced