skills.rest
ZainEldeen-Ashraf-Ibrahim-Ibrahim-Samak
ZainEldeen-Ashraf-Ibrahim-Ibrahim-SamakCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

adapt

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

Updated Apr 12, 2026
Search Tags:#accessibility#mobile-first#breakpoints#responsive-design#container-queries#touch-targets#adaptive-layouts
One-click install
npx skills add https://github.com/ZainEldeen-Ashraf-Ibrahim-Ibrahim-Samak/SCCT --skill adapt-zaineldeen-ashraf-ibrahim-ibrahim-samak
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/ZainEldeen-Ashraf-Ibrahim-Ibrahim-Samak/SCCT/tree/main/.cursor/skills/adapt
Command: npx skills add https://github.com/ZainEldeen-Ashraf-Ibrahim-Ibrahim-Samak/SCCT --skill adapt-zaineldeen-ashraf-ibrahim-ibrahim-samak

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Adapt ensures designs remain usable, accessible, and effective when moved between screen sizes, devices, input methods, and contexts by providing practical strategies to rework layout, interaction, and content for new environments.

Core Features & Use Cases

  • Layout & Breakpoints: Guidance for choosing content-driven breakpoints, using CSS Grid/Flexbox, container queries, and fluid sizing techniques to reflow interfaces.
  • Interaction & Touch: Recommendations for touch target sizing, removing hover dependencies, thumbs-first placement, and gesture-friendly patterns.
  • Content & Navigation: Strategies for progressive disclosure, prioritizing primary content, adapting navigation (bottom nav, drawers, sticky headers), and platform-appropriate information architecture.
  • Use Case: Convert a complex desktop admin dashboard into a responsive mobile and tablet experience by reflowing multi-column panels into a prioritized single-column flow, enlarging controls for touch, and simplifying navigation into a bottom bar.

Quick Start

Adapt the provided desktop design for mobile by defining content-driven breakpoints, switching to a single-column flow, increasing touch targets to 44x44px, and simplifying navigation into a mobile-appropriate pattern.

Frequently Asked Questions about adapt

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

FAQPage Schema
How do I convert a desktop design to a responsive mobile layout?▼

Responsive design reflows interfaces across screen sizes by using content-driven breakpoints, CSS Grid, Flexbox, and container queries. It ensures usability by reworking layout, interaction, and content for different devices and input methods.

What size should touch targets be for mobile-first adaptive layouts?▼

Touch targets in adaptive layouts should be increased to 44x44px to ensure accessibility and thumbs-first usability. Removing hover dependencies and adopting gesture-friendly patterns are also recommended for mobile interaction.

When should I use container queries instead of breakpoints for adaptive layouts?▼

Use container queries instead of breakpoints when fluid sizing within specific components is needed. Container queries allow elements to reflow based on their parent container's dimensions, enabling modular adaptive layouts.

How do I reflow a complex multi-column admin dashboard for tablets?▼

Reflow a multi-column admin dashboard for tablets by collapsing panels into a prioritized single-column flow. Simplify navigation with drawers or sticky headers and enlarge controls to ensure cross-device usability.

Does responsive design work for migrating interfaces to print and email formats?▼

Responsive design strategies apply to print and email formats by reworking layout, interaction, and content for new environments. Platform-appropriate information architecture ensures consistent usability across these distinct formats.

Related Skills

Explore More Design & Creative Skills→
nicholasgriffintnnicholasgriffintn
2

frontend-design

Design frontend interfaces with typography, color, motion, and layout guidelines.

Community
Intermediate
SL-A-SHSL-A-SH

adapt

Adapt existing designs across devices with responsive breakpoints and touch target sizing.

Community
Intermediate
Dzakiamriz22Dzakiamriz22
1

responsive

Implement mobile-first responsive layouts with CSS Grid, Flexbox, and Tailwind breakpoints.

Community
Intermediate
duanbiao2000duanbiao2000
3

responsive-design

Build responsive interfaces with container queries, fluid typography, and grid layouts.

Community
Advanced