ワンクリックで
responsive-design
Implement mobile-first responsive design using modern CSS techniques. Support various screen sizes and devices effectively.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
メニュー
Implement mobile-first responsive design using modern CSS techniques. Support various screen sizes and devices effectively.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | responsive-design |
| description | Implement mobile-first responsive design using modern CSS techniques. Support various screen sizes and devices effectively. |
| triggers | ["/responsive","/mobile first"] |
This skill covers implementing mobile-first responsive designs that work effectively across all device sizes using modern CSS techniques.
Use this skill when you need to:
Philosophy
Viewport Configuration
<meta name="viewport" content="width=device-width, initial-scale=1.0">
CSS Strategy
/* Mobile first: Base styles for mobile */
.card {
padding: 1rem;
width: 100%;
}
/* Tablet */
@media (min-width: 768px) {
.card {
padding: 1.5rem;
width: 50%;
}
}
/* Desktop */
@media (min-width: 1024px) {
.card {
padding: 2rem;
width: 33.333%;
}
}
Standard Breakpoints
/* Mobile first breakpoints */
/* Small devices (phones) - default */
/* Medium devices (tablets) */
@media (min-width: 768px) { }
/* Large devices (desktops) */
@media (min-width: 1024px) { }
/* Extra large devices */
@media (min-width: 1280px) { }
/* 4K and ultra-wide */
@media (min-width: 1536px) { }
Content-Based Breakpoints
/* Break when line length becomes unreadable */
.container {
max-width: 100%;
padding: 1rem;
}
@media (min-width: 65ch) {
.container {
max-width: 65ch; /* Optimal reading width */
margin: 0 auto;
}
}
CSS Grid
/* Responsive grid */
.grid {
display: grid;
gap: 1rem;
/* Single column by default (mobile) */
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
}
/* Responsive without media queries */
.grid-auto {
display: grid;
gap: 1rem;
grid-template-columns: repeat(
auto-fit,
minmax(min(100%, 300px), 1fr)
);
}
Flexbox
/* Responsive navigation */
.nav {
display: flex;
flex-direction: column; /* Mobile: stacked */
gap: 0.5rem;
}
@media (min-width: 768px) {
.nav {
flex-direction: row; /* Desktop: horizontal */
gap: 2rem;
}
}
/* Responsive cards */
.card-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card {
flex: 1 1 300px; /* Grow, shrink, basis */
min-width: 0; /* Allow shrinking below basis */
}
Fluid Typography
/* Clamp: minimum, preferred, maximum */
h1 {
font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}
p {
font-size: clamp(1rem, 0.5vw + 0.875rem, 1.25rem);
line-height: 1.6;
}
Responsive Line Height
body {
font-size: 1rem;
line-height: 1.5;
}
@media (min-width: 768px) {
body {
font-size: 1.125rem;
line-height: 1.6;
}
}
Art Direction
<picture>
<!-- Mobile: portrait crop -->
<source
media="(max-width: 767px)"
srcset="hero-mobile.jpg"
>
<!-- Desktop: full image -->
<source
media="(min-width: 768px)"
srcset="hero-desktop.jpg"
>
<img src="hero-default.jpg" alt="Description">
</picture>
Resolution Switching
<img
srcset="
image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w
"
sizes="
(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px
"
src="image-800.jpg"
alt="Description"
>
Object Fit
.image-container {
width: 100%;
aspect-ratio: 16 / 9;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
Modern Responsive Alternative
/* Container query instead of media query */
.card-container {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 200px 1fr;
}
}
@container card (min-width: 700px) {
.card {
grid-template-columns: 300px 1fr;
}
}
Touch Targets
/* Minimum touch target size */
button,
.nav-link,
.form-input {
min-height: 44px;
min-width: 44px;
}
/* Adequate spacing between touch targets */
.nav-list li {
margin-bottom: 0.5rem;
}
Hover Capability
/* Only apply hover styles on hover-capable devices */
@media (hover: hover) {
.button:hover {
background-color: #0056b3;
}
}
/* Fallback for touch devices */
@media (hover: none) {
.button:active {
background-color: #0056b3;
}
}
/* Dark mode media query */
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1a1a1a;
--text-color: #e0e0e0;
}
}
/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
Device Testing Checklist
Browser DevTools
See the examples/ directory for:
grid-layouts/ - Responsive grid patternsnavigation-patterns/ - Responsive nav designstypography-system/ - Fluid type scalesdark-mode/ - Dark mode implementationInteractive onboarding workflow that interviews users to understand their coding goals and generates PR-ready implementation plans. Use when starting a new development task to ensure clear requirements and structured execution.
Implement security best practices for Gamma integration. Use when securing API keys, implementing access controls, or auditing Gamma security configuration. Trigger with phrases like "gamma security", "gamma API key security", "gamma secure", "gamma credentials", "gamma access control".
Write effective technical documentation including READMEs, API docs, architecture decisions, and inline code documentation.
Build and manage CI/CD pipelines with Azure DevOps. Configure builds, releases, and automate software delivery workflows.
Develop, deploy, and manage Azure Functions for serverless computing. Supports HTTP triggers, timers, queues, and event-driven architectures.
Manage Azure resources effectively using CLI, Portal, Bicep, and ARM templates. Use for provisioning, organizing, and maintaining cloud infrastructure.