skills.rest
jatwell93
jatwell93COMMUNITY
Explore all skills by this author →
GitHub

adapt

Adapt UI designs across devices with breakpoints, fluid grids, and touch targets.

Updated Nov 4, 2025
Search Tags:#accessibility#cross-device#design-principles#breakpoints#adaptation#responsive-design
One-click install
npx skills add https://github.com/jatwell93/pharmacy-heatmap --skill adapt-jatwell93
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/jatwell93/pharmacy-heatmap/tree/main/.agents/skills/adapt
Command: npx skills add https://github.com/jatwell93/pharmacy-heatmap --skill adapt-jatwell93

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing interfaces that feel native and functional across a wide range of devices and contexts is challenging. This Skill provides a structured approach to adapting layouts, breakpoints, and touch targets so products remain usable and consistent.

Core Features & Use Cases

  • Context-driven adaptation: define device targets (mobile, tablet, desktop, print) and map design rules to each.
  • Breakpoint and layout strategy: implement responsive grids, fluid containers, and adaptive typography for varying viewports.
  • Touch-friendly UX: establish accessible hit targets and gesture-friendly interactions across devices.

Quick Start

Provide the source context and target device, then apply the Mobile Adaptation strategy to produce a responsive layout.

Frequently Asked Questions about adapt

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

FAQPage Schema
How do I adapt UI designs for cross-device responsive layouts?▼

Responsive design adapts UI layouts by defining device targets, mapping design rules to each, and implementing fluid grids and breakpoints so interfaces remain usable and consistent across mobile, tablet, desktop, and print contexts.

What's the best way to plan breakpoints for mobile and tablet interfaces?▼

Planning breakpoints for mobile and tablet interfaces requires a structured adaptation strategy that establishes responsive grids, fluid containers, and adaptive typography to match varying viewport sizes and touch target requirements.

How do I make touch targets accessible and gesture-friendly on mobile apps?▼

Making touch targets accessible on mobile apps requires establishing accessible hit target sizes and gesture-friendly interactions, ensuring the adapted interface performs well and feels native across varying device contexts.

Can I use responsive design principles to adapt layouts for print contexts?▼

Responsive design principles can adapt layouts for print contexts by defining print as a target device and mapping specific design rules, ensuring the interface remains functional and consistent when transferred from screen to print.

Do I need existing design assets to start an adaptation planning workflow?▼

Adaptation planning requires providing source context and a target device to apply the mobile adaptation strategy, which then produces a responsive layout with actionable guidance for the specified cross-device interface.

Related Skills

Explore More Design & Creative Skills→
trydyddtrydydd

i-adapt

Creates adaptive design plans specifying layouts, roles, and cross-device behavior for given contexts.

Community
Advanced
oborchersoborchers
28

responsive-design

Implement responsive web design with CSS Grid, container queries, and responsive images.

Community
Intermediate
Dzakiamriz22Dzakiamriz22
1

responsive

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

Community
Intermediate
HAR5HA-7663HAR5HA-7663

adapt

Adapt designs across screen sizes, devices, and contexts for usability.

Community
Intermediate