skills.rest
julianromli
julianromliCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

adapt

Define responsive layouts and interaction adjustments for new screen sizes.

Updated Apr 13, 2026
Search Tags:#mobile-first#breakpoints#responsive-design#container-queries#touch-targets#fluid-layouts
One-click install
npx skills add https://github.com/julianromli/dikara-portfolio --skill adapt-julianromli
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/julianromli/dikara-portfolio/tree/main/.cursor/skills/skills/adapt
Command: npx skills add https://github.com/julianromli/dikara-portfolio --skill adapt-julianromli

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps designers and teams transform interfaces so they remain usable and effective across different screen sizes, input methods, and usage contexts, preventing broken layouts, unusable controls, and degraded accessibility.

Core Features & Use Cases

  • Layout strategies: Guidance on single-column mobile flows, master-detail tablet patterns, and multi-column desktop layouts with max-widths and fluid sizing.
  • Interaction adjustments: Recommendations for touch targets, removal of hover-dependent patterns, thumb-first placement, and gesture affordances.
  • Practical scenarios: Converting a desktop portfolio to mobile-first design, producing email-friendly templates, preparing print-friendly pages, and adapting web apps for TV or wearable screens.
  • Verification & testing: Advice on real-device testing, orientation checks, network throttling, and cross-browser validation.

Quick Start

Convert my desktop design to a mobile-first layout by specifying the source context, target devices, and primary content priorities so you can receive concrete breakpoints, layout changes, and touch-target guidelines.

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 mobile-first responsive layout?▼

To convert a desktop design to a mobile-first responsive layout, specify the source context, target devices, and primary content priorities to receive concrete breakpoints, fluid sizing changes, and touch-target guidelines.

What are the best practices for responsive design across tablet and TV interfaces?▼

Effective responsive design across tablet and TV interfaces uses master-detail patterns for tablets and fluid layouts for TVs, adjusting interaction methods and validating rendering on actual devices.

How do container queries improve fluid layouts during device migration?▼

Container queries improve fluid layouts during device migration by allowing components to adapt based on their parent container dimensions rather than the global viewport, preventing broken layouts.

Does this approach support adapting web apps for touch targets and wearable screens?▼

Yes, adapting web apps for touch targets and wearable screens is supported by defining thumb-first placement, adjusting touch target sizes, removing hover-dependent patterns, and adding gesture affordances.

When should I not use a single-column mobile flow for responsive design?▼

You should avoid a single-column mobile flow when migrating to tablet or desktop interfaces, as these larger contexts require master-detail patterns or multi-column fluid layouts with defined breakpoints.

Related Skills

Explore More Design & Creative Skills→
jimiryquaijimiryquai

adapt

Adapt UI/UX designs across mobile, tablet, desktop, and print contexts.

Community
Advanced
krzemienskikrzemienski
2

responsive-validation

Validate responsive UI layouts across device viewports and breakpoints.

Community
Advanced
mrodrigues1mrodrigues1

responsive-design

Implement responsive web layouts with container queries and fluid scaling.

Community
Intermediate
WdanielBWdanielB

responsive-design

Implement responsive layouts with container queries, fluid typography, CSS Grid, and mobile-first breakpoints.

Community
Intermediate