skills.rest
bfree-trainer
bfree-trainerOFFICIAL
Explore all skills by this author →
WebsiteGitHub

adapt

Adapts UI/UX designs across screen sizes using responsive techniques like CSS Grid and container queries.

60|7|Updated Oct 18, 2020
Search Tags:#mobile#ux#breakpoints#adaptation#responsive-design#touch-targets#css-grid
One-click install
npx skills add https://github.com/bfree-trainer/bfree --skill adapt-bfree-trainer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/bfree-trainer/bfree/tree/main/.claude/skills/adapt
Command: npx skills add https://github.com/bfree-trainer/bfree --skill adapt-bfree-trainer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps designers and developers adapt existing interfaces to new screen sizes, input methods, and usage contexts so the product remains usable, accessible, and consistent across devices.

Core Features & Use Cases

  • Context gathering: Follow a protocol to collect source assumptions, target devices, input methods, and usage scenarios before changing layouts.
  • Platform-specific strategies: Concrete guidance for Mobile, Tablet, Desktop, Print, and Email adaptations including layout, interaction, and content strategies.
  • Implementation techniques: Practical advice on breakpoints, fluid sizing, CSS Grid/Flexbox, container queries, touch targets, progressive enhancement, and testing on real devices.
  • Use Case: Convert a desktop web dashboard into a mobile-first experience by reflowing to a single column, prioritizing core content, increasing touch targets, and replacing hover-dependent controls.

Quick Start

Adapt the provided design for mobile by running the Context Gathering Protocol, then apply the mobile adaptation checklist (single-column layout, larger touch targets, prioritized content, and bottom navigation).

Frequently Asked Questions about adapt

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I adapt a desktop design for mobile screens?▼

To adapt a desktop design for mobile, reflow the layout to a single column, prioritize core content, increase touch target sizes, and replace hover-dependent controls with bottom navigation for a mobile-first experience.

What is the best way to plan responsive design adaptation across devices?▼

Responsive design adaptation starts with a context gathering protocol to collect source assumptions, target devices, input methods, and usage scenarios before applying platform-specific layout and interaction strategies.

Does this responsive design approach support email templates and print exports?▼

Yes, this approach supports adapting layouts for email templates and print exports alongside mobile, tablet, and desktop UI/UX conversion tasks using targeted layout, interaction, and content strategies.

How do I use CSS Grid and container queries for responsive layouts?▼

Use CSS Grid, Flexbox, and container queries to implement fluid sizing and responsive breakpoints, ensuring layouts adapt smoothly across different screen sizes and interaction contexts.

What are the requirements for touch targets in mobile UX adaptation?▼

Mobile UX adaptation requires increasing touch target sizes to ensure accessibility and usability, replacing hover-dependent controls, and applying progressive enhancement techniques tested on real devices.

Related Skills

Explore More Design & Creative Skills→
julianromlijulianromli

adapt

Define responsive layouts and interaction adjustments for new screen sizes.

Community
Intermediate
jean-sotiljean-sotil

adapt

Adapt user interface designs across devices, screen sizes, and contexts.

Community
Advanced
voidrotvoidrot

responsive-design

Implement responsive web layouts using CSS Grid, Flexbox, and media queries.

Community
Intermediate
pproencapproenca
193

tailwind-responsive-ui

Apply responsive Tailwind CSS patterns for layouts across screen sizes.

Community
Intermediate