See your designs on every viewport. Live. Figure out the weird ones together.
The visible part of responsive work in code-first projects is the bugs. You resize the window, something breaks at 768, you fix it, something else breaks at 1024. The shape gets discovered instead of designed. Responsive-craft handles that surface job, the same way most responsive tools do.
What makes it different is the layer underneath. Most of the time, going from desktop to mobile is repackaging more than translation. A section that earns its space on a wide screen might be the wrong section on a phone, with different priorities, a different reveal order, or different content entirely. The skill is tuned to help you make that call, not just to shrink what’s already on the page.
Audit, build, or preview.
The skill branches at the top depending on what you’re walking in with: existing code that needs fixing, a blank file, or a layout you want to eyeball across breakpoints right now.
Audits the responsive behavior already in your codebase, flags the silent failures (sticky breaking under overflow: hidden, 100vh overflowing on mobile, missing min-width: 0 on flex children), surfaces the ambiguous translations as design forks, and fixes them in priority order. Pre-flight scans against 13 categories of responsive failures before writing CSS.
/responsive-craft audit
Designs responsive behavior before any CSS gets written. Establishes a mobile-first foundation, picks the right tool per pattern from a three-layer system (intrinsic CSS first, container queries next, media queries last), and surfaces design forks inline. In Guided mode it produces formal behavior specs per component before coding.
/responsive-craft build
Opens a live multi-breakpoint preview in your browser at 375px, 768px, 1024px, and 1440px, all pointing at your dev server. Each iframe is interactive, so you can scroll, click, and navigate independently. Works with any dev server (Vite, Next.js) or static HTML, supports custom breakpoints via --breakpoints, cleans up on exit.
/responsive-craft preview
Works in any AI coding agent
One install command, any agent. The skill rides on the open skills protocol, so it works the same in Claude Code, Codex, Cursor, OpenCode, and 35+ others. The CLI auto-detects what you have installed and wires it up.
$npx skills add kylezantos/responsive-craft#Auto-detects your agent (Claude Code, Codex, Cursor, OpenCode, 35+ more)#Then run: /responsive-craft [audit|build|preview]
Built from a complaint I kept hearing.
Original work. A lot of designers I know who’ve been transitioning into builders spend more time in code than they used to in the canvas. The recurring frustration: you can’t see your designs at every viewport at once the way you could in Figma or Framer, so the responsive decisions stay reactive. The skill answers that with a live multi-viewport view, then keeps going into the harder cases. Sticky scrolling, scroll-driven desktop sequences, the layouts that need a different shape on mobile instead of a smaller one.