skills.rest
AkaraChen
AkaraChenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

adapt

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designs built for one context often break or feel wrong on other devices, input methods, or platforms. This Skill guides the systematic adaptation of existing designs for mobile, tablet, desktop, print, and email contexts. ## Core Features & Use Cases - Context Assessment: Identifies source assumptions and target constraints including device, input method, screen size, connection speed, and usage context. - Platform-Specific Strategies: Provides layout, interaction, content, and navigation strategies for mobile, tablet, desktop, print, and email adaptations. - Implementation Techniques: Covers responsive breakpoints, CSS Grid/Flexbox, container queries, clamp(), touch target sizing, and responsive images. - Use Case: You have a desktop web dashboard and need it to work on phones. The Skill walks you through single-column layouts, 44x44px touch targets, bottom navigation, and progressive disclosure, then verifies across real devices. ## Quick Start Adapt my desktop dashboard design for mobile devices with touch-friendly navigation and layouts.

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, use full-width components, and replace top navigation with bottom navigation or a hamburger menu. Ensure touch targets are at least 44x44px and prioritize primary content with progressive disclosure.

What breakpoints should I use for responsive design?▼

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

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, footers, and interactive elements, add page breaks at logical points, and use black and white or limited color. Expand shortened content like full URLs, and include page numbers, headers, and print metadata.

Why does my responsive design fail on real devices but work in DevTools?▼

Device emulation does not perfectly replicate real hardware behavior, touch input, or network conditions. Test on actual phones and tablets across orientations, browsers, operating systems, and throttled connections.

What are common mistakes when adapting designs across platforms?▼

Hiding core functionality on mobile, using different information architecture per context, and blindly applying generic breakpoints are frequent errors. Also avoid ignoring landscape orientation and assuming desktop users lack touch input.

Related Skills

Explore More Design & Creative Skills→
Bloodrey41Bloodrey41

adapt

Guide cross-device design adaptation across mobile, tablet, desktop, and print contexts.

Community
Advanced
ZainEldeen-Ashraf-Ibrahim-Ibrahim-SamakZainEldeen-Ashraf-Ibrahim-Ibrahim-Samak

adapt

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

Community
Intermediate
thec3ukthec3uk

Frontend Accessibility

Guide frontend code to meet accessibility standards like ARIA and keyboard navigation.

Official
Basic
heaptracetechnologyheaptracetechnology
13

platform-adapt

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

Community
Advanced