# Frontend Responsive Design Standards

A skill that gives your coding agent rules for mobile-first layouts: breakpoints, relative units, touch targets and content priority.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1200 installs · ★ 1039
- Author: am-will
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/am-will/codex-skills/tree/HEAD/skills/frontend-responsive-ui/SKILL.md
- Updated: 2026-07-14
- HTML: https://affpapa.org/en/nevibecode/skills/frontend-responsive-design-standards

## What it does

The skill spells out how the agent should build responsive interfaces. It ships rules and code samples: start from the mobile layout, then enhance for wider screens. Media queries, flexbox and grid, relative units instead of fixed pixels — all covered with before-and-after examples.

Touch targets get their own section. Buttons at least 44x44px, spacing between interactive elements, minimum input height. Typography is there too: 16px base size, line height, line length capped around `max-width: 65ch`. Samples come in plain CSS and Tailwind classes, so the agent can follow whatever the project already uses.

One thing to watch: the skill tells the agent to check existing breakpoint definitions before adding new ones, and to avoid arbitrary values like 850px. If your codebase has its own grid, that is what the agent will follow rather than a default scale.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add am-will/codex-skills --skill frontend-responsive-design-standards -a claude-code
```
```bash
npx skills add am-will/codex-skills --skill frontend-responsive-ui -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add am-will/codex-skills --skill frontend-responsive-ui -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add am-will/codex-skills --skill frontend-responsive-ui -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install am-will/codex-skills frontend-responsive-ui
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add am-will/codex-skills --skill frontend-responsive-ui -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/am-will/codex-skills --path skills/frontend-responsive-ui
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add am-will/codex-skills --skill frontend-responsive-ui -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/am-will/codex-skills/tree/HEAD/skills/frontend-responsive-ui/SKILL.md

## When to use it
- convert a desktop-first layout to mobile-first
- match breakpoints to the grid already in the project
- enlarge buttons and inputs so they are easy to tap
- swap fixed pixels for rem and percentages
- move primary content up and collapse the rest on small screens

## Example prompts
- build the product card mobile-first, one column to start
- check the touch targets in the signup form and fix anything under 44px
- switch heading sizes to clamp instead of fixed values

## Similar
- [responsive-craft](https://affpapa.org/en/nevibecode/skills/responsive-craft.md) — skill · 736 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
- [tailwindcss-mobile-first](https://affpapa.org/en/nevibecode/skills/tailwindcss-mobile-first.md) — skill · 2100 installs
- [tailwindcss-responsive-darkmode](https://affpapa.org/en/nevibecode/skills/tailwindcss-responsive-darkmode.md) — skill · 476 installs
- [tailwind-responsive-ui](https://affpapa.org/en/nevibecode/skills/tailwind-responsive-ui.md) — skill · 461 installs

From the same set: [am-will/codex-skills](https://affpapa.org/en/nevibecode/by/am-will/codex-skills.md) — 13 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