Responsive Web Design

This one gives Claude the fundamentals for building layouts that adapt across devices. You get mobile-first media queries, Flexbox navigation patterns, CSS Grid layouts, and responsive typography techniques. The reference guides cover specific implementations like card components and breakpoint strategies. It's practical if you're building anything that needs to work from phones to desktops without making users pinch and zoom. The approach is straightforward modern CSS, nothing fancy, just the core techniques you'd expect. Useful for getting consistent responsive patterns without reinventing breakpoints every project.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 5
skills.sh installs: 1.1K
GitHub stars: 379
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add aj-geddes/useful-ai-prompts --skill responsive-web-design --agent claude-code

Installs into .claude/skills of the current project.

Files

Overview

Build mobile-first responsive interfaces using modern CSS techniques including Flexbox, Grid, and media queries to create adaptable user experiences.

When to Use

Multi-device applications
Mobile-first development
Accessible layouts
Flexible UI systems
Cross-browser compatibility

Quick Start

Minimal working example:

/* Mobile styles (default) */
.container {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
}

.card {
  padding: 16px;
  border-radius: 8px;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Tablet (640px and up) */
@media (min-width: 640px) {
  .container {
    flex-direction: row;
// ... (see reference guides for full implementation)