skills.rest
Gyanano
GyananoCOMMUNITY
Explore all skills by this author →
GitHub

adapt

Adapt desktop layouts to mobile, tablet, print, or email contexts.

5|Updated Mar 27, 2026
Search Tags:#cross-device#responsive-design#context-gathering#touch-ux#layout-adaptation#breakpoint-planning
One-click install
npx skills add https://github.com/Gyanano/Bower --skill adapt-gyanano
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/Gyanano/Bower/tree/main/.agents/skills/adapt
Command: npx skills add https://github.com/Gyanano/Bower --skill adapt-gyanano

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents design mismatches when moving products between devices by ensuring layouts, interactions, and content align with the new screen sizes and input types without losing brand clarity or usability. It enforces the Context Gathering Protocol so you understand the original assumptions before planning the adaptation to mobile, tablet, desktop, print, or email contexts.

Core Features & Use Cases

  • Context Gathering Protocol: Invoke the linked frontend-design guidance, run teach-impeccable if needed, and capture the source assumptions, target devices, and usage contexts before touching the layout.
  • Adaptation Playbooks: Choose between mobile, tablet, desktop, print, and email strategies covering layout, navigation, touch targets, and interaction expectations, then map responsive breakpoints and container queries accordingly.
  • Verification Routine: Test on real devices, multiple orientations, browsers, OSes, and input methods while keeping progressive disclosure and touch accessibility consistent with the core experience.
  • Use Case: Convert a desktop-heavy archive dashboard into a mobile-friendly browsing flow with condensed navigation, larger tap zones, and prioritized content.

Quick Start

Ask adapt to inventory the desktop layout and outline a mobile-first plan with breakpoints, touch targets, and navigation simplifications.

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 layout for mobile and tablet screens without losing usability?▼

To adapt a desktop layout for mobile and tablet, analyze original context assumptions and target devices, then map responsive breakpoints, layout grids, and touch targets to align with new screen sizes and interaction types while preserving brand consistency.

What is the best way to plan responsive breakpoints for cross-device design adaptation?▼

The best way to plan responsive breakpoints is by running a context gathering protocol to capture source assumptions and target usage contexts, then selecting mobile, tablet, desktop, print, or email playbooks to map container queries and layout grids accordingly.

Does converting a desktop interface to touch UX require changing navigation patterns?▼

Converting a desktop interface to touch UX requires simplifying navigation patterns, enlarging tap zones, and prioritizing content to ensure interaction expectations and touch accessibility align with the new device context.

Can I use the same layout adaptation strategy for print and email design outputs?▼

You can use the same adaptation strategy for print and email by selecting their specific playbooks within the workflow, which cover distinct layout grids, navigation changes, and interaction expectations tailored for those static formats.

How do I verify a responsive design works across multiple device orientations and input methods?▼

Verify responsive design by running a dedicated testing routine on real devices across multiple orientations, browsers, OSes, and input methods to ensure progressive disclosure and touch accessibility remain consistent with the core experience.

Related Skills

Explore More Design & Creative Skills→
microlinkhqmicrolinkhq
142

adapt

Adapt existing UI designs across devices, platforms, and usage contexts.

Official
Intermediate
TheCardGoatTheCardGoat
14

adapt

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

Official
Intermediate
wernerglinkawernerglinka

css-layout-development

Create container-aware CSS layouts using container queries and fluid typography.

Community
Intermediate
get-convexget-convex
9

adapt

Plan responsive layouts across mobile, tablet, and desktop breakpoints.

Official
Advanced