Claude MarketplacesSubmit
wshobson avatar

Responsive Design

wshobson/agents

This covers the modern responsive toolkit you actually need: container queries for component-level breakpoints, fluid typography with clamp(), and CSS Grid patterns that adapt without media query bloat. Use it when you're building layouts that need to respond to their container rather than just the viewport, or when you want typography that scales smoothly instead of jumping at breakpoints. The patterns show auto-fit grids, fluid type scales, and mobile-first strategies with real code examples in both vanilla CSS and React with Tailwind. It's opinionated toward newer techniques like container queries over traditional viewport-based approaches, which is the right direction but means you'll need to consider browser support for older projects.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.
19
skills.sh installs
22K
GitHub stars
42.4K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add wshobson/agents --skill responsive-design --agent claude-code

Installs into .claude/skills of the current project.

Files

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

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/wshobson/agents
Categories
Frontend Development, Mobile Development, Design & UI/UX
First seen
May 16, 2026

More from wshobson/agents

All 174

Recommended

More Frontend Development
1nuxt avatarnuxt-uinuxt/uiBuild UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, buildi20.3Kskills.sh installs
2wshobson avatarreact-state-managementwshobson/agentsMaster modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing b15.9Kskills.sh installs
3clerk avatarclerk-astro-patternsclerk/skillsAstro patterns with Clerk — middleware, SSR pages, island components, API routes, static vs SSR rendering. Triggers on: astro clerk, clerk astro middleware, ast14.8Kskills.sh installs
4wshobson avatarweb-component-designwshobson/agentsMaster React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI componen13.6Kskills.sh installs
5resend avatarreact-emailresend/resend-skillsUse when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emai13.3Kskills.sh installs
6heroui-inc avatarheroui-reactheroui-inc/herouiHeroUI v3 React component library (Tailwind CSS v4 + React Aria). Use when building UIs with HeroUI — creating Buttons, Modals, Forms, Cards; installing @heroui12.6Kskills.sh installs