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

0•

Design Tools

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.

Key Features

01Responsive media optimization including images and video

02Automated breakpoint strategy and media query management

03Mobile-first design implementation and progressive enhancement

04Flexible grid and elastic layout system generation

05Touch-friendly UI patterns for enhanced mobile usability

060 GitHub stars

Use Cases

01Establishing consistent layout constraints and gutters for a design system

02Designing complex responsive components like navigation menus and data tables

03Transforming a desktop-centric layout into a fluid, multi-device experience

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add protagonistss/claude-plugins responsive

For use in Claude.ai and ChatGPT

Download Skill