Can it help with email-specific design constraints?

Yes, it includes specialized strategies for email adaptation, focusing on narrow widths, table-based layouts, and inline CSS for maximum compatibility.

How does it handle mobile interactions?

It implements touch-friendly patterns such as 44x44px minimum targets, removal of hover dependencies, and bottom-focused navigation for better reachability.

Does it require other skills to work?

It is recommended to use this alongside the frontend-design skill to ensure core design principles and context gathering are established before adaptation begins.

Is this skill useful for porting mobile apps to desktop?

Absolutely. It provides strategies to expand mobile layouts into multi-column desktop views, integrating hover states, keyboard shortcuts, and richer data visualizations.

Does this skill only handle CSS media queries?

No, it provides comprehensive strategies for layout, interaction, navigation, and content prioritization tailored to specific device contexts beyond simple CSS breakpoints.

Adapt Cross-Platform Designer

Name: Adapt Cross-Platform Designer
Author: Moliboy5000

byMoliboy5000

0•

设计工具

Adapts frontend designs and user interfaces to function flawlessly across different screen sizes, devices, and platforms.

The Adapt skill empowers Claude to transform existing designs into context-aware experiences, ensuring consistency whether a user is on a mobile phone, a desktop browser, or even viewing a printed document. It provides structured strategies for layout reflowing, touch-target optimization, and content prioritization, moving beyond simple scaling to rethink interactions for specific environments like email clients or tablets. By following strict device-specific protocols, it helps developers bridge the gap between platforms while maintaining high usability and brand integrity.

主要功能

01Detailed cross-platform verification and testing protocols

02Touch-first interaction strategies for mobile and tablet devices

03Context-aware layout reflowing using CSS Grid and Flexbox

04Specialized adaptation patterns for Print and Email environments

050 GitHub stars

06Progressive disclosure and content prioritization techniques

使用场景

01Transitioning a mobile-first app design to a feature-rich desktop experience with hover states and keyboard shortcuts

02Converting a complex desktop dashboard into a responsive, thumb-friendly mobile interface

03Optimizing a web page for high-fidelity printing or newsletter-compatible email layouts

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add moliboy5000/.claude adapt

For use in Claude.ai and ChatGPT