responsive-design

Overview

Responsive design that works across all devices. Covers mobile-first approach, breakpoint strategy, fluid typography, container queries, touch targets, and performance optimization.

Capabilities

• Design mobile-first layouts that scale to desktop
• Implement fluid typography with clamp()
• Use container queries for component-level responsiveness
• Optimize touch targets for mobile (44px minimum)
• Handle responsive images and lazy loading

When to Use

Trigger phrases:

• "responsive design"

• "Mobile-first responsive design — breakpoints, fluid typography, container querie"

• Building a new responsive layout

• Existing layout breaks on certain screen sizes

• Mobile traffic is >50% but mobile experience is poor

• Need component-level responsive behavior

When NOT to Use

• Task is about content strategy, not creation (use strategy skills)
• Task is about content distribution (use distribution skills)
• You need to analyze content performance (use analytics skills)
• Task is about content moderation (use moderation tools)
• You don't have content guidelines
• Task requires domain expertise (consult experts)

Pseudo Code

The responsive-design workflow follows a standard pipeline pattern.

Core flow:

# responsive-design primary flow
input = prepare(raw_data)
result = process(input, config={breakpoints, container, design, first, fluid})
validate(result)
deliver(result)

Error handling:

on error:
  log(error_details)
  retry_with_backoff(max=3)
  if still_failing: alert_and_escalate()

Core Workflow

# responsive-design primary flow
input = prepare(raw_data)
result = process(input, config={breakpoints, container, design, first, fluid})
validate(result)
deliver(result)

Error Handling

on error:
  log(error_details)
  retry_with_backoff(max=3)
  if still_failing: alert_and_escalate()

Mobile-First CSS

/* Mobile first (default) */
.grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }

/* Tablet */
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop */
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}