skills.rest
Ssrrb
SsrrbCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

adapt

Adapt existing designs for different screen sizes, devices, and platforms.

Updated Mar 24, 2026
Search Tags:#responsive design#css#cross-platform#ux#breakpoints#touch targets#mobile adaptation
One-click install
npx skills add https://github.com/Ssrrb/cerramos-codebase --skill adapt-ssrrb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/Ssrrb/cerramos-codebase/tree/main/.codex/skills/adapt
Command: npx skills add https://github.com/Ssrrb/cerramos-codebase --skill adapt-ssrrb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designs built for one context often break or feel wrong on another: desktop layouts fail on mobile, hover interactions disappear on touchscreens, and web pages print poorly. This Skill provides a structured workflow for rethinking an existing design so it works appropriately across devices, input methods, and usage contexts. ## Core Features & Use Cases - Context Assessment: Identifies source-context assumptions (screen size, input method, connection speed) and maps them against target-context constraints before changing anything. - 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, clamp(), touch target sizing (44x44px minimum), and responsive images. - Use Case: A team has a desktop web dashboard and needs a mobile version. The Skill guides them through single-column layouts, bottom navigation, thumb-reach controls, and progressive disclosure, then through verification on real devices. ## Quick Start Ask the AI to adapt your existing desktop dashboard design for mobile phones and tablets, including touch-friendly interactions and a verification plan.

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 website design for mobile?▼

Start by identifying desktop assumptions like hover states and multi-column layouts, then apply mobile strategies: single-column stacking, bottom navigation, 44x44px touch targets, and progressive disclosure. Verify on real devices in both orientations, not just browser DevTools.

What breakpoints should I use for responsive design?▼

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

How is adapting for print different from responsive screen design?▼

Print adaptation removes navigation and interactive elements, adds page breaks at logical points, expands hidden content like full URLs, and uses limited color with proper margins. It is a separate output mode, not a viewport resize.

Why do hover-based interactions fail on touch devices?▼

Touchscreens have no hover state, so hover-revealed menus and tooltips become inaccessible. Replace them with tap-triggered controls, bottom sheets instead of dropdowns, and visible affordances with adequate spacing between targets.

Can I just hide desktop content on mobile with display none?▼

Hiding with display:none still downloads the content and can remove core functionality mobile users need. Use progressive enhancement instead: deliver core content first and layer enhancements on larger screens.

Related Skills

Explore More Design & Creative Skills→
AskTinNguyenAskTinNguyen

adapt

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

Community
Advanced
LambdaTestLambdaTest
350

playwright-skill

Generate Playwright E2E tests in TypeScript, JavaScript, Python, Java, or C#.

Official
Advanced
ruskicoderruskicoder
3

accessibility-review

Audits designs and pages for WCAG 2.1 AA accessibility compliance.

Community
Basic
jkenney47jkenney47

adapt

Adapt existing interface designs for mobile, tablet, desktop, print, or email contexts.

Community
Intermediate