skills.rest
fauzanazz
fauzanazzCOMMUNITY
Explore all skills by this author →
GitHub

adapt

Adapts designs across screen sizes, devices, and platforms using breakpoints and fluid layouts.

Updated Apr 1, 2026
Search Tags:#responsive design#cross-device#breakpoints#adaptation#fluid layout#touch targets#mobile layout
One-click install
npx skills add https://github.com/fauzanazz/katalis --skill adapt-fauzanazz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/fauzanazz/katalis/tree/main/.agents/skills/adapt
Command: npx skills add https://github.com/fauzanazz/katalis --skill adapt-fauzanazz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designs built for one context often break or feel wrong on other devices — hover menus fail on touchscreens, multi-column layouts overflow on phones, and desktop patterns confuse mobile users. This Skill provides a structured workflow for rethinking and implementing designs across different screen sizes, input methods, and platforms. ## Core Features & Use Cases - Context Assessment: Analyzes the source design's assumptions (screen size, input method, connection speed) and identifies what won't fit, won't work, or is inappropriate in the target context. - Platform-Specific Strategies: Provides concrete adaptation playbooks for mobile, tablet, desktop, print, and email — covering layout, interaction, content, and navigation patterns for each. - Implementation Guidance: Covers responsive breakpoints, CSS Grid/Flexbox reflow, container queries, clamp() fluid sizing, 44x44px touch targets, and responsive images. - Use Case: You have a desktop web dashboard and need it to work on phones. The Skill walks you through converting multi-column layouts to single-column stacking, replacing hover states with touch feedback, and moving navigation to a bottom bar. ## Quick Start Ask the AI to adapt your desktop dashboard design for mobile devices with touch-friendly targets and a single-column layout.

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 website design for mobile devices?▼

Convert multi-column layouts to single-column vertical stacking, replace hover interactions with touch feedback, and move navigation to a hamburger menu or bottom bar. Ensure touch targets are at least 44x44px and text is at least 16px.

What breakpoints should I use for responsive design?▼

Common breakpoints are 320-767px for mobile, 768-1023px for tablet, and 1024px+ for desktop. However, content-driven breakpoints — where the design actually breaks — are preferred over generic device-based values.

What is the minimum touch target size for mobile design?▼

Touch targets should be at least 44x44 pixels with adequate spacing between interactive elements. Hover-dependent interactions must be replaced since touch devices have no hover state.

How do I adapt a web page for print?▼

Remove navigation and interactive elements, add page breaks at logical points, expand hidden content like full URLs, and include page numbers and headers. Convert colors to print-friendly black and white or limited palettes.

Why does my responsive design fail on real devices but work in DevTools?▼

Browser device emulation does not perfectly replicate real hardware behavior, including touch handling, rendering performance, and orientation changes. Always verify adaptations on actual phones, tablets, and desktops across browsers and operating systems.

Related Skills

Explore More Design & Creative Skills→
primaERPprimaERP

adapt

Plan responsive design adaptations across mobile, tablet, and desktop screens.

Official
Advanced
TheCardGoatTheCardGoat
14

adapt

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

Official
Intermediate
fusenginefusengine
22

validating-accessibility

Validate digital interfaces against WCAG 2.2 Level AA accessibility standards.

Community
Intermediate
AO-HySAO-HyS

adapt

Adapts designs across screen sizes, devices, and platforms using breakpoints and fluid layouts.

Official
Basic