responsive-design
🎯SkillHelps you build web pages that look good on phones, tablets and large screens. It guides layouts, text sizes and spacing that adjust smoothly to any screen.
Installation
npx skills add wshobson/agents --skill responsive-designRun it in a terminal; it asks which AI coding tools to install it for (Claude Code, Codex, Cursor and more).
Uses skills.sh · Node.js 22.20+
After installing
Ask for related work and the agent uses it on its own, or call it yourself.
/responsive-designInstall by hand
Copy the whole skill folder from GitHub to the place below. Copying only SKILL.md can leave out files the skill uses.
Open the skill folder →- This project
.claude/skills/responsive-design/ - All projects
~/.claude/skills/responsive-design/
These paths are for Claude Code. For other tools, the command above puts it in the right place.
What this skill does
Overview
This skill helps you make web pages that adapt to every screen size. It follows a mobile-first approach, which means you design for small phone screens first and then add changes for bigger screens. It covers modern CSS techniques and lists common problems to avoid.
Key Features
- Build layouts with CSS Grid and Flexbox, two CSS tools for arranging page parts in rows and columns.
- Use container queries so a component changes its look based on the space it sits in, not the whole screen.
- Make text and spacing grow and shrink smoothly instead of jumping between fixed sizes.
- Choose breakpoints, the screen widths where your layout changes, based on your content.
- Fix common issues like content spilling off the screen or buttons too small to tap.
Who is this for?
This is for front-end developers and anyone building websites or app screens that must work on many devices. It also helps teams setting layout rules for a shared design system. Detailed examples live in a separate reference file the skill can read when needed.
Summarized by AI from this skill's SKILL.md. Suggest a better one
SKILL.md
View on GitHub →Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.
Responsive Design
Master modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts.
When to Use This Skill
- Implementing mobile-first responsive layouts
- Using container queries for component-based responsiveness
- Creating fluid typography and spacing scales
- Building complex layouts with CSS Grid and Flexbox
- Designing breakpoint strategies for design systems
- Implementing responsive images and media
- Creating adaptive navigation patterns
- Building responsive tables and data displays
Detailed patterns and worked examples
Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.
Best Practices
- Mobile-First: Start with mobile styles, enhance for larger screens
- Content Breakpoints: Set breakpoints based on content, not devices
- Fluid Over Fixed: Use fluid values for typography and spacing
- Container Queries: Use for component-level responsiveness
- Test Real Devices: Simulators don't catch all issues
- Performance: Optimize images, lazy load off-screen content
- Touch Targets: Maintain 44x44px minimum on mobile
- Logical Properties: Use inline/block for internationalization
Common Issues
- Horizontal Overflow: Content breaking out of viewport
- Fixed Widths: Using px instead of relative units
- Viewport Height: 100vh issues on mobile browsers
- Font Size: Text too small on mobile
- Touch Targets: Buttons too small to tap accurately
- Aspect Ratio: Images squishing or stretching
- Z-Index Stacking: Overlays breaking on different screens
More from this repository10
Helps you build a consistent look for your app with Tailwind CSS v4. It sets up shared colors, sizes, dark mode and reusable components so every screen matches.
A guide to TypeScript's advanced type features, which describe the shape of your data so mistakes are caught before the code runs. It covers reusable types, types that change based on rules, and built-in helper types, with short examples.
Guidance for building reliable server-side apps with Node.js, using Express or Fastify. It covers login, error handling, databases, API design and a list of proven best practices.
Intelligent automation and multi-agent orchestration for Claude Code
Claude Code plugin for AI-powered framework migration workflows, coordinating specialized agents to plan and execute transitions between technology stacks as part of the wshobson/agents marketplace.
A Claude Code plugin for payment system integration covering Stripe, PayPal, and billing platforms with checkout flows, subscription management, and webhook handling in the wshobson/agents ecosystem.
A Claude Code plugin bundling core development tools and agents for everyday tasks like debugging and code generation, part of the wshobson/agents marketplace with 73 focused plugins.
Claude Code plugin for observability and monitoring including logging, metrics, distributed tracing, and alerting, part of the wshobson/agents marketplace with 73 focused plugins.
A Claude Code plugin providing specialized AI agents for deployment strategy planning and execution, covering blue-green deployments, canary releases, rolling updates, and zero-downtime patterns.
Claude Code plugin for JVM language development including Java, Kotlin, and Scala with specialized agents for idiomatic patterns, build tools, and runtime optimization in the wshobson/agents marketplace.