skills.rest
shuretokki
shuretokkiCOMMUNITY
Explore all skills by this author →
GitHub

adapt

Apply responsive breakpoints, fluid layouts, and touch targets across mobile, tablet, and desktop.

Updated Aug 23, 2026
Search Tags:#accessibility#cross-device#ux#breakpoints#responsive-design#mobile-design#adapt
One-click install
npx skills add https://github.com/shuretokki/void --skill adapt-shuretokki
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/shuretokki/void/tree/main/.agents/skills/adapt
Command: npx skills add https://github.com/shuretokki/void --skill adapt-shuretokki

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.

Core Features & Use Cases

  • Responsive breakpoint planning and fluid layouts across mobile, tablet, and desktop
  • Touch-friendly interactions and accessibility-conscious navigation patterns
  • Context-aware adaptation guidance for different viewports and platforms

Quick Start

Adapt the current UI for mobile and tablet by applying breakpoints and touch-friendly layouts.

Frequently Asked Questions about adapt

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

FAQPage Schema
How do I make my UI design responsive across mobile, tablet, and desktop?▼

Responsive design adapts your UI across mobile, tablet, and desktop by applying fluid layouts, breakpoints, and touch targets to ensure a consistent cross-device user experience. It defines layout, interaction, and accessibility requirements for different viewports.

What are the best practices for planning responsive breakpoints?▼

Planning responsive breakpoints involves defining fluid layouts and touch-friendly interactions tailored for mobile, tablet, and desktop contexts. This cross-device approach ensures accessibility-conscious navigation and context-aware adaptation across different viewports and platforms.

When do I need to adapt my design for cross-device compatibility?▼

You need to adapt designs for cross-device compatibility when a UI must work across different screen sizes, devices, or platforms. This involves implementing fluid layouts, touch targets, and accessibility-conscious navigation patterns for consistent context-aware usage.

Does responsive design automatically handle touch targets and accessibility?▼

Responsive design addresses touch targets and accessibility by applying touch-friendly interactions and accessibility-conscious navigation patterns. It defines specific interaction and accessibility strategy requirements to guide cross-context design work across mobile and desktop environments.

Related Skills

Explore More Design & Creative Skills→
camilooscargbaptistacamilooscargbaptista
7

ux-review

Evaluate UI mockups for usability, accessibility, and interaction issues, producing prioritized recommendations.

Community
Intermediate
aldasorolauti-pixelaldasorolauti-pixel

responsive-design

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

Community
Advanced
fgarofalo56fgarofalo56
6

component-library

Develop reusable component libraries with design tokens and Storybook documentation.

Community
Advanced
elwa2elwa2

adapt

Adapt design layouts for mobile, tablet, and desktop environments.

Community
Advanced