What is the mobile-first philosophy used in this skill?

This skill prioritizes content for small screens first (320px) and uses exclusively min-width media queries to add complexity as screen real estate increases, ensuring a robust progressive enhancement strategy.

How are touch targets handled for mobile accessibility?

The skill enforces a minimum 44x44px touch target size with 8px spacing to ensure interfaces remain accessible and usable on touch-screen devices.

Does this skill support modern CSS features like Container Queries?

Yes, it provides specific guidance on using container queries to decouple component responsiveness from the viewport, allowing elements to adapt based on their parent container's size.

How does it help with Core Web Vitals like LCP?

It implements best practices for responsive images, including using fetchpriority='high' for LCP images and mandatory width/height attributes to prevent Layout Shift (CLS).

Responsive Web Design Principles

Name: Responsive Web Design Principles
Author: oborchers

byoborchers

•

设计工具

Implements mobile-first, fluid layouts and responsive UI patterns using modern CSS techniques like container queries and fluid typography.

The responsive-design skill provides an opinionated, research-backed framework for building modern SaaS products that work seamlessly across all devices. It guides Claude in implementing a mobile-first philosophy, shifting away from desktop-centric development to focus on content prioritization and progressive enhancement. By leveraging fluid grids, CSS container queries, and high-performance image loading strategies, this skill ensures that web applications are not only visually adaptive but also optimized for accessibility and core web vitals like LCP and CLS.

主要功能

01High-performance responsive image patterns (srcset, picture, and fetchpriority)

02Component-level responsiveness using modern CSS Container Queries

039 GitHub stars

04Mobile-first strategy using standardized min-width media queries

05Fluid layout implementation with CSS Grid auto-fit and clamp() functions

06Mobile-optimized UI patterns for navigation, tables, and 44px touch targets

使用场景

01Building reusable UI components that adapt to their container size rather than the viewport

02Optimizing frontend performance through lazy-loading and responsive image art direction

03Refactoring desktop-only layouts into fluid, mobile-first responsive interfaces

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add oborchers/fractional-cto responsive-design

For use in Claude.ai and ChatGPT

主要功能

01High-performance responsive image patterns (srcset, picture, and fetchpriority)

02Component-level responsiveness using modern CSS Container Queries

039 GitHub stars

04Mobile-first strategy using standardized min-width media queries

05Fluid layout implementation with CSS Grid auto-fit and clamp() functions

06Mobile-optimized UI patterns for navigation, tables, and 44px touch targets

使用场景

01Building reusable UI components that adapt to their container size rather than the viewport

02Optimizing frontend performance through lazy-loading and responsive image art direction

03Refactoring desktop-only layouts into fluid, mobile-first responsive interfaces

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add oborchers/fractional-cto responsive-design

For use in Claude.ai and ChatGPT