Skip to content

responsive-web-design

Create responsive layouts using CSS Grid, Flexbox, media queries, and mobile-first design. Use when building adaptive interfaces that work across all devices.

1,091
installs
0 up / 0 down, score 0.00
votes
369
repo stars
Updated
8 months ago
In the catalog since
6 Oct 2026
From
aj-geddes/useful-ai-prompts
Web & Frontend
Get it through your agent npx skills add aj-geddes/useful-ai-prompts@responsive-web-design

Skill instructions

Rendered from the published SKILL.md, 82 lines.

Responsive Web Design

Table of Contents

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)

Reference Guides

Detailed implementations in the references/ directory:

Guide Contents
Mobile-First Media Query Strategy Mobile-First Media Query Strategy
Flexbox Responsive Navigation Flexbox Responsive Navigation
CSS Grid Responsive Layout CSS Grid Responsive Layout
Responsive Typography Responsive Typography
Responsive Cards Component Responsive Cards Component

Best Practices

✅ DO

  • Follow established patterns and conventions
  • Write clean, maintainable code
  • Add appropriate documentation
  • Test thoroughly before deploying

❌ DON'T

  • Skip testing or validation
  • Ignore error handling
  • Hard-code configuration values