# responsive-design

Guides coding agents in mobile-first responsive layout work using CSS Grid, Flexbox, and fluid sizing. Useful when interfaces need consistent adaptation across screens.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 511 installs · ★ 62
- Author: manutej
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-frontend-essentials/skills/responsive-design/SKILL.md
- Updated: 2026-06-13
- HTML: https://affpapa.org/en/nevibecode/skills/manutej-responsive-design

## What it does

The skill instructs the agent to construct layouts starting from mobile viewports with min-width media queries. This avoids desktop-first overrides. Base styles start at 320px, then progressively adapt as the screen widens.

Included patterns cover Flexbox flows and multi-column CSS Grid templates with named areas. Sizing relies on `clamp()` for fluid scaling. It also addresses pointer detection queries like hover capabilities and orientation adjustments.

Heavy reliance on modern CSS properties means legacy browsers need fallbacks.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install manutej/luxor-claude-marketplace responsive-design
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/responsive-design
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill responsive-design -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/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-frontend-essentials/skills/responsive-design/SKILL.md

## When to use it
- Build mobile-first navigation that stacks vertically on small screens
- Configure fluid typography and margins using CSS `clamp()`
- Construct two-dimensional page layouts using CSS Grid template areas
- Differentiate interface interactions for touchscreens versus precision mice

## Example prompts
- Convert this desktop navigation into a mobile-first flexbox layout
- Create an auto-fitting product grid using CSS Grid and clamp spacing
- Add responsive typography to the hero section without fixed media queries

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

## Other versions with the same name
- [responsive-design · wshobson](https://affpapa.org/en/nevibecode/skills/responsive-design.md) — 20956 installs
- [responsive-design · owl-listener](https://affpapa.org/en/nevibecode/skills/owl-listener-responsive-design.md) — 2300 installs
- [responsive-design · mindrally](https://affpapa.org/en/nevibecode/skills/mindrally-responsive-design.md) — 830 installs
- [responsive-design · akillness](https://affpapa.org/en/nevibecode/skills/akillness-responsive-design.md) — 478 installs

From the same set: [manutej/luxor-claude-marketplace](https://affpapa.org/en/nevibecode/by/manutej/luxor-claude-marketplace.md) — 59 cards

---
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