Adapt designs across screen sizes, devices, and input methods.
npx skills add https://github.com/kireevkit15-sys/-1 --skill adapt-kireevkit15-sys
Please help me install this Agent Skill. Skill: adapt Source: https://github.com/kireevkit15-sys/-1/tree/main/skills/adapt Command: npx skills add https://github.com/kireevkit15-sys/-1 --skill adapt-kireevkit15-sys
Helps teams and designers convert interfaces and interaction patterns so they work reliably across different screen sizes, input methods, and usage contexts, preventing broken layouts and unusable controls on target devices.
Adapt the provided layout for the specified target (mobile, tablet, print, or desktop) by prioritizing core content, applying appropriate breakpoints, and ensuring touch targets and interactions match the target device.
High-intent search queries and answers about installing and using this skill.
Responsive breakpoints adapt designs to different screen sizes by using CSS Grid, Flexbox, container queries, and clamp() for fluid sizing. They ensure layouts transition reliably across mobile, tablet, and desktop devices without breaking visual hierarchy.
Mobile layouts require minimum touch target sizing, removing hover-only interactions, and thumb-first placement for interactive elements. These touch adaptation patterns ensure controls remain accessible and usable across touch, pointer, and keyboard input devices.
Container queries enable adaptive layouts by styling elements based on their parent container dimensions rather than the viewport. Combine container queries with fluid clamp() sizing and CSS Grid to achieve responsive breakpoints that adapt reliably across varying screen sizes.
Yes, context-specific transformations include patterns for print-friendly formatting and email-safe templates. The design adaptation process reworks navigation, content hierarchy, and interactions to ensure interfaces render reliably across print and email contexts.
Rework navigation and content hierarchy when converting desktop layouts to mobile, tablet, print, or email formats. Prioritize primary metrics, collapse secondary panels into accordions, and match interactions to the target device's input method for optimal usability.
luyangliuableRework existing designs for different devices, screen sizes, and input methods.
djkloopAdapt designs across screen sizes using breakpoints, fluid layouts, and responsive images.
oborchersImplement responsive web design with CSS Grid, container queries, and responsive images.
Khrees2412Creates adaptive interfaces with container queries, fluid typography, CSS Grid, and breakpoint strategies for web apps and design systems.
