Adapt user interface designs across devices, screen sizes, and contexts.
npx skills add https://github.com/jean-sotil/presskitpro-webapp --skill adapt-jean-sotil
Please help me install this Agent Skill. Skill: adapt Source: https://github.com/jean-sotil/presskitpro-webapp/tree/main/.agents/skills/adapt Command: npx skills add https://github.com/jean-sotil/presskitpro-webapp --skill adapt-jean-sotil
It solves the problem of designs breaking or feeling unusable when screen sizes, input methods, or usage contexts change, causing poor readability, awkward navigation, and inaccessible interactions.
Use Case: A marketing page designed for desktop needs to work for mobile shoppers; adapt navigation, spacing, and content hierarchy so actions are reachable with thumbs and key information remains visible without hover.
Adapt the current UI for mobile by identifying the intended desktop assumptions, selecting mobile-first breakpoints, and rewriting layout, navigation, touch targets, and content hierarchy to match real thumb-and-tap usage.
High-intent search queries and answers about installing and using this skill.
Adapt desktop UI for mobile responsive layouts by identifying original desktop assumptions, selecting mobile-first breakpoints, and rewriting layout to single-column, touch-first patterns with 44x44px minimum tap targets.
Converting a web layout for print formatting requires applying page-break strategies, restructuring content hierarchy, and removing hover-dependent interactions to ensure readability and proper pagination across physical pages.
Mobile navigation and touch targets require progressive disclosure patterns, minimum 44x44px tap zones, and reduced hover dependence, ensuring key actions remain reachable via thumb interactions without hidden menus.
Responsive design adaptation works for email formatting by restructuring multi-panel desktop layouts into single-column, table-based approaches that ensure content readability and interaction safety across email clients.
Responsive layouts break across tablet and desktop breakpoints when adaptation relies on simple scaling rather than rethinking hybrid two-column and multi-panel strategies, requiring context-aware breakpoint planning and real-device verification.
Avoid simple scaling for layout adaptation when interaction methods or usage contexts change, as screen size shifts demand rethinking navigation patterns, content hierarchy, and interaction affordances rather than resizing elements.
trydyddCreates adaptive design plans specifying layouts, roles, and cross-device behavior for given contexts.
FavioVazquezAdapt existing designs across screen sizes, devices, and platforms.
joshkellett87Generate design tokens and documentation for scalable UI systems.
haomingzGenerate cross-client HTML email templates with table layouts and inline CSS.
