メニュー
Use when building or refactoring an interface that must work across phone, tablet, and desktop; setting breakpoints; sizing touch targets; serving responsive images; or testing layout across viewports.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when work context must transfer to another session or person. Triggers: create a handoff, hand off this work, summarize context for the next session, prepare a handoff.
Use when a result, experiment, or analysis must be reproducible by others or by a future session. Triggers: make this reproducible, capture provenance, pin the environment for this result, why can't I reproduce X.
Use when research or scientific code must be trustworthy — verifiably correct, regression-safe, and numerically stable. Triggers: harden this code, is this numerically correct, add regression tests vs known results, make the research code robust.
Use when an approved implementation plan (a docs/rse/specs/plan-*.md file) exists and the next step is writing the code. Triggers: implement the plan, execute the plan, start building, run the plan.
Use when an existing implementation plan needs changes before or during execution. Triggers: update the plan, change the plan, add a phase, revise scope, incorporate experiment results.
Use when a feature, refactor, or multi-file change needs to be designed before coding. Triggers: plan X, design the implementation, how should we build X, create an implementation plan.
| name | responsive-design |
| description | Use when building or refactoring an interface that must work across phone, tablet, and desktop; setting breakpoints; sizing touch targets; serving responsive images; or testing layout across viewports. |
| metadata | {"references":["references/breakpoint-strategy.md","references/container-queries.md","references/fluid-layouts.md"]} |
@media (min-width: ...) only to enhance.clamp() for type/spacing and auto-fit minmax() for grids before reaching for breakpoints.srcset/sizes or <picture>.:root {
--bp-sm: 640px; /* large phones landscape */
--bp-md: 768px; /* tablets portrait */
--bp-lg: 1024px; /* tablets landscape, small laptops */
--bp-xl: 1280px; /* laptops, desktops */
--bp-2xl: 1536px; /* large desktops */
}
/* Mobile-first pattern */
.card { padding: 1rem; }
@media (min-width: 768px) { .card { padding: 1.5rem; display: grid; grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .card { padding: 2rem; grid-template-columns: 1fr 1fr 1fr; } }
:root {
--fs-base: clamp(1rem, 0.5rem + 1vw, 1.125rem);
--fs-h1: clamp(2rem, 1rem + 3vw, 3.5rem);
--fs-h2: clamp(1.5rem, 0.75rem + 2vw, 2.5rem);
}
.section { padding: clamp(1rem, 3vw, 3rem); }
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
.card-container { container-type: inline-size; }
@container (min-width: 400px) { .card { display: grid; grid-template-columns: 200px 1fr; } }
@container (min-width: 600px) { .card { grid-template-columns: 250px 1fr 150px; } }
<img
src="hero-800.jpg"
srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
alt="..."
/>
<picture>
<source media="(min-width: 1024px)" srcset="hero-wide.avif" type="image/avif" />
<source media="(min-width: 1024px)" srcset="hero-wide.webp" type="image/webp" />
<source srcset="hero-narrow.avif" type="image/avif" />
<img src="hero-narrow.jpg" alt="..." />
</picture>
Prefer AVIF, then WebP, then JPEG.
Execute in order. If a step fails, fix before proceeding.
1. Breakpoint sweep. Resize browser through 320, 375, 414, 640, 768, 1024, 1280, 1536, 1920 px. Pass: no horizontal scroll, no overflow, no overlapping content.
2. Touch target audit.
# Lighthouse mobile audit
npx lighthouse https://localhost:3000 --preset=mobile --only-categories=accessibility
Pass: "Tap targets are sized appropriately" score = 100.
3. Image loading verification. Open DevTools Network panel, filter to Img. At 375px viewport, the 400w variant loads (not 1200w). At 1280px viewport, the 1200w variant loads.
4. Container query check. Place the same component in a wide container and a narrow container on one page. Confirm both render appropriately.
5. Real-device test matrix. Pass on each of: iPhone SE (375), iPhone 14 (390), iPad (768), iPad landscape (1024), 13-inch laptop (1366), desktop (1920).
6. Network throttling. Chrome DevTools → Slow 3G. Verify skeleton states or loading indicators appear; no layout shift on image load (CLS < 0.1).
7. Body text minimum. Inspect computed font-size on body text at smallest breakpoint. Pass: ≥ 16px.