Responsive web design

Skill VRIL-LABS/skill-jam/skills/ai-ml/claude-skills-main/claude-skills-main/plugins/responsive-web-design/skills/responsive-web-design

Builds adaptive web interfaces using Flexbox, CSS Grid, and media queries with a mobile-first approach. Use when creating multi-device layouts, implementing flexible UI systems, or ensuring cross-browser compatibility.From its SKILL.md

Install

npx -y skills add VRIL-LABS/skill-jam --skill responsive-web-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.0 KB, 543 tokens by cl100k_base, as published. Nobody here has run it

Responsive Web Design

Build adaptive interfaces using modern CSS techniques for all screen sizes.

Mobile-First Media Queries

/* 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;
  }
}

Flexible Grid

.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 */
  }
}

Fluid Typography

/* Scales smoothly between breakpoints */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

p {
  font-size: clamp(1rem, 2vw, 1.25rem);
}

Responsive Images

img {
  max-width: 100%;
  height: auto;
}

.hero-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Flexbox Navigation

.nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

Best Practices

Start with mobile styles first
Use flexible units (%, rem, vw)
Test on real devices
Ensure minimum 48px touch targets
Maintain readable line lengths (45-75 chars)
Use CSS Grid for 2D layouts, Flexbox for 1D

Resources

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.