# ui.sh Make Responsive By **ui-sh** ยท Habilidades Agent skill for adapting desktop UIs to mobile, tablet, and desktop breakpoints, built by the makers of Tailwind CSS and Refactoring UI. - Source: https://ui.sh/skills/make-responsive - Install: `npx @uidotsh/install make-responsive --token=[token]` - Tags: responsive, tailwind, ui, agent-skill, mobile, open-source, cli, design - Pricing: unknown - Upvotes: 0 ## Features - Adapts desktop UI to mobile, tablet, and desktop breakpoints via /make-responsive command - Fixes iOS Safari focus-zoom by enforcing 16px minimum on text inputs - Adds mobile navigation when none exists in the original layout - Scales body text up on mobile for natural reading without altering desktop styles - Fixes overflow, clipping, awkward wrapping, and cramped controls - Handles responsive behavior for forms, tables, cards, and touch targets - Works with Claude Code, Cursor, Codex, OpenCode, and Amp via MCP - Installable alongside other ui.sh skills in a single npx command --- ## Why it matters AI agents are good at writing desktop UIs and bad at making them responsive. They miss iOS Safari edge cases, forget mobile nav, and produce cramped touch targets. ui.sh Make Responsive is a curated agent skill that encodes the fixes a senior design engineer would catch. ## The big picture ui.sh is a collection of agent skills built by Adam Wathan (creator of Tailwind CSS) and Steve Schoger (co-author of Refactoring UI). The Make Responsive skill is one of several in the suite, each targeting a specific UI task that generic coding agents handle poorly. The platform is explicitly described as "uncomfortably early" by Wathan himself, and access is invite-only. ## How it works Install the skill into your project with the npx installer, then trigger it with the `/make-responsive` command inside your agent. The skill checks the layout at mobile, tablet, and desktop sizes and applies targeted fixes. It works with any agent that speaks MCP: Claude Code, Cursor, Codex, OpenCode, and Amp are all listed as supported. ## Zoom in Three fixes stand out as non-obvious. First, it enforces at least `text-base` (16px) on text inputs to prevent iOS Safari from zooming on focus, a bug most agents never catch. Second, it adds mobile navigation when the desktop layout has none, which agents routinely skip. Third, it bumps body text to `text-lg` on mobile while holding desktop sizing, trading pixel-perfect parity for a more natural reading experience. ## Yes, but The product is invite-only and self-described as early. Per the tailkits.com review, the skill primitive itself is brand-new, and the shape of an AI design toolkit is still being worked out in public. Builders who need a stable, production-ready tool today may want to wait for a more mature release. ## The bottom line If you have access, Make Responsive is the most targeted fix available for the specific failure mode of agents shipping desktop-only UI. It handles the edge cases (iOS zoom, missing nav, touch targets) that generic prompting misses, backed by the design credibility of the Tailwind CSS team. ## FAQ ### What is ui.sh Make Responsive? ui.sh Make Responsive is an agent skill that adapts existing desktop-oriented UIs to work across mobile, tablet, and desktop breakpoints. It is part of the ui.sh suite, built by Adam Wathan (creator of Tailwind CSS) and Steve Schoger (co-author of Refactoring UI). The skill targets specific responsive failures that AI coding agents typically miss, such as iOS Safari zoom bugs, missing mobile navigation, and cramped touch targets. It is invoked with the /make-responsive command inside a supported coding agent. ### How do I install and use ui.sh Make Responsive? Install the skill by running 'npx @uidotsh/install make-responsive --token=[token]' in your project directory, where the token is provided when you gain access to ui.sh. Once installed, trigger it inside your coding agent with the /make-responsive command. The skill then analyzes the UI at mobile, tablet, and desktop sizes and applies responsive fixes automatically. Multiple ui.sh skills can be installed at once by omitting the skill name from the npx command. ### Is ui.sh Make Responsive free or open source? The pricing model for ui.sh is not disclosed in the available sources. Access to the platform is currently invite-only, and Adam Wathan has described the current state as 'uncomfortably early.' The skill is not listed as open source in any available source material. Builders should check ui.sh directly for current access and pricing details. ### What is ui.sh Make Responsive best for? The skill is best for retrofitting responsive design onto existing desktop-first UIs, particularly when using a coding agent that would otherwise miss mobile-specific edge cases. It shines at fixing the three things agents most often skip: enforcing 16px minimum on inputs to prevent iOS Safari zoom, adding mobile navigation when none exists, and scaling body text appropriately for mobile reading. It works across Claude Code, Cursor, Codex, OpenCode, and Amp via MCP. ### How does ui.sh Make Responsive compare to writing responsive Tailwind by hand or using a generic agent? Generic coding agents produce responsive Tailwind classes but routinely miss implementation-level edge cases that a senior design engineer would catch. Per the ui.sh skill page, agents often overlook the iOS Safari focus-zoom issue, skip adding mobile navigation entirely, and fail to adjust touch target sizes. ui.sh Make Responsive encodes those fixes as curated prompts and reference examples authored by the Tailwind CSS and Refactoring UI team, giving the agent a higher baseline than a raw model would achieve on its own. ### What are the limitations or risks of using ui.sh Make Responsive? The primary limitation is access: ui.sh is invite-only and Adam Wathan has publicly described it as 'uncomfortably early,' signaling that the product is still taking shape. Installation requires a token, so there is no self-serve path without an invite. The skill is also a retrofit tool, meaning it is designed for adapting existing desktop layouts rather than building mobile-first from the start. Builders on a tight deadline who need a stable, widely available tool may want to wait for a more mature release. --- [View on Analog](https://analoghq.ai/es/ui-sh/skills/ui-sh-make-responsive)