Adapt existing designs across devices with responsive breakpoints and touch target sizing.
npx skills add https://github.com/SL-A-SH/my-portfolio --skill adapt-sl-a-sh
Please help me install this Agent Skill. Skill: adapt Source: https://github.com/SL-A-SH/my-portfolio/tree/main/.claude/skills/adapt Command: npx skills add https://github.com/SL-A-SH/my-portfolio --skill adapt-sl-a-sh
This Skill helps designers and developers convert and adapt an existing design so it works effectively across differing screen sizes, input methods, and usage contexts while preserving brand and functionality.
Adapt the desktop homepage design to a mobile-first single-column layout with larger touch targets, simplified navigation, and prioritized primary content.
High-intent search queries and answers about installing and using this skill.
Responsive design adapts web layouts to different screen sizes using breakpoints and container queries. It ensures consistent UX across devices by reflowing content, resizing touch targets, and adjusting navigation for mobile, tablet, and desktop contexts.
Adapting email design for cross-platform viewing requires layout reflow, interaction changes, and content prioritization. Apply platform-specific tactics to ensure functionality and branding remain consistent across differing screen sizes and email clients.
Determine responsive breakpoints by assessing target devices, input methods, and usage contexts. Identify source assumptions and connection constraints to define adaptation priorities that satisfy cross-device testing requirements.
Adaptive design uses progressive disclosure for tablet and mobile interactions to manage content prioritization. It helps simplify navigation and layout reflow, ensuring touch target sizing and interaction changes meet usage expectations.
Relying solely on responsive breakpoints limits cross-platform UX because it ignores input method changes, connection constraints, and usage contexts. Effective adaptive design requires platform-specific tactics, container queries, and real-device testing.
metedataEvaluate responsive design adaptations across screen sizes and input modalities.
ZendevveAdapt digital designs for mobile, tablet, desktop, print, and email contexts.
HieubkavImplement responsive mobile-first layouts with fluid containers, breakpoints, and touch targets.
JoniSirvioGenerate cross-context design adaptation plans for mobile, tablet, and desktop.
