adapt

Plan responsive design adaptations across mobile, tablet, desktop, and print contexts.

Updated Apr 29, 2026

Search Tags:#accessibility #layout #cross-device #user-experience #responsive-design #design-systems #adapt

Ready to run

npx skills add https://github.com/davidbasilefilho/skills --skill adapt-davidbasilefilho

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/davidbasilefilho/skills/tree/main/skills/adapt
Command: npx skills add https://github.com/davidbasilefilho/skills --skill adapt-davidbasilefilho

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Adapts designs so they work across different screen sizes, devices, contexts, and platforms, reducing redesign time and friction.

Core Features & Use Cases

Guided adaptation: Provides a structured approach to responsive layouts, interaction targets, and content prioritization across mobile, tablet, and desktop.
Context-aware planning: Helps plan device- and context-specific strategies like flow, navigation, and typography adjustments.
Use Case: When redesigning a product for mobile, use this Skill to outline breakpoints, touch targets, and content hierarchy.

Quick Start

Use this Skill to craft a responsive strategy by first gathering target devices, breakpoints, and content priorities.

Frequently Asked Questions about adapt

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

FAQPage Schema

How do I adapt a design for multiple screen sizes and devices?▼

To adapt designs for multiple screens, use a structured responsive design process that defines breakpoints, touch targets, and content prioritization across mobile, tablet, and desktop contexts. This ensures cross-device usability and reduces redesign friction.

What is the best way to plan content hierarchy for a mobile layout?▼

Planning content hierarchy for a mobile layout requires context-aware content prioritization. You must gather target devices and breakpoints first, then structure the navigation flow, typography adjustments, and interaction targets to fit the mobile context.

How do I determine the right breakpoints for cross-device usability?▼

Determining breakpoints for cross-device usability involves mapping target devices and screen sizes within your design system. You then apply a structured process to validate layout adaptations and interaction strategies across those specific contexts.

Can I use this approach to adapt a desktop design for print contexts?▼

Yes, you can adapt desktop designs for print contexts using this approach. The structured adaptation process supports layout, interaction, and content strategy planning across mobile, tablet, desktop, and print adaptations to ensure proper output.

Why does my responsive design layout break when moving from tablet to desktop?▼

Responsive design layouts break across tablet and desktop when context-aware strategies like flow, navigation, and typography adjustments are not planned. Validating breakpoints and touch targets across contexts prevents these cross-device usability issues.