skills.rest
po4yka
po4ykaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

adapt

Adapts designs across screen sizes, devices, and platforms using breakpoints, fluid layouts, and touch targets.

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

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 without losing functionality or brand consistency. ## Core Features & Use Cases - Context Assessment: Identifies source assumptions (screen size, input method, connection speed) and target constraints before changing anything. - Platform-Specific Strategies: Provides concrete layout, interaction, content, and navigation strategies for mobile, tablet, desktop, print, and email adaptation. - Implementation Techniques: Covers responsive breakpoints, CSS Grid/Flexbox reflow, container queries, clamp() fluid sizing, 44x44px touch targets, and responsive images. - Use Case: You have a desktop web dashboard and need it to work on phones. The Skill walks you through converting multi-column layouts to single-column stacking, replacing hover interactions with touch-friendly controls, and verifying on real devices. ## Quick Start Ask the AI to adapt your current page or component design for mobile and tablet using the adapt skill.

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-dependent interactions with touch targets of at least 44x44px, and move navigation to a hamburger menu or bottom bar. Prioritize primary content with progressive disclosure for secondary sections.

What breakpoints should I use for responsive design?▼

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

How do I make touch targets accessible on mobile?▼

Set interactive elements to at least 44x44px with adequate spacing between them, remove hover-dependent behaviors, and add touch feedback such as ripples or highlights. Position key controls within thumb reach near the bottom of the screen.

Can I use display:none to hide content on mobile?▼

Use display:none sparingly because hidden content still downloads and costs bandwidth. Prefer progressive enhancement, lazy loading for off-screen content, and responsive images with srcset or the picture element.

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

Browser device emulation does not perfectly replicate real hardware, touch behavior, or network conditions. Test on actual phones and tablets across orientations, browsers, operating systems, and throttled connections to catch these issues.

Related Skills

Explore More Design & Creative Skills→
senpapi69senpapi69

i-quieter

Reduce visual intensity in UI designs by refining color, typography, spacing, and motion.

Community
Advanced
TheCardGoatTheCardGoat
14

adapt

Adapt existing designs across devices, platforms, and output formats.

Official
Intermediate
ruskicoderruskicoder
3

accessibility-review

Audits designs and pages for WCAG 2.1 AA accessibility compliance.

Community
Basic
bidahbidah
28

expo-ui-swift-ui

Build native SwiftUI screens in Expo projects using @expo/ui/swift-ui and RNHostView.

Community
Advanced