skills.rest
cenjie
cenjieCOMMUNITY
Explore all skills by this author →
GitHub

i-adapt

Adapt desktop web designs to mobile, tablet, and print layouts with CSS Grid and Flexbox.

Updated May 17, 2026
Search Tags:#layout#responsive design#mobile#breakpoints#adaptive design#touch targets
One-click install
npx skills add https://github.com/cenjie/skills --skill i-adapt-cenjie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: i-adapt
Source: https://github.com/cenjie/skills/tree/main/skills/i-adapt
Command: npx skills add https://github.com/cenjie/skills --skill i-adapt-cenjie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Adapting existing designs to work effectively across different screen sizes, devices, platforms, and usage contexts so interfaces remain usable, discoverable, and performant when platform assumptions change.

Core Features & Use Cases

  • Context analysis: Identify source assumptions (input methods, connection, screen size) and define target contexts such as mobile, tablet, desktop, print, or email.
  • Layout & interaction strategies: Provide concrete layout, navigation, and interaction patterns (single-column mobile, two-column tablet, multi-column desktop, touch target sizing, and no-hover alternatives).
  • Implementation guidance: Recommend technical techniques like CSS Grid/Flexbox, container queries, responsive images, and breakpoint strategies, plus testing protocols on real devices.
  • Use Case: Convert a desktop web dashboard into a mobile-first app by prioritizing primary content, reworking navigation to a bottom bar or hamburger menu, increasing touch targets, and testing on real phones and tablets.

Quick Start

Adapt the desktop product page to a mobile-first layout that prioritizes primary content, converts multi-column areas into a single-column stack, and increases interactive touch targets to a minimum of 44x44px.

Frequently Asked Questions about i-adapt

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

FAQPage Schema
How do I make a responsive design that adapts to mobile and tablet screens?▼

Responsive design adapts interfaces to varying screen sizes by establishing source and target contexts, choosing appropriate breakpoints or container queries, and implementing layout changes using CSS Grid or Flexbox.

What is the best way to convert a desktop web dashboard into a mobile-first layout?▼

Converting a desktop dashboard to mobile requires prioritizing primary content into a single-column stack, reworking navigation to a bottom bar or hamburger menu, and increasing touch targets to a minimum of 44x44px.

How do touch targets and navigation change for adaptive design across devices?▼

Adaptive design requires increasing touch target sizing for mobile interactions and rethinking navigation patterns to provide no-hover alternatives, ensuring interfaces remain usable without a mouse.

When should I use container queries instead of breakpoints for responsive layouts?▼

Container queries apply when adapting layouts within specific component boundaries, while breakpoints target viewport widths; both validate responsive design changes and content hierarchy on real devices and orientations.

Does this approach work for converting web interfaces to print and email layouts?▼

Adapting web interfaces to print and email layouts works by defining these as target contexts, rethinking content hierarchy, and applying appropriate CSS layout strategies to ensure discoverability and performance.

Related Skills

Explore More Design & Creative Skills→
luyangliuableluyangliuable

adapt

Rework existing designs for different devices, screen sizes, and input methods.

Community
Advanced
jean-sotiljean-sotil

adapt

Adapt user interface designs across devices, screen sizes, and contexts.

Community
Advanced
TomytoolTomytool

tailwindcss-advanced-layouts

Provides Tailwind CSS advanced layout techniques including CSS Grid, Flexbox, Container Queries, positioning, scrolling, aspect ratios, spacing, multi-columns, responsive patterns, print styles.

Community
Advanced
dpieterszdpietersz

Frontend Responsive

Guide mobile-first layouts, breakpoints, and responsive CSS techniques across devices.

Community
Intermediate