mcpField
R
responsive-web-design

responsive-web-design

github.com/secondskyDesign & UI240695 installsUpdated 5w ago
Repository

About responsive-web-design

A skill covering modern CSS techniques for building interfaces that adapt to different screen sizes. It presents mobile-first layouts, flexible grids, fluid type, responsive images, and navigation patterns.

Key features

  1. 01Mobile-first media queries
  2. 02Flexible CSS Grid layouts
  3. 03Fluid typography with clamp()
  4. 04Responsive image sizing
  5. 05Flexbox navigation patterns

Use cases

  1. 01Create layouts for phone and tablet widths
  2. 02Scale headings smoothly across screens
  3. 03Keep images within their containers
  4. 04Adapt navigation for narrow screens

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/secondsky/claude-skills --skill responsive-web-design

After installing, type/responsive-web-designin Claude Code to confirm it loaded.

Details

From the project README

Responsive Web Design

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

Mobile-First Media Queries

/* 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

.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

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

p {
  font-size: clamp(1rem, 2vw, 1.25rem);
}

Responsive Images

img {
  max-width: 100%;
  height: auto;
}

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

Flexbox Navigation

.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

Comments

Markdown supported