mcpField
R
responsive-web-design

responsive-web-design

github.com/aj-geddesDesign & UI3731.1k installsUpdated 34w ago
Repository

About responsive-web-design

responsive-web-design is a skill for building interfaces that adapt to different devices. It uses a mobile-first approach and includes guides to Flexbox, Grid, media queries, and responsive typography.

Key features

  1. 01Use a mobile-first design approach
  2. 02Build layouts with Flexbox
  3. 03Arrange content with CSS Grid
  4. 04Adapt screens with media queries
  5. 05Consult responsive navigation and typography guides

Use cases

  1. 01Build applications for multiple devices
  2. 02Develop mobile-first websites
  3. 03Design flexible UI systems
  4. 04Create responsive card layouts

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill responsive-web-design

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

Bundled files

References and scripts installed along with SKILL.md.

references/
css-grid-responsive-layout.md
flexbox-responsive-navigation.md
mobile-first-media-query-strategy.md
responsive-cards-component.md
responsive-typography.md
templates/
component-template.tsx

Details

From the project README

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:

GuideContents
Mobile-First Media Query StrategyMobile-First Media Query Strategy
Flexbox Responsive NavigationFlexbox Responsive Navigation
CSS Grid Responsive LayoutCSS Grid Responsive Layout
Responsive TypographyResponsive Typography
Responsive Cards ComponentResponsive 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

Comments

Markdown supported