What layout techniques does this skill support?

It supports modern CSS layout techniques including CSS Grid, Flexbox, and Container Queries for highly modular and adaptive components.

How does it handle responsive images?

It provides implementation patterns for the picture element and srcset attributes to ensure users download the optimally sized image for their specific device.

Does it follow the Mobile First principle?

Yes, the skill prioritizes mobile-first development, starting with the smallest screen sizes and progressively enhancing the layout for larger displays.

Can I define custom breakpoints?

Yes, the skill allows for configurable breakpoint settings to align with specific project requirements or design system standards.

Responsive Web Design

Name: Responsive Web Design
Author: Protagonistss

byProtagonistss

デザインツール

Architects fluid and adaptive web interfaces that ensure an optimal user experience across mobile, tablet, and desktop devices.

概要

This skill empowers Claude to design and implement professional-grade responsive web architectures using modern CSS techniques. It focuses on mobile-first strategies, scientific breakpoint management, and flexible layout systems like CSS Grid and Flexbox. Whether you are building complex dashboards or simple landing pages, this skill provides the patterns needed for touch-friendly interfaces, responsive media delivery, and container-based layouts, ensuring your web applications look and perform perfectly on any screen size.

主な機能

Responsive media optimization including images and video
Automated breakpoint strategy and media query management
Mobile-first design implementation and progressive enhancement
Flexible grid and elastic layout system generation
Touch-friendly UI patterns for enhanced mobile usability
0 GitHub stars

ユースケース

Establishing consistent layout constraints and gutters for a design system
Designing complex responsive components like navigation menus and data tables
Transforming a desktop-centric layout into a fluid, multi-device experience

概要

主な機能

Responsive media optimization including images and video
Automated breakpoint strategy and media query management
Mobile-first design implementation and progressive enhancement
Flexible grid and elastic layout system generation
Touch-friendly UI patterns for enhanced mobile usability
0 GitHub stars

ユースケース

Establishing consistent layout constraints and gutters for a design system
Designing complex responsive components like navigation menus and data tables
Transforming a desktop-centric layout into a fluid, multi-device experience