skills.rest
jpoindexter
jpoindexterCOMMUNITY
Explore all skills by this author →
Website𝕏@microninkGitHub

responsive-and-multi-device

Provides a reference guide for responsive and adaptive web design techniques and testing across devices.

1|Updated Jun 9, 2026
Search Tags:#responsive design#mobile-first#adaptive design#container queries#touch design#logical properties#viewport handling
One-click install
npx skills add https://github.com/jpoindexter/design-and-ai-skills --skill responsive-and-multi-device
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-and-multi-device
Source: https://github.com/jpoindexter/design-and-ai-skills/tree/main/design-system-skills/responsive-and-multi-device
Command: npx skills add https://github.com/jpoindexter/design-and-ai-skills --skill responsive-and-multi-device

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

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.

Frequently Asked Questions about responsive-and-multi-device

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is container queries and how does it differ from viewport handling in responsive design?▼

Container queries let components adapt to their parent container's size, unlike viewport handling which responds to the entire browser window. This enables modular responsive design where components style themselves based on available space.

How do I build a mobile-first responsive layout using fluid breakpoints?▼

Build mobile-first responsive layouts by starting with the smallest screen and scaling up. Use CSS functions like `clamp()` and `auto-fit` to create fluid breakpoints that scale smoothly without abrupt layout jumps.

Can I use logical properties for cross-directional design across different devices?▼

Yes, logical properties enable cross-directional design by using CSS logical values that adapt to writing modes. This ensures your responsive layout works correctly for left-to-right and right-to-left content across all devices.

What's the best way to handle touch vs pointer input for multi-device web design?▼

Separate touch and pointer interactions by designing touch-friendly targets for mobile devices and precise pointer inputs for desktops. This ensures cross-device compatibility and usability across phones, tablets, and desktops.

Does this responsive design guide cover specific patterns for foldables and TVs?▼

Yes, it provides per-device patterns tailored for phones, tablets, desktops, TVs, watches, and foldables. These patterns ensure your responsive media and layout adapt correctly to emerging device categories.

Why does my responsive media layout break when testing across devices with browser chrome?▼

Responsive media breaks when viewport issues and browser chrome interactions are not handled correctly. Testing across real devices and emulators helps identify these common mistakes and ensures cross-device compatibility.

Related Skills

Explore More Design & Creative Skills→
fideguchfideguch
1

frontend-slides

Generate zero-dependency HTML slide decks with inline CSS and JavaScript.

Community
Advanced
mymx2mymx2
4

adaptive

Implement adaptive Android UIs with Jetpack Compose and Navigation 3.

Community
Advanced
Khrees2412Khrees2412

responsive-design

Creates adaptive interfaces with container queries, fluid typography, CSS Grid, and breakpoint strategies for web apps and design systems.

Community
Advanced
Camilo8902Camilo8902

responsive-design-system

Implement mobile-first responsive design systems with Tailwind CSS breakpoints and fluid typography.

Community
Intermediate