Adapt existing user interfaces across screen sizes and device types.
npx skills add https://github.com/ceshez/VELAR --skill adapt-ceshez
Please help me install this Agent Skill. Skill: adapt Source: https://github.com/ceshez/VELAR/tree/main/.agents/skills/adapt Command: npx skills add https://github.com/ceshez/VELAR --skill adapt-ceshez
This Skill helps you redesign UI and UX so experiences remain usable, accessible, and visually consistent across screen sizes, devices, and contexts rather than breaking when layouts change.
Ask the AI to adapt your current desktop interface for mobile and define new breakpoints, touch targets, and navigation changes based on your target device and context.
High-intent search queries and answers about installing and using this skill.
Convert fixed desktop layouts into mobile-responsive designs using media queries, grid or flex reflow, and fluid sizing. You must define new breakpoints, replace hover patterns with touch-safe interactions, and validate usability on real devices to ensure proper layout adaptation.
Plan breakpoints by analyzing target device contexts and applying media queries to reflow grid and flex containers. This method ensures layout adaptation remains visually consistent and accessible across mobile, tablet, desktop, print, and email contexts without breaking.
Rework touch targets when adapting interfaces for mobile to ensure thumb-first usability and accessibility. You must replace hover-dependent patterns with touch-safe interactions and enforce minimum touch target sizing to maintain effective mobile navigation.
Yes, adapt layouts for print and email contexts using progressive disclosure, fluid sizing, and responsive media transformations. This context-aware content strategy ensures information fits the specific medium and aligns with user expectations rather than breaking during format conversion.
Layouts break during tablet conversion due to missing hybrid structures and improper grid or flex reflow. Fixing this requires implementing fluid sizing, defining appropriate breakpoints, and validating usability on real devices and orientations to ensure proper layout adaptation.
microlinkhqAdapt existing UI designs across devices, platforms, and usage contexts.
cenjieAdapt desktop web designs to mobile, tablet, and print layouts with CSS Grid and Flexbox.
Dzakiamriz22Implement mobile-first responsive layouts with CSS Grid, Flexbox, and Tailwind breakpoints.
Alone-Y154Enforce mobile-first responsive design standards for web interfaces across screen sizes.
