skills.rest
riabtsev
riabtsevCOMMUNITY
Explore all skills by this author →
GitHub

adapt

Adapt UI designs across screen sizes with breakpoint planning and responsive techniques.

Updated May 5, 2026
Search Tags:#responsive design#breakpoints#touch targets#layout adaptation#cross-device UX#navigation redesign
One-click install
npx skills add https://github.com/riabtsev/viscore_main --skill adapt-riabtsev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/riabtsev/viscore_main/tree/main/.github/skills/adapt
Command: npx skills add https://github.com/riabtsev/viscore_main --skill adapt-riabtsev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of broken or unusable UI when a design is moved to a new screen size, device type, or usage context, ensuring the experience feels intentional rather than merely resized.

Core Features & Use Cases

  • Responsive layout strategy: Convert desktop multi-column layouts into single-column mobile flows, and choose appropriate tablet/desktop structures.
  • Touch-first interaction adjustments: Ensure tap targets, spacing, and interaction patterns work on touch devices without relying on hover.
  • Context-specific content & navigation: Apply progressive disclosure, simplify navigation, and tailor patterns for print and other constrained platforms (e.g., email).

Quick Start

Provide the target device and context (for example: “mobile portrait”), describe the current desktop layout assumptions, and ask the AI to produce a breakpoint plan plus concrete layout, interaction, and navigation changes to adapt the design.

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 UI design for mobile devices without just scaling it down?▼

Responsive redesign involves rethinking layout, interaction, and content strategy by planning breakpoints, adjusting touch targets, and converting multi-column structures into single-column mobile flows using grid or flex techniques.

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

Breakpoint planning for cross-device UX requires analyzing target screen sizes and usage contexts to choose appropriate tablet and desktop structures, applying responsive techniques like container queries, and verifying interactions across devices.

How do I make desktop interactions work on touch-first devices?▼

Touch-first interaction adjustments ensure tap targets and spacing function without relying on hover, requiring navigation redesign and progressive disclosure to simplify patterns for touch devices.

Can I adapt a web layout for print and email-like constrained rendering?▼

Context-specific content adaptation tailors layout and navigation patterns for constrained platforms like print and email, applying progressive disclosure and simplified rendering strategies rather than standard responsive scaling.

Why does my responsive design break when moving across screen sizes and devices?▼

Responsive design breaks across new screen sizes when it relies on mere resizing instead of intentional layout adaptation, requiring thorough cross-device verification and re-evaluated content strategy for different usage contexts.

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
kyamsSRLkyamsSRL

responsive-design

Implement responsive layouts with container queries, fluid typography, and CSS Grid.

Community
Intermediate
heaptracetechnologyheaptracetechnology
13

responsive-design

Plan mobile-first responsive layouts with breakpoints and content reflow rules.

Community
Advanced