Skill

/responsive-web-design

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.

One skill from claude-skills.

shell

$ npx -y skills add secondsky/claude-skills --skill responsive-web-design --agent claude-code

Installs just this skill. Get the whole plugin for auto-invocation.

How it fires

How this skill gets triggered: by you, by Claude, or both.

Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/responsive-web-design

Context preview

The summary Claude sees to decide when to auto-load this skill.

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.

Stats

Stars194

Forks29

LanguageTypeScript

LicenseMIT

Ships with claude-skills

SKILL.md

responsive-web-design.SKILL.md

---
name: responsive-web-design
description: 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.
license: MIT
---

# 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;
  }
}
```

## Flexible Grid

```css
.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr; /* Mobile: single column */