responsive-design-patterns

Mobile-first responsive design patterns with breakpoints, fluid layouts, and adaptive components

5 stars

Best use case

responsive-design-patterns is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Mobile-first responsive design patterns with breakpoints, fluid layouts, and adaptive components

Teams using responsive-design-patterns should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/responsive-design-patterns/SKILL.md --create-dirs "https://raw.githubusercontent.com/organvm-iv-taxis/a-i--skills/main/distributions/claude/skills/responsive-design-patterns/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/responsive-design-patterns/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How responsive-design-patterns Compares

Feature / Agent	responsive-design-patterns	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Mobile-first responsive design patterns with breakpoints, fluid layouts, and adaptive components

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Responsive Design Patterns

Mobile-first patterns for creating adaptive, responsive user interfaces.

## Breakpoint System

```typescript
export const breakpoints = {
  sm: '640px',   // Small devices
  md: '768px',   // Medium devices
  lg: '1024px',  // Large devices
  xl: '1280px',  // Extra large devices
  '2xl': '1536px' // 2X Extra large
};

// Tailwind config
module.exports = {
  theme: {
    screens: breakpoints
  }
};
```

## Mobile-First Approach

```tsx
// Start with mobile, enhance for larger screens
<div className="
  flex flex-col        /* Mobile: stack vertically */
  md:flex-row          /* Tablet+: side by side */
  gap-4
  p-4 md:p-6 lg:p-8   /* Progressive spacing */
">
  <div className="
    w-full               /* Mobile: full width */
    md:w-1/3            /* Tablet+: 1/3 width */
  ">Sidebar</div>
  
  <div className="
    w-full
    md:w-2/3
  ">Main Content</div>
</div>
```

## Fluid Typography

```css
/* Clamp for fluid scaling */
h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

/* Container queries */
@container (min-width: 400px) {
  .card-title {
    font-size: 1.25rem;
  }
}
```

## Responsive Images

```tsx
<picture>
  <source
    media="(min-width: 1024px)"
    srcSet="/images/hero-large.webp"
  />
  <source
    media="(min-width: 640px)"
    srcSet="/images/hero-medium.webp"
  />
  <img
    src="/images/hero-small.webp"
    alt="Hero image"
    loading="lazy"
  />
</picture>
```

## Touch-Friendly Patterns

```tsx
// Minimum touch target: 44x44px
<button className="min-h-[44px] min-w-[44px] p-3">
  <Icon />
</button>

// Swipe gestures
function useSwipe(onSwipeLeft?: () => void, onSwipeRight?: () => void) {
  const [touchStart, setTouchStart] = useState(0);
  const [touchEnd, setTouchEnd] = useState(0);
  
  const minSwipeDistance = 50;
  
  const onTouchStart = (e: TouchEvent) => {
    setTouchEnd(0);
    setTouchStart(e.targetTouches[0].clientX);
  };
  
  const onTouchMove = (e: TouchEvent) => {
    setTouchEnd(e.targetTouches[0].clientX);
  };
  
  const onTouchEnd = () => {
    if (!touchStart || !touchEnd) return;
    
    const distance = touchStart - touchEnd;
    const isLeftSwipe = distance > minSwipeDistance;
    const isRightSwipe = distance < -minSwipeDistance;
    
    if (isLeftSwipe && onSwipeLeft) onSwipeLeft();
    if (isRightSwipe && onSwipeRight) onSwipeRight();
  };
  
  return { onTouchStart, onTouchMove, onTouchEnd };
}
```

## Integration Points

Complements:
- **frontend-design-systems**: For component design
- **accessibility-patterns**: For mobile accessibility
- **webapp-testing**: For responsive testing

Related Skills

taxonomy-modeling-design

from organvm-iv-taxis/a-i--skills

Phase 2 of the pentaphase structural-overhaul protocol. Classifies entities, standardizes attributes, establishes relationships, and designs the access framework. Use when the user invokes phase 2 of an overhaul, asks to "design the taxonomy" or "model the structure", or has completed a landscape audit and is ready to redesign. Consumes phase-1-landscape-report.md; produces phase-2-taxonomy-model.md.

workshop-presentation-design

from organvm-iv-taxis/a-i--skills

Design engaging workshops, conference talks, and educational presentations. Covers learning objectives, activity design, slide craft, and facilitation techniques. Triggers on workshop design, presentation prep, talk structure, or training session requests.

webhook-integration-patterns

from organvm-iv-taxis/a-i--skills

Designs reliable webhook systems with proper delivery guarantees, retry logic, signature verification, and idempotent processing for event-driven integrations.

vector-search-patterns

from organvm-iv-taxis/a-i--skills

Implement vector similarity search with embedding generation, index selection, and hybrid retrieval strategies. Covers ChromaDB, pgvector, FAISS, and RAG pipeline design. Triggers on vector search, embeddings, semantic search, or RAG architecture requests.

testing-patterns

from organvm-iv-taxis/a-i--skills

Write effective tests across the stack—unit, integration, E2E, and visual regression. Covers testing philosophy, framework selection, mocking strategies, and CI integration. Triggers on testing, test coverage, TDD, or quality assurance requests.

session-lifecycle-patterns

from organvm-iv-taxis/a-i--skills

Manage AI agent session lifecycles with structured phases (FRAME, SHAPE, BUILD, PROVE), context preservation across sessions, handoff protocols, and session metadata tracking. Triggers on session management, agent lifecycle, or multi-session workflow requests.

rust-systems-design

from organvm-iv-taxis/a-i--skills

Provides expert guidance on Rust programming, focusing on memory safety, concurrency patterns, and idiomatic architectural choices for systems software.

resilience-patterns

from organvm-iv-taxis/a-i--skills

Build fault-tolerant systems with circuit breakers, retries with backoff, bulkheads, timeouts, and graceful degradation. Covers distributed system failure modes and recovery strategies. Triggers on reliability engineering, fault tolerance, or distributed system resilience requests.

redis-patterns

from organvm-iv-taxis/a-i--skills

Use Redis effectively for caching, pub/sub messaging, rate limiting, distributed locks, and session storage. Covers data structure selection, expiration strategies, and cluster patterns. Triggers on Redis usage, caching architecture, or pub/sub messaging requests.

realtime-websocket-patterns

from organvm-iv-taxis/a-i--skills

Implement real-time features with WebSockets, Server-Sent Events, and long polling. Covers connection management, room-based messaging, presence tracking, and scaling strategies. Triggers on WebSocket implementation, real-time communication, or live update feature requests.

react-three-fiber-patterns

from organvm-iv-taxis/a-i--skills

Build interactive 3D experiences in React using react-three-fiber (R3F), drei helpers, and shader integration. Covers scene composition, performance optimization, and animation patterns. Triggers on R3F development, React + Three.js, or declarative 3D scene requests.

python-packaging-patterns

from organvm-iv-taxis/a-i--skills

Structure Python projects for distribution with pyproject.toml, src layouts, dependency management, and publishing workflows. Covers packaging tools (hatch, setuptools, flit, poetry), versioning strategies, and editable installs. Triggers on Python project setup, packaging configuration, or dependency management requests.