# responsive-craft

A skill for responsive work: audit an existing site, build a layout from scratch, or open a live preview across breakpoints.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 736 installs · ★ 84
- Author: kylezantos
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/kylezantos/responsive-craft/tree/HEAD/SKILL.md
- Updated: 2026-04-04
- HTML: https://affpapa.org/en/nevibecode/skills/responsive-craft

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add kylezantos/responsive-craft --skill responsive-craft -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/responsive-craft/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/responsive-craft/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add kylezantos/responsive-craft --skill responsive-craft -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/responsive-craft/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add kylezantos/responsive-craft --skill responsive-craft -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/responsive-craft/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install kylezantos/responsive-craft responsive-craft
```

2. **Manually: put the files in place**
- File: `.github/skills/responsive-craft/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add kylezantos/responsive-craft --skill responsive-craft -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/kylezantos/responsive-craft
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/responsive-craft/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add kylezantos/responsive-craft --skill responsive-craft -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/kylezantos/responsive-craft/tree/HEAD/SKILL.md

## When to use it
- 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
- /responsive-craft audit — make this site responsive
- /responsive-craft build — build this mobile-first
- /responsive-craft preview — show me the breakpoint preview

## Similar
- [Frontend Responsive Design Standards](https://affpapa.org/en/nevibecode/skills/frontend-responsive-design-standards.md) — skill · 1200 installs
- [responsive-design](https://affpapa.org/en/nevibecode/skills/akillness-responsive-design.md) — skill · 478 installs
- [responsive-design-system](https://affpapa.org/en/nevibecode/skills/responsive-design-system.md) — skill · 343 installs
- [mobile-first-design](https://affpapa.org/en/nevibecode/skills/mobile-first-design.md) — skill · 857 installs
- [tailwindcss-mobile-first](https://affpapa.org/en/nevibecode/skills/tailwindcss-mobile-first.md) — skill · 2100 installs
- [responsive-web-design](https://affpapa.org/en/nevibecode/skills/responsive-web-design.md) — skill · 1100 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md