How does this skill handle different input methods?

It differentiates between pointer/mouse and touch interactions, automatically adjusting target sizes and removing hover dependencies for mobile and tablet contexts.

Can it convert web designs to email templates?

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

Does it just hide elements on smaller screens?

No, the skill prioritizes rethinking the experience through progressive disclosure and content refactoring rather than simply hiding core functionality.

What modern CSS techniques does the Adapt skill use?

It leverages modern standards including CSS Grid, Flexbox, Container Queries, and fluid typography using the clamp() function.

Adaptive Design Engine

Name: Adaptive Design Engine
Author: pbakaus

bypbakaus

•

18,680

•

设计工具

Adapts existing UI designs to work seamlessly across mobile, tablet, desktop, print, and email contexts using modern CSS and UX principles.

The Adapt skill empowers Claude to transform static or single-context designs into fluid, multi-platform experiences. It goes beyond simple scaling by applying context-specific strategies for touch targets, navigation patterns, and content prioritization. Whether converting a desktop dashboard for mobile use or optimizing a web page for print and email, this skill ensures functional consistency while adhering to platform-specific user expectations and modern technical constraints like CSS Grid and Container Queries.

主要功能

01Multi-platform transformation for Mobile, Tablet, Desktop, Print, and Email.

02Touch-target optimization ensuring a minimum 44x44px interactive area.

03Navigation pattern adaptation including hamburger menus and bottom navigation bars.

04Fluid layout implementation using CSS Grid, Flexbox, and Container Queries.

05Strategic content refactoring and progressive disclosure for smaller viewports.

0618,680 GitHub stars

使用场景

01Converting a complex desktop dashboard into a thumb-friendly mobile interface.

02Optimizing web content for professional print layouts and high-compatibility email templates.

03Refactoring fixed-width legacy layouts into modern, fluid-responsive designs.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add pbakaus/impeccable adapt

For use in Claude.ai and ChatGPT