Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor

responsive-design — Claude Code skill: responsive layouts

Guides responsive UI work with mobile-first styles, container queries, and fluid values. Use it when pages or components need to adapt to available space.

Install into Claude Code · Plugin marketplace All methods and platforms ↓ 
/plugin marketplace add wshobson/agents
/plugin install ui-design@claude-code-workflows
Open on GitHub

What responsive-design does

This skill guides an agent through responsive layout work. It starts from mobile styles, places breakpoints around content rather than device models, and prefers fluid values for typography and spacing. Its scope includes CSS Grid, Flexbox, responsive images, navigation, tables, and media.

For component-level changes, it points to container queries, with deeper patterns in references/details.md. It also covers horizontal overflow, fixed widths, mobile 100vh issues, distorted images, and 44x44px touch targets. Install it if responsive CSS is regular project work; for a one-off static page, the extra guidance is unnecessary.

What it helps with

  • build a mobile-first page layout
  • add container queries to a component
  • fix horizontal overflow
  • choose content-based breakpoints
  • keep typography and spacing fluid

Example prompts for the agent

  • "Make this page mobile-first and check for horizontal overflow."
  • "Rework the card with container queries so it responds to its container width."
  • "Use CSS Grid for a responsive table and keep images from stretching."

How to install responsive-design

1Plugin marketplace

/plugin marketplace add wshobson/agents
/plugin install ui-design@claude-code-workflows

This installs the whole ui-design plugin with all its skills

2Skills CLI (Vercel)

npx skills add wshobson/agents --skill responsive-design -a claude-code

3Manually: put the files in place

~/.claude/skills/responsive-design/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/responsive-design/

From the same set213

The whole set →
typescript-advanced-types Seth Hobson Guides an agent through advanced TypeScript types, from generics to conditional and mapped types. Use it for typed libraries, API clients, or strict configuration objects. Claude Code CX Codex Cursor 92,169installs tailwind-design-system Seth Hobson Helps build design systems with Tailwind CSS v4, from theme tokens to component variants. Use it when a project needs shared UI patterns. Claude Code CX Codex Cursor 70,180installs brand-landingpage Travis D. Elliott This skill interviews you about the product and its visual direction, then builds a landing page through Stitch. Use it when there’s no established design yet. Claude Code CX Codex Cursor 39,476installs python-testing-patterns Seth Hobson This skill guides Python testing with pytest, fixtures and mocks. Use it when building a test suite or tracking down failing checks. Claude Code CX Codex Cursor 36,943installs python-performance-optimization Seth Hobson This skill profiles Python code to locate CPU and memory bottlenecks. Use it when an application responds slowly or consumes too many resources. Claude Code CX Codex Cursor 35,675installs nextjs-app-router-patterns Seth Hobson This skill covers Next.js App Router patterns for rendering, routing, and data fetching. Use it when starting an App Router project or moving from Pages Router. Claude Code CX Codex Cursor 32,529installs api-design-principles Seth Hobson Use this skill to plan or review REST and GraphQL APIs. It helps when writing a specification or setting API conventions for a team. Claude Code CX Codex Cursor 30,348installs code-review-excellence Seth Hobson This skill guides pull request reviews, catches logic and security issues, and helps teams give specific feedback. Use it for review standards or developer mentoring. Claude Code CX Codex Cursor 30,193installs

Similar

interface-review jakubkrehel Audits pull requests, branches, and uncommitted edits for layout, UI, accessibility, and typography regressions. Keeps focus on what changed rather than pre-existing debt. Claude Code CX Codex Cursor +1 18,100installs react-vite-dashboard official google-labs-code This skill converts Stitch designs into production React and Vite dashboards. It maps tokens from DESIGN.md and integrates async data fetching with TanStack Query. Claude Code CX Codex Cursor +1 5,400installs flutter-apply-architecture-best-practices flutter This skill structures Flutter apps around UI, Logic, and Data layers. Use it when starting a project or refactoring code for scale. Claude Code CX Codex Cursor +1 43,000installs ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs flutter-build-responsive-layout flutter This skill guides coding agents to build adaptive Flutter UIs across mobile and desktop screens using LayoutBuilder and BoxConstraints. Claude Code CX Codex Cursor +1 42,300installs scroll-world oso95 This skill builds a landing page where scrolling drives a camera that dives into each scene and moves to the next with no cuts. Claude Code CX Codex Cursor +1 4,800installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about responsive-design

How do I install responsive-design in Claude Code?

Run npx skills add wshobson/agents --skill responsive-design -a claude-code. The skill file is placed at ~/.claude/skills/responsive-design/SKILL.md.

What does responsive-design do?

The skill guides responsive UI work with mobile-first styles, container queries, fluid typography, CSS Grid, and Flexbox. It also addresses common mobile layout issues.

How does responsive-design choose breakpoints?

It recommends setting breakpoints around content instead of device types. For component-level responsiveness, it uses container queries.

Source text

SKILL.md · MIT 
---
name: responsive-design
description: 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

1. **Mobile-First**: Start with mobile styles, enhance for larger screens
2. **Content Breakpoints**: Set breakpoints based on content, not devices
3. **Fluid Over Fixed**: Use fluid values for typography and spacing
4. **Container Queries**: Use for component-level responsiveness
5. **Test Real Devices**: Simulators don't catch all issues
6. **Performance**: Optimize images, lazy load off-screen content
7. **Touch Targets**: Maintain 44x44px minimum on mobile
8. **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

© Seth Hobson · MIT · wshobson/agents

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor