Builds responsive web layouts using Flexbox, CSS Grid, media queries, and mobile-first approach for multi-device compatibility and flexible UIs.
npx claudepluginhub secondsky/claude-skills --plugin responsive-web-designThis skill uses the workspace's default tool permissions.
Build adaptive interfaces using modern CSS techniques for all screen sizes.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
Build adaptive interfaces using modern CSS techniques for all screen sizes.
/* Base: Mobile (320px+) */
.container {
padding: 1rem;
}
/* Tablet (640px+) */
@media (min-width: 640px) {
.container {
padding: 2rem;
max-width: 640px;
margin: 0 auto;
}
}
/* Desktop (1024px+) */
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
.grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr; /* Mobile: single column */
}
@media (min-width: 640px) {
.grid {
grid-template-columns: repeat(2, 1fr); /* Tablet: 2 columns */
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */
}
}
/* Scales smoothly between breakpoints */
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
}
p {
font-size: clamp(1rem, 2vw, 1.25rem);
}
img {
max-width: 100%;
height: auto;
}
.hero-image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.nav {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
@media (min-width: 768px) {
.nav {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}