Frontend Responsive Design Standards — Claude Code skill
A skill that gives your coding agent rules for mobile-first layouts: breakpoints, relative units, touch targets and content priority.
npx skills add am-will/codex-skills --skill frontend-responsive-design-standards -a claude-code
npx skills add am-will/codex-skills --skill frontend-responsive-ui -a claude-codeWhat Frontend Responsive Design Standards 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.
What it helps with
- 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 for the agent
- 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
How to install Frontend Responsive Design Standards
1Skills CLI (Vercel)
npx skills add am-will/codex-skills --skill frontend-responsive-design-standards -a claude-codenpx skills add am-will/codex-skills --skill frontend-responsive-ui -a claude-code2Manually: put the files in place
~/.claude/skills/frontend-responsive-ui/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/frontend-responsive-ui/
1Skills CLI (Vercel)
npx skills add am-will/codex-skills --skill frontend-responsive-ui -a codex2Manually: put the files in place
.agents/skills/frontend-responsive-ui/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add am-will/codex-skills --skill frontend-responsive-ui -a cursor2Manually: put the files in place
.cursor/skills/frontend-responsive-ui/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install am-will/codex-skills frontend-responsive-ui2Manually: put the files in place
.github/skills/frontend-responsive-ui/SKILL.md1Skills CLI (Vercel)
npx skills add am-will/codex-skills --skill frontend-responsive-ui -a gemini-cli2Platform CLI
gemini skills install https://github.com/am-will/codex-skills --path skills/frontend-responsive-uiManually: put the files in place
.devin/skills/frontend-responsive-ui/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add am-will/codex-skills --skill frontend-responsive-ui -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 Frontend Responsive Design Standards
How do I install Frontend Responsive Design Standards in Claude?
Run npx skills add am-will/codex-skills --skill frontend-responsive-design-standards -a claude-code. The skill file lands at ~/.claude/skills/frontend-responsive-ui/SKILL.md.
What does Frontend Responsive Design Standards do?
It sets coding standards for responsive work: mobile-first style order, consistent breakpoints, relative units, touch targets from 44px, and readable typography.
Does it work with Tailwind?
Yes, the examples include Tailwind classes and its sm to 2xl breakpoint scale. The skill still asks the agent to check the breakpoints your project already defines.
