Optimizes existing UI layouts for mobile and tablet devices, focusing on touch targets and screen breakpoints.
Install
mkdir -p .claude/skills/adapt-educlopez && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/17476" && unzip -o skill.zip -d .claude/skills/adapt-educlopez && rm skill.zipInstalls to .claude/skills/adapt-educlopez
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Responsive layout pass covering breakpoints, touch targets, safe areas, and fluid type. Use when the UI has layout or touch issues on mobile/tablet, when adding a new screen that hasn't been tested across viewports, or when the user says "make it responsive" / "fix mobile layout". Invoke when the user asks for adapt on their UI, or mentions 'adapt' alongside design / UI / frontend work.Key capabilities
- →Apply project's existing breakpoint system.
- →Handle safe areas like iOS notch and Android gesture bar.
- →Prevent horizontal scrolling at 320px viewport width.
- →Implement fluid typography using `clamp`.
- →Utilize container queries over viewport media queries for component responsiveness.
How it works
This skill adapts a UI by applying responsive design principles, including breakpoints, touch target sizing, safe area handling, fluid typography, and container queries, working mobile-first.
Inputs & outputs
When to use adapt
- →Fix mobile layout
- →Optimize touch targets
- →Implement responsive breakpoints
- →Adjust safe areas
About this skill
Context: this sub-skill is one lens of the broader ui-craft skill. If the ui-craft skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.
Adapt the UI at $ARGUMENTS across devices. Load the ui-craft skill and read references/responsive.md.
Work mobile-first. Don't shrink desktop; grow from mobile.
Checklist:
- Breakpoints — use project's existing system (Tailwind:
sm md lg xl; CSS: container queries preferred over media queries for components). No magic widths. - Touch — tap targets ≥ 44×44px (
min-h-11 min-w-11). Touch zones don't overlap.touch-action: manipulationon interactive elements. - Safe areas —
padding-top: env(safe-area-inset-top)etc. on fixed headers/footers/FAB. Check iOS notch and Android gesture bar. - No horizontal scroll at 320px. Test with devtools device mode.
- Fluid type —
clamp(1rem, 0.9rem + 0.5vw, 1.125rem)for body where scale matters; fixed px for small UI text (labels, captions). - Container queries — prefer
@containerover viewport media queries for component-level responsiveness. Components that live in sidebars and main content behave differently at the same viewport width. - Hover-less devices — every hover affordance has a non-hover equivalent.
@media (hover: hover)to scope desktop-only effects. - Density shifts with viewport — honor
VISUAL_DENSITYdifferently per breakpoint:VISUAL_DENSITY ≤ 3→ fewer columns and wider spacing even at desktop widths.VISUAL_DENSITY 8+→ honor dashboard density, but still respect touch/hover distinctions (touch targets stay ≥ 44px on mobile, hover affordances gated behind@media (hover: hover)).- Mobile always trends toward 1 column and wider spacing regardless of the knob value.
- Images —
aspect-ratioset;srcset+sizesfor different viewports;loading="lazy"below the fold;fetchpriority="high"on hero. - Nav pattern — desktop horizontal → mobile collapses (sheet, drawer, or bottom tabs). Never a hamburger on desktop unless the nav has > 7 top-level items.
Output: edit code directly. Print the Review Format table of changes. Flag any responsive bugs you can't fix without more info (missing design for a breakpoint, unclear nav pattern).
Next step: /audit — verify the responsive pass against a11y, performance and touch targets (rung 1).
When not to use it
- →Do not shrink desktop to fit mobile.
- →Do not use magic widths for breakpoints.
- →Do not use a hamburger menu on desktop unless navigation has more than 7 top-level items.
Limitations
- →The skill requires using the project's existing breakpoint system.
- →It requires testing with devtools device mode for horizontal scroll.
- →It does not improvise responsive solutions if a design for a breakpoint is missing.
How it compares
This skill provides a structured checklist for responsive UI adaptation, focusing on mobile-first design and specific technical implementations like `clamp` and container queries, which is more systematic than ad-hoc responsive adjustments.
Compared to similar skills
adapt side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| adapt (this skill) | 0 | 23d | No flags | Intermediate |
| tailwind-design-system | 34 | 2mo | No flags | Intermediate |
| web-design-reviewer | 7 | 6mo | No flags | Intermediate |
| epic-ui-guidelines | 3 | 5mo | No flags | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by educlopez
View all by educlopez →You might also like
tailwind-design-system
wshobson
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
web-design-reviewer
github
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
epic-ui-guidelines
epicweb-dev
Guide on UI/UX guidelines, accessibility, and component usage for Epic Stack
baseline-ui
agentset-ai
Enforces an opinionated UI baseline to prevent AI-generated interface slop.
ui-web
alinaqi
Web UI - glassmorphism, Tailwind, dark mode, accessibility
bencium-innovative-ux-designer
bencium
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.