responsive-craft — Claude Code skill for responsive layouts
A skill for responsive work: audit an existing site, build a layout from scratch, or open a live preview across breakpoints.
npx skills add kylezantos/responsive-craft --skill responsive-craft -a claude-codeWhat responsive-craft does
The skill runs in three modes. audit goes through existing code and fixes mobile problems, build designs a responsive layout from the start, and preview opens a browser preview at several breakpoints at once. You pick a mode with the argument or just by describing what you want.
It carries a set of rules for choosing the right fix. Intrinsic CSS first — auto-fit, flex-wrap, clamp() — then container queries for components, and media queries only for page-level shifts. Reference files cover sticky elements and scroll coordination, common AI mistakes in responsive work, and a testing checklist. When a layout has more than one valid responsive translation, the skill lays out the options with tradeoffs and asks you to pick instead of deciding quietly.
Interactivity is a separate choice. Adaptive asks a question or two and starts working; Guided writes a behavior spec per component and waits for approval before coding. For layouts with 5+ distinct responsive components, several sticky elements, or a dashboard, the skill suggests Guided — rework later costs more.
What it helps with
- fix a layout that breaks on phones
- build a mobile-first layout from scratch
- add breakpoints to an existing page
- sort out sticky headers and coordinated scrolling
- see a page at several widths side by side
Example prompts for the agent
- /responsive-craft audit — make this site responsive
- /responsive-craft build — build this mobile-first
- /responsive-craft preview — show me the breakpoint preview
How to install responsive-craft
1Skills CLI (Vercel)
npx skills add kylezantos/responsive-craft --skill responsive-craft -a claude-code2Manually: put the files in place
~/.claude/skills/responsive-craft/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/responsive-craft/
1Skills CLI (Vercel)
npx skills add kylezantos/responsive-craft --skill responsive-craft -a codex2Manually: put the files in place
.agents/skills/responsive-craft/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add kylezantos/responsive-craft --skill responsive-craft -a cursor2Manually: put the files in place
.cursor/skills/responsive-craft/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install kylezantos/responsive-craft responsive-craft2Manually: put the files in place
.github/skills/responsive-craft/SKILL.md1Skills CLI (Vercel)
npx skills add kylezantos/responsive-craft --skill responsive-craft -a gemini-cli2Platform CLI
gemini skills install https://github.com/kylezantos/responsive-craftManually: put the files in place
.devin/skills/responsive-craft/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add kylezantos/responsive-craft --skill responsive-craft -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about responsive-craft
How do I install responsive-craft in Claude?
Run npx skills add kylezantos/responsive-craft --skill responsive-craft -a claude-code. The skill lands in ~/.claude/skills/responsive-craft/SKILL.md.
What does responsive-craft do?
It guides the agent through responsive work: auditing an existing site, building a layout from scratch, and previewing breakpoints. Sticky elements, scroll coordination and data tables get their own patterns.
What is the difference between audit and build mode?
audit works on code you already have and fixes mobile issues; build designs the responsive layout from the beginning. Both let you choose Adaptive for a fast pass or Guided for per-component behavior specs.
