Adapt designs across mobile, tablet, and desktop screen sizes.
npx skills add https://github.com/Postalocity/template-microsite --skill adapt-postalocity
Please help me install this Agent Skill. Skill: adapt Source: https://github.com/Postalocity/template-microsite/tree/main/.opencode/skills/impeccable--adapt Command: npx skills add https://github.com/Postalocity/template-microsite --skill adapt-postalocity
Adapt designs to work effectively across different screen sizes, devices, and contexts, ensuring consistent usability and visuals.
Provide a responsive design plan that adapts a given layout to mobile, tablet, and desktop contexts.
High-intent search queries and answers about installing and using this skill.
To make UI design responsive across mobile, tablet, and desktop screens, apply cross-device adaptation strategies defining single-column mobile layouts, multi-column desktop grids, and adaptive typography using scalable units to maintain visual consistency.
Cross-device adaptation in responsive design systems is the process of adjusting layouts, typography, and navigation patterns to ensure consistent usability and visual coherence across varying screen sizes and device contexts.
Design context-aware components that maintain touch targets on mobile by applying specific adaptation patterns for layout and navigation clarity, ensuring legibility and interaction precision across mobile, tablet, and desktop breakpoints.
Yes, you can use a single design system guideline for a web dashboard and mobile app by applying cross-device adaptation strategies that enforce coherent spacing, scalable typography, and fluid layouts across all product contexts.
Mandatory steps when applying responsive breakpoints to a layout include specifying preparation, defining the adaptation strategy for layout and touch targets, and executing testing steps to ensure cross-device usability.
A multi-column desktop layout breaks usability on mobile devices because it lacks proper cross-device adaptation, requiring a strategy to shift to single-column layouts and adaptive typography to maintain visual consistency on smaller screens.
jc180105Define reusable CSS architecture and UX foundations for frontend development.
get-convexPlan responsive layouts across mobile, tablet, and desktop breakpoints.
projectmilujuDefine UI design system tokens and component specifications for web products.
WdanielBImplement responsive layouts with container queries, fluid typography, CSS Grid, and mobile-first breakpoints.
