responsive-design-patterns
Mobile-first responsive design patterns with breakpoints, fluid layouts, and adaptive components
Best use case
responsive-design-patterns is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Mobile-first responsive design patterns with breakpoints, fluid layouts, and adaptive components
Teams using responsive-design-patterns 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-patterns/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How responsive-design-patterns Compares
| Feature / Agent | responsive-design-patterns | 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?
Mobile-first responsive design patterns with breakpoints, fluid layouts, and adaptive components
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 Patterns
Mobile-first patterns for creating adaptive, responsive user interfaces.
## Breakpoint System
```typescript
export const breakpoints = {
sm: '640px', // Small devices
md: '768px', // Medium devices
lg: '1024px', // Large devices
xl: '1280px', // Extra large devices
'2xl': '1536px' // 2X Extra large
};
// Tailwind config
module.exports = {
theme: {
screens: breakpoints
}
};
```
## Mobile-First Approach
```tsx
// Start with mobile, enhance for larger screens
<div className="
flex flex-col /* Mobile: stack vertically */
md:flex-row /* Tablet+: side by side */
gap-4
p-4 md:p-6 lg:p-8 /* Progressive spacing */
">
<div className="
w-full /* Mobile: full width */
md:w-1/3 /* Tablet+: 1/3 width */
">Sidebar</div>
<div className="
w-full
md:w-2/3
">Main Content</div>
</div>
```
## Fluid Typography
```css
/* Clamp for fluid scaling */
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}
/* Container queries */
@container (min-width: 400px) {
.card-title {
font-size: 1.25rem;
}
}
```
## Responsive Images
```tsx
<picture>
<source
media="(min-width: 1024px)"
srcSet="/images/hero-large.webp"
/>
<source
media="(min-width: 640px)"
srcSet="/images/hero-medium.webp"
/>
<img
src="/images/hero-small.webp"
alt="Hero image"
loading="lazy"
/>
</picture>
```
## Touch-Friendly Patterns
```tsx
// Minimum touch target: 44x44px
<button className="min-h-[44px] min-w-[44px] p-3">
<Icon />
</button>
// Swipe gestures
function useSwipe(onSwipeLeft?: () => void, onSwipeRight?: () => void) {
const [touchStart, setTouchStart] = useState(0);
const [touchEnd, setTouchEnd] = useState(0);
const minSwipeDistance = 50;
const onTouchStart = (e: TouchEvent) => {
setTouchEnd(0);
setTouchStart(e.targetTouches[0].clientX);
};
const onTouchMove = (e: TouchEvent) => {
setTouchEnd(e.targetTouches[0].clientX);
};
const onTouchEnd = () => {
if (!touchStart || !touchEnd) return;
const distance = touchStart - touchEnd;
const isLeftSwipe = distance > minSwipeDistance;
const isRightSwipe = distance < -minSwipeDistance;
if (isLeftSwipe && onSwipeLeft) onSwipeLeft();
if (isRightSwipe && onSwipeRight) onSwipeRight();
};
return { onTouchStart, onTouchMove, onTouchEnd };
}
```
## Integration Points
Complements:
- **frontend-design-systems**: For component design
- **accessibility-patterns**: For mobile accessibility
- **webapp-testing**: For responsive testingRelated Skills
ui-ux-designer
Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools.
ui-ux-design-system
Expert in building premium, accessible UI/UX design systems for SaaS apps. Covers design tokens, component architecture with shadcn/ui and Radix, dark mode, glassmorphism, micro-animations, responsive layouts, and accessibility. Use when: ui, ux, design system, shadcn, radix, tailwind, dark mode, animation, accessibility, components, figma to code.
ui-designer
Generate and serve live HTML/CSS/JS UI designs from natural language prompts. Use when the user asks to design, create, build, or prototype a website, landing page, UI, dashboard, web page, or frontend mockup. Also triggers on requests to update, tweak, or iterate on a previously generated design. Replaces traditional UI design + frontend dev workflow.
ui-design
Applies consistent renderer UI/UX implementation patterns using a Vercel-inspired white theme, strong accessibility defaults, and repository component conventions.
ui-design-styles
Comprehensive guidance for applying modern UI design styles, including Soft UI, Dark Mode, Flat Design, Neumorphism, Glassmorphism, and Aurora UI Gradients. Use when a user asks to: (1) Apply a specific UI style to a project, (2) Create a modern, visually appealing UI prototype, (3) Improve accessibility while following design trends, or (4) Understand the technical implementation of specific UI effects like frosted glass or soft shadows.
ui-design-create-component
Guided component creation with proper patterns Use when: the user asks to run the `create-component` workflow and the task requires multi-step orchestration. Do not use when: the task is small, single-step, and can be completed directly without orchestration overhead.
ui-design-a11y
无障碍设计审查与修复能力。
u04425-experiment-design-for-nutrition-and-meal-planning
Operate the "Experiment design for nutrition and meal planning" capability in production for nutrition and meal planning workflows. Use when mission execution explicitly requires this capability and outcomes must be reproducible, policy-gated, and handoff-ready.
u2615-regression-sentinel-design-for-household-logistics
Operate the "regression sentinel design for household logistics" capability in production for regression sentinel design for household logistics workflows. Use when mission execution explicitly requires this capability and outcomes must be reproducible, policy-gated, and handoff-ready.
tool-design-style-selector
Use when you need to define or converge a project's visual direction. Scan project documentation to identify intent, then produce a design-system.md (either preserve existing style or pick from 30 presets). Triggers: design system, design spec, UI style, visual style, design tokens, color palette, typography, layout. Flow: scan → intent → (gate) preserve vs preset → deploy design-system.md after confirmation → (default) implement UI/UX per design-system.md (plan first, then execute).
test-pyramid-design
Design optimal test pyramids with unit/integration/E2E ratios. Identify anti-patterns and recommend architecture-specific testing strategies.
tailwind-design-system
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI...