Does it support print-specific styling?

Absolutely. It creates print adaptations by removing interactive elements like navigation and footers, adding logical page breaks, and converting colors for black-and-white printing.

Can this skill help with email design?

Yes, it specifically adapts web layouts into email-friendly structures by using narrow 600px widths, inline CSS, and table-based layouts for maximum client compatibility.

How does the Adapt skill handle mobile layouts?

It implements mobile-first strategies like vertical stacking, single-column layouts, touch-target optimization (minimum 44x44px), and navigation patterns such as bottom sheets and hamburger menus.

What techniques are used for responsive adjustments?

The skill utilizes modern CSS techniques including fluid sizing with clamp(), container queries for component-level adaptation, and content-driven breakpoints rather than generic device sizes.

Responsive UI Adapt

Name: Responsive UI Adapt
Author: devadalberto

bydevadalberto

0•

デザインツール

Adapts frontend designs and components to ensure consistent user experiences across mobile, tablet, desktop, print, and email environments.

The Adapt skill empowers Claude to transform existing web interfaces into context-aware designs that work seamlessly across diverse environments. By analyzing source contexts and applying platform-specific strategies—such as touch-target optimization for mobile, multi-column layouts for desktop, and table-based structures for email—it moves beyond simple scaling to rethink the user experience for every device. It integrates deeply with design principles to handle layout reflows, interaction shifts, and content prioritization, ensuring functional and aesthetic consistency regardless of the target platform.

主な機能

01Touch-first interaction optimization including minimum 44px tap targets

020 GitHub stars

03Specialized adaptations for print layouts and HTML email compatibility

04Content prioritization through progressive disclosure and fluid typography

05Context-aware layout refactoring using Flexbox, Grid, and Container Queries

06Platform-specific navigation transformations like hamburger menus and bottom bars

ユースケース

01Converting a desktop-first dashboard into a touch-optimized mobile application

02Optimizing complex data tables for tablet orientations and smaller viewports

03Refactoring modern web components into compatible HTML email templates

主な機能

01Touch-first interaction optimization including minimum 44px tap targets

020 GitHub stars

03Specialized adaptations for print layouts and HTML email compatibility

04Content prioritization through progressive disclosure and fluid typography

05Context-aware layout refactoring using Flexbox, Grid, and Container Queries

06Platform-specific navigation transformations like hamburger menus and bottom bars

ユースケース

01Converting a desktop-first dashboard into a touch-optimized mobile application

02Optimizing complex data tables for tablet orientations and smaller viewports

03Refactoring modern web components into compatible HTML email templates