skilld
All skills
wshobson avatar

/responsive-design

@be57c0b
by Seth Hobsonwshobson/agents40k stars
4,281

Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.

Ask your Agent

Use this Skill: https://skilld.dev/gh/wshobson/agents/responsive-design

This session only. Nothing lands on disk.

SKILL.md

≈66 tokens always: the name and description. ≈425 when used: this file. ≈10k more on demand in 4 files.

Responsive Design

Master modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts.

When to Use This Skill

  • Implementing mobile-first responsive layouts
  • Using container queries for component-based responsiveness
  • Creating fluid typography and spacing scales
  • Building complex layouts with CSS Grid and Flexbox
  • Designing breakpoint strategies for design systems
  • Implementing responsive images and media
  • Creating adaptive navigation patterns
  • Building responsive tables and data displays

Detailed patterns and worked examples

Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.

Best Practices

  1. Mobile-First: Start with mobile styles, enhance for larger screens
  2. Content Breakpoints: Set breakpoints based on content, not devices
  3. Fluid Over Fixed: Use fluid values for typography and spacing
  4. Container Queries: Use for component-level responsiveness
  5. Test Real Devices: Simulators don't catch all issues
  6. Performance: Optimize images, lazy load off-screen content
  7. Touch Targets: Maintain 44x44px minimum on mobile
  8. Logical Properties: Use inline/block for internationalization

Common Issues

  • Horizontal Overflow: Content breaking out of viewport
  • Fixed Widths: Using px instead of relative units
  • Viewport Height: 100vh issues on mobile browsers
  • Font Size: Text too small on mobile
  • Touch Targets: Buttons too small to tap accurately
  • Aspect Ratio: Images squishing or stretching
  • Z-Index Stacking: Overlays breaking on different screens

Source: SKILL.md on GitHub

Third-party checks

No alerts16d5 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    The skill provides comprehensive documentation and code examples for implementing modern responsive design using CSS and JavaScript. No security vulnerabilities, malicious code, or suspicious patterns were detected.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • Runlayer6mo

    4 files scanned · No issues

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at be57c0b. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 3 days ago.

Activeupdated 4 months ago

Topics

  • responsive-design
  • css-grid
  • flexbox
  • container-queries
  • mobile-first
  • breakpoints
  • fluid-typography
  • css
  • web-design
  • accessibility

README badge

README badge for wshobson/agents/responsive-design

What it does

Implements modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Covers component-level responsiveness, fluid spacing scales, and adaptive patterns for navigation, tables, and images across all screen sizes.

Generated from the current SKILL.md.

Frequently asked

Does this skill cover container queries?
Yes. Container queries are listed as a core technique for implementing component-level responsive behavior without relying on viewport-based breakpoints.
What CSS layout methods does this skill teach?
The skill covers CSS Grid, Flexbox, and fluid typography/spacing scales, with emphasis on mobile-first breakpoint strategies.
Does this include guidance on responsive images?
Yes. Implementing responsive images and media is listed as a core use case, along with performance optimization like lazy loading.
Are there worked examples in the skill?
Pattern documentation and worked examples are provided in a `references/details.md` file bundled with the skill.

Generated from the current SKILL.md. These answers refresh after source changes.