Skills
.Work. You
Rest

responsive-and-multi-device

Community

Master responsive and adaptive design across all devices.

Design & Creative#responsive design#mobile-first#adaptive design#container queries#touch design#logical properties#viewport handling
Authorjpoindexter
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a comprehensive guide to responsive and adaptive design, ensuring your content looks and functions perfectly across all devices.

Core Features & Use Cases

  • Mobile-First Design: Focus on the smallest screen first and build up for larger devices.
  • Fluid Breakpoints: Use clamp() and auto-fit to create smooth scaling without jumps.
  • Container Queries: Design components that adapt to their container's size, not the viewport.
  • Logical Properties: Use logical CSS properties for cross-directional design.
  • Touch vs Pointer: Design for touch input on mobile devices and pointer input on desktops.
  • Viewport & Browser Chrome: Handle viewport issues and browser chrome interactions.
  • Per-Device Patterns: Tailor design patterns for phones, tablets, desktops, TVs, watches, and foldables.
  • Responsive Media: Serve the right images and content for different devices.
  • Testing Across Devices: Ensure your design works on real devices and emulators.
  • Common Mistakes: Avoid common pitfalls in responsive design.

Quick Start

Use the responsive-and-multi-device skill to design a mobile-first layout for your web application.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: responsive-and-multi-device
Download link: https://github.com/jpoindexter/design-and-ai-skills/archive/main.zip#responsive-and-multi-device

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.