skills.rest
SteveChandler
SteveChandlerCOMMUNITY
Explore all skills by this author →
GitHub

adapt

Adapt designs across screen sizes, devices, input methods, and platforms.

1|Updated Oct 20, 2024
Search Tags:#layout#responsive design#cross-platform#ux#breakpoints#touch targets#mobile adaptation
One-click install
npx skills add https://github.com/SteveChandler/quiver --skill adapt-stevechandler
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/SteveChandler/quiver/tree/main/.agents/skills/adapt
Command: npx skills add https://github.com/SteveChandler/quiver --skill adapt-stevechandler

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designs created for one context often break or feel wrong in another—desktop layouts fail on mobile, hover interactions don't work on touch, and dense content overwhelms small screens. This Skill provides a systematic workflow for rethinking experiences across contexts rather than just scaling them. ## Core Features & Use Cases - Context Assessment: Identifies source assumptions and target constraints including device type, input method, screen size, connection speed, and usage context. - Platform-Specific Strategies: Provides concrete adaptation playbooks for mobile, tablet, desktop, print, and email, covering layout, interaction, content, and navigation patterns. - Implementation Guidance: Covers responsive breakpoints, CSS Grid/Flexbox reflow, container queries, touch target sizing (44x44px minimum), and progressive disclosure. - Use Case: You built a desktop web dashboard and need a mobile version. The Skill guides you to convert multi-column layouts to single-column stacking, replace dropdowns with bottom sheets, enlarge touch targets, and prioritize primary content. ## Quick Start Adapt my desktop dashboard design to work on mobile phones with touch input.

Frequently Asked Questions about adapt

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

FAQPage Schema
How do I adapt a desktop design for mobile devices?▼

Convert multi-column layouts to single-column vertical stacking, replace top navigation with bottom navigation or hamburger menus, enlarge touch targets to 44x44px minimum, and use progressive disclosure to prioritize primary content over secondary elements.

What is the minimum touch target size for mobile design?▼

Touch targets should be at least 44x44 pixels with adequate spacing between interactive elements. Remove hover-dependent interactions and add touch feedback like ripples or highlights for usability.

Should I use standard breakpoints or content-driven breakpoints?▼

Content-driven breakpoints are preferred—add breakpoints where the design actually breaks rather than blindly using generic device widths. Common starting points are 320-767px for mobile, 768-1023px for tablet, and 1024px+ for desktop.

How do I adapt a web page for print output?▼

Remove navigation and interactive elements, add page breaks at logical points, expand shortened content like full URLs, include page numbers and metadata, and convert to black and white or limited color with proper binding margins.

Why does hiding content with display none cause problems on mobile?▼

Elements hidden with display none still download to the device, wasting bandwidth on slow connections. Use progressive enhancement instead—load core content first and add enhancements on larger screens, with lazy loading for off-screen content.

What are the limitations of browser DevTools for responsive testing?▼

Device emulation in DevTools is helpful but imperfect—it cannot fully replicate real touch behavior, actual device performance, or OS-specific rendering. Test on real phones, tablets, and desktops across orientations, browsers, and throttled network conditions.

Related Skills

Explore More Design & Creative Skills→
Pacha-ePacha-e

adapt

Adapt designs across screen sizes using breakpoints, fluid layouts, and touch targets.

Community
Intermediate
igot-aiigot-ai

adapt

Create responsive adaptation plans for designs across screen sizes and devices.

Official
Advanced
zinohomezinohome

accessibility-auditor

Audits and implements web accessibility following WCAG 2.1 guidelines with ARIA patterns.

Community
Intermediate
GGEduGGEdu

crosspost

Adapt a single content piece for X, LinkedIn, Threads, and Bluesky.

Community
Intermediate