mobile-responsiveness — Claude Code skill: setup and features
Provides mobile-first responsive design patterns, touch gesture handlers, fluid typography rules, and safe area handling for web apps.
npx skills add hoodini/ai-agents-skills --skill mobile-responsiveness -a claude-codeWhat mobile-responsiveness does
The skill equips coding agents with reference implementations for mobile-first web layouts. It provides standard media query breakpoints for plain CSS and Tailwind, fluid typography formulas via clamp(), and styling rules that respect device display cutouts through safe-area-inset variables.
For application logic, it includes React implementations of a slide-out hamburger navigation bar, a useMediaQuery listener hook, and touch swipe detection using native onTouchStart and onTouchEnd events. Gestures rely purely on DOM touch coordinates without third-party gesture libraries, keeping client bundles lightweight.
Styles follow a strict mobile-first structure where baseline rules require no media queries, scaling upward at 768px, 1024px, and 1280px thresholds.
What it helps with
- set up mobile-first breakpoints in plain CSS and Tailwind
- build a slide-out mobile navigation drawer with a backdrop overlay
- detect left and right touch swipe gestures in React without external dependencies
- adjust interface padding for device notches and home indicators
Example prompts for the agent
- Create a mobile hamburger navigation menu with a sliding drawer in React
- Configure fluid typography using CSS clamp for responsive headings
- Add touch swipe gesture detection to this React card component
How to install mobile-responsiveness
1Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill mobile-responsiveness -a claude-code2Manually: put the files in place
~/.claude/skills/mobile-responsiveness/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/mobile-responsiveness/
1Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill mobile-responsiveness -a codex2Manually: put the files in place
.agents/skills/mobile-responsiveness/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill mobile-responsiveness -a cursor2Manually: put the files in place
.cursor/skills/mobile-responsiveness/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install hoodini/ai-agents-skills mobile-responsiveness2Manually: put the files in place
.github/skills/mobile-responsiveness/SKILL.md1Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill mobile-responsiveness -a gemini-cli2Platform CLI
gemini skills install https://github.com/hoodini/ai-agents-skills --path skills/mobile-responsivenessManually: put the files in place
.devin/skills/mobile-responsiveness/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill mobile-responsiveness -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 mobile-responsiveness
How to install mobile-responsiveness in Claude Code?
Run npx skills add hoodini/ai-agents-skills --skill mobile-responsiveness -a claude-code in your terminal.
What does mobile-responsiveness do?
It provides patterns for mobile-first layouts, covering responsive breakpoints, touch swipe handling, fluid typography, and viewport safe areas.
How does the skill handle phone notches and navigation bars?
It adds a viewport meta tag with viewport-fit=cover and applies env(safe-area-inset-*) CSS properties to container and fixed navigation padding.
