responsive-design
Master modern responsive design techniques — container queries, fluid typography with clamp(), CSS Grid, Flexbox patterns, and mobile-first strategies for adaptive interfaces.
Best use case
responsive-design is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Master modern responsive design techniques — container queries, fluid typography with clamp(), CSS Grid, Flexbox patterns, and mobile-first strategies for adaptive interfaces.
Teams using responsive-design should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/responsive-design/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How responsive-design Compares
| Feature / Agent | responsive-design | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Master modern responsive design techniques — container queries, fluid typography with clamp(), CSS Grid, Flexbox patterns, and mobile-first strategies for adaptive interfaces.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Responsive Design Skill
## When to use
- Building layouts that work across all screen sizes
- Implementing fluid typography and spacing
- Using container queries for component-level responsiveness
- Creating mobile-first or adaptive interfaces
## Mobile-first breakpoints
```css
/* Base: mobile (0-639px) */
/* sm: 640px */ @media (min-width: 640px) { }
/* md: 768px */ @media (min-width: 768px) { }
/* lg: 1024px */ @media (min-width: 1024px) { }
/* xl: 1280px */ @media (min-width: 1280px) { }
/* 2xl: 1536px */ @media (min-width: 1536px) { }
```
## Fluid typography
```css
h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
h2 { font-size: clamp(1.25rem, 0.75rem + 2vw, 2.25rem); }
p { font-size: clamp(1rem, 0.875rem + 0.5vw, 1.125rem); }
```
## Container queries
```css
.card-container { container-type: inline-size; }
@container (min-width: 400px) {
.card { display: grid; grid-template-columns: 1fr 2fr; }
}
```
## CSS Grid responsive layout
```css
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 1.5rem;
}
```
## Key rules
1. **Touch targets**: Minimum 44×44px on mobile
2. **Readable line length**: 45-75 characters per line
3. **No horizontal scroll**: Test at 320px minimum
4. **Images**: Use `srcset`, `sizes`, and `object-fit: cover`
5. **Test**: Real devices, not just browser DevTools
## Tips for AI Agents
- Always start with mobile layout, then add complexity for larger screens.
- Use `clamp()` for fluid properties instead of multiple breakpoints.
- Prefer CSS Grid with `auto-fit`/`minmax` for self-adapting layouts.Related Skills
web-design-reviewer
Inspect web interfaces for layout, responsive, accessibility, and visual issues, then apply targeted source code fixes and re-verify results.
ui-design-system
Create and maintain scalable UI design systems with design tokens, responsive rules, accessibility standards, component libraries, and developer handoff documentation.
tailwind-design-system-v4
Build scalable, responsive, and accessible design systems with Tailwind CSS v4 — design tokens, theme configuration, reusable React UI components, and migration from v3.
pricing-page-design
Design high-conversion SaaS pricing pages with plan structures, comparison patterns, conversion strategies, copy templates, SEO/AEO checklists, and layout types (3-card, slider, persona split, enterprise).
landing-page-design
Design high-conversion landing pages with structure, section order, layout types (classic hero, long-form, minimal, comparison), conversion strategies, SEO/AEO guidance, and copywriting templates.
interaction-design
Design and implement purposeful UI motion, microinteractions, and feedback patterns to enhance usability and user delight — hover effects, transitions, loading states, and gesture responses.
frontend-distinctive-design
Create distinctive, production-grade frontend interfaces with bold, cohesive aesthetics and refined implementation — visual identity, typography systems, color palettes, and layout composition.
canvas-design
Create original visual design philosophies and express them as meticulously crafted, museum-quality PNG or PDF art with minimal text — generative art, data visualization, and abstract compositions.
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
youtube-growth
Act as an expert YouTube Strategy Consultant. Apply the Creator Unlock N.I.C.E.R. Framework for conducting channel audits, niche validation, and data-backed video ideation/thumbnail generation.
xyops-automate
Build and manage automation pipelines using xyOps at {{XYOPS_HOST}}:{{XYOPS_PORT}}.
xml-parse
Parse and transform XML/HTML documents using command-line tools in the shared volume at {{SHARED_VOLUME}}.