skills.rest
metang
metangCOMMUNITY
Explore all skills by this author →
GitHub

adapt

Adapt designs for different screen sizes, devices, and platforms using breakpoints and fluid layouts.

Updated Feb 22, 2026
Search Tags:#responsive design#cross-device#breakpoints#adaptation#fluid layout#touch targets#mobile layout
One-click install
npx skills add https://github.com/metang/imganalyzer --skill adapt-metang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/metang/imganalyzer/tree/main/.agents/skills/adapt
Command: npx skills add https://github.com/metang/imganalyzer --skill adapt-metang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designs built for one context often break or feel wrong on other devices, forcing teams to rebuild layouts, navigation, and interactions from scratch for mobile, tablet, desktop, print, or email. ## Core Features & Use Cases - Context Assessment: Identifies source assumptions and target constraints including device type, input method, screen size, connection speed, and usage context. - Adaptation Strategies: Provides concrete layout, interaction, content, and navigation strategies for mobile, tablet, desktop, print, and email targets. - Implementation Guidance: Covers responsive breakpoints, CSS Grid/Flexbox reflow, container queries, clamp() fluid sizing, 44px touch targets, and responsive images. - Use Case: Take a desktop web dashboard and adapt it for mobile by converting multi-column layouts to single-column stacking, replacing hover interactions with touch targets, and moving navigation to a bottom bar. ## Quick Start Adapt this desktop dashboard design for mobile devices with touch-friendly targets and a single-column layout.

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 hover interactions with 44x44px touch targets, move navigation to a hamburger menu or bottom bar, and prioritize primary content with progressive disclosure.

What breakpoints should I use for responsive design?▼

Common breakpoints are 320-767px for mobile, 768-1023px for tablet, and 1024px+ for desktop. Prefer content-driven breakpoints where the design actually breaks rather than generic device widths.

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

Touch targets should be at least 44x44px with adequate spacing between interactive elements. Remove hover-dependent interactions and add touch feedback such as ripples or highlights.

How do I adapt a web page for print?▼

Remove navigation and interactive elements, add page breaks at logical points, expand hidden content like full URLs, include page numbers and headers, and convert charts to print-friendly versions.

Why should I test responsive designs on real devices?▼

Browser DevTools emulation does not perfectly replicate real device behavior. Testing on actual phones, tablets, and desktops across orientations, browsers, and input methods catches issues emulation misses.

Related Skills

Explore More Design & Creative Skills→
AskTinNguyenAskTinNguyen

adapt

Adapt designs across screen sizes and contexts with platform-specific guidelines.

Community
Advanced
TheGoat395TheGoat395
117

react-responsive-components

Design and implement responsive React components for mobile, tablet, and desktop devices.

Community
Intermediate
BRANDNEWSHVTBRANDNEWSHVT

accessibility-audit

Identify and fix WCAG 2.1 AA accessibility gaps in frontend user interfaces.

Official
Advanced
heaptracetechnologyheaptracetechnology
13

platform-adapt

Adapt a single codebase into native iOS and Android experiences with platform-specific navigation and UI.

Community
Advanced