Does this skill only handle CSS breakpoints?

No, it goes beyond simple breakpoints by providing comprehensive strategies for interaction patterns, input methods, and content prioritization specific to each device context.

How does it handle mobile-specific accessibility?

The skill enforces a 44x44px minimum for touch targets and suggests 'thumbs-first' design patterns to ensure ease of use on handheld devices.

Does it work with existing design systems?

Yes, the skill is designed to gather context from your current codebase first, ensuring adaptations respect your existing brand, legal, and accessibility requirements.

Can it help with legacy email template design?

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

Design Adaptation

Name: Design Adaptation
Author: jessepcc

byjessepcc

0•

设计工具

Adapts user interfaces and designs to ensure a seamless experience across diverse screen sizes, devices, and platforms.

The Design Adaptation skill empowers Claude to transform existing frontend experiences for any target environment, ranging from mobile and tablet screens to print layouts and email clients. It moves beyond basic responsive scaling by analyzing specific device constraints—such as touch targets for mobile, hover states for desktop, and table-based layouts for email—to suggest intelligent refactoring of layout, navigation, and content hierarchy. By focusing on context-gathering and platform-appropriate behavior, this skill ensures that applications maintain functional consistency while feeling native to every user touchpoint.

主要功能

01Context-aware layout refactoring using Modern CSS (Grid, Flexbox, Container Queries)

02Navigation transformation patterns like hamburger menus and bottom bars

03Interaction optimization including touch target sizing and gesture support

040 GitHub stars

05Multi-platform adaptation strategies for Mobile, Tablet, Desktop, Print, and Email

06Progressive disclosure and content prioritization for constrained environments

使用场景

01Optimizing web content for high-fidelity printing and document generation

02Converting a complex desktop dashboard into a thumb-friendly mobile application

03Refactoring a mobile-first UI to utilize expansive horizontal space on 4K monitors

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jessepcc/contexted adapt

For use in Claude.ai and ChatGPT