skills.rest
gmolike
gmolikeCOMMUNITY
Explore all skills by this author →
GitHub

adapt

Adapts designs across screen sizes, devices, input methods, and platforms.

Updated Mar 4, 2026
Search Tags:#responsive design#cross-platform#ux#breakpoints#touch targets#mobile adaptation#print styles
One-click install
npx skills add https://github.com/gmolike/Claude-Template --skill adapt-gmolike
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/gmolike/Claude-Template/tree/main/.agents/skills/adapt
Command: npx skills add https://github.com/gmolike/Claude-Template --skill adapt-gmolike

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designs built for one context often break or feel wrong in another: desktop layouts fail on mobile, hover interactions don't work on touch, and web content prints poorly. This Skill provides a structured process to analyze, plan, implement, and verify design adaptations across contexts. ## Core Features & Use Cases - Context Analysis: Identifies source assumptions (screen size, input method, connection speed) and target constraints before adapting. - Platform-Specific Strategies: Provides concrete layout, interaction, content, and navigation strategies for mobile, tablet, desktop, print, and email adaptations. - Implementation Guidance: Covers responsive breakpoints, CSS Grid/Flexbox, container queries, touch target sizing (44x44px minimum), and progressive disclosure. - Use Case: You built a desktop web dashboard and need it to work on phones. The Skill guides you to convert multi-column layouts to single-column stacks, replace hover states with touch feedback, and move navigation to a bottom bar. ## Quick Start Ask the AI to adapt your dashboard component for mobile devices with touch input and verify it on real devices.

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

Convert multi-column layouts to single-column vertical stacks, replace hover interactions with touch targets of at least 44x44px, move navigation to a hamburger menu or bottom bar, and use progressive disclosure to prioritize primary content.

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

Touch targets should be at least 44x44px with adequate spacing between interactive elements. Remove hover-dependent interactions and add touch feedback such as ripples or highlights.

How do I make a web page print-friendly?▼

Remove navigation and interactive elements, add page breaks at logical points, expand hidden content like full URLs, include page numbers and metadata, and convert charts to print-friendly versions with proper margins.

Should I use device breakpoints or content-driven breakpoints?▼

Prefer content-driven breakpoints where the design actually breaks, rather than generic device widths. Standard ranges (320-767px mobile, 768-1023px tablet, 1024px+ desktop) are starting points, not rules.

Why is browser DevTools device emulation not enough for testing?▼

Emulation does not perfectly replicate real device behavior, touch input, or performance constraints. Test on actual phones and tablets across orientations, browsers, operating systems, and throttled network connections.

Related Skills

Explore More Design & Creative Skills→
launchapp-devlaunchapp-dev
38

wireframe-spec

Define wireframe layouts as annotated specifications encoding content priority and component placement.

Official
Intermediate
chroniicallydiistractedchroniicallydiistracted

adapt

Adapt existing designs across platforms while preserving core functionality and usability.

Community
Advanced
Camilo8902Camilo8902

accessibility-auditor

Audit web pages for WCAG 2.1 compliance with ARIA and keyboard navigation.

Community
Advanced
heaptracetechnologyheaptracetechnology
13

platform-adapt

Adapt a single codebase into native iOS and Android experiences with platform-specific navigation and UI.

Community
Advanced