Responsive Web Design

by secondsky88378361314fMIT227 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 10 days ago

Builds adaptive web interfaces using Flexbox, CSS Grid, and media queries with a mobile-first approach. Use when creating multi-device layouts, implementing flexible UI systems, or ensuring cross-browser compatibility.

Instructions onlyDesign & Creative Software Development

AI-generated overview

Provides CSS guidance for building mobile-first responsive web layouts with Flexbox, Grid, and media queries.

What it does: This skill supplies reference CSS patterns for adaptive web interfaces, covering mobile-first media queries, flexible grids, fluid typography, responsive images, and Flexbox navigation. It also lists best practices such as flexible units, touch target sizing, and choosing Grid for 2D layouts versus Flexbox for 1D. It produces guidance and code snippets rather than generated files.
When to use it: Use it when creating multi-device layouts, implementing flexible UI systems, or checking cross-browser responsive behavior. It suits front-end work where breakpoints, fluid type, and responsive images need consistent patterns.
Requirements: No scripts or packages; the agent only needs to read the instructions. The content references external MDN documentation links.

Responsive Web Design

Build adaptive interfaces using modern CSS techniques for all screen sizes.

Mobile-First Media Queries

css

/* Base: Mobile (320px+) */.container {  padding: 1rem;}
/* Tablet (640px+) */@media (min-width: 640px) {  .container {    padding: 2rem;    max-width: 640px;    margin: 0 auto;  }}
/* Desktop (1024px+) */@media (min-width: 1024px) {  .container {    max-width: 1024px;  }}

/* Base: Mobile (320px+) */.container {  padding: 1rem;}
/* Tablet (640px+) */@media (min-width: 640px) {  .container {    padding: 2rem;    max-width: 640px;    margin: 0 auto;  }}
/* Desktop (1024px+) */@media (min-width: 1024px) {  .container {    max-width: 1024px;  }}

Flexible Grid

css

.grid {  display: grid;  gap: 1rem;  grid-template-columns: 1fr; /* Mobile: single column */}
@media (min-width: 640px) {  .grid {    grid-template-columns: repeat(2, 1fr); /* Tablet: 2 columns */  }}
@media (min-width: 1024px) {  .grid {    grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */  }}

.grid {  display: grid;  gap: 1rem;  grid-template-columns: 1fr; /* Mobile: single column */}
@media (min-width: 640px) {  .grid {    grid-template-columns: repeat(2, 1fr); /* Tablet: 2 columns */  }}
@media (min-width: 1024px) {  .grid {    grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */  }}

Fluid Typography

css

/* Scales smoothly between breakpoints */h1 {  font-size: clamp(1.5rem, 4vw, 3rem);}
p {  font-size: clamp(1rem, 2vw, 1.25rem);}

/* Scales smoothly between breakpoints */h1 {  font-size: clamp(1.5rem, 4vw, 3rem);}
p {  font-size: clamp(1rem, 2vw, 1.25rem);}

Responsive Images

css

img {  max-width: 100%;  height: auto;}
.hero-image {  width: 100%;  aspect-ratio: 16 / 9;  object-fit: cover;}

img {  max-width: 100%;  height: auto;}
.hero-image {  width: 100%;  aspect-ratio: 16 / 9;  object-fit: cover;}

Flexbox Navigation

css

.nav {  display: flex;  flex-direction: column;  gap: 0.5rem;}
@media (min-width: 768px) {  .nav {    flex-direction: row;    justify-content: space-between;    align-items: center;  }}

.nav {  display: flex;  flex-direction: column;  gap: 0.5rem;}
@media (min-width: 768px) {  .nav {    flex-direction: row;    justify-content: space-between;    align-items: center;  }}

Best Practices

Start with mobile styles first
Use flexible units (%, rem, vw)
Test on real devices
Ensure minimum 48px touch targets
Maintain readable line lengths (45-75 chars)
Use CSS Grid for 2D layouts, Flexbox for 1D

Resources

Source and attribution

Source:secondsky/claude-skillsinplugins/responsive-web-design/skills/responsive-web-designat commit8837836

License: MIT

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Responsive Web Design

Responsive Web Design

Mobile-First Media Queries

Flexible Grid

Fluid Typography

Responsive Images

Flexbox Navigation

Best Practices

Resources

Source and attribution

More from secondsky/claude-skills

Vulnerability Scanning

Web Performance Optimization

Web Performance Audit

Threejs

Tailwind V4 Shadcn

Technical Specification

More in Design & Creative

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design