What is a mobile-first approach in this context?

A mobile-first approach prioritizes mobile styling as the base layer and uses media queries to add enhancements for larger screens, ensuring better performance and accessibility.

Is this compatible with modern frontend frameworks?

Yes, the patterns are designed to be framework-agnostic but include specific examples for React, TypeScript, and standard CSS/HTML.

Can I use this for fluid typography?

Absolutely, it provides implementation patterns for CSS clamp and container queries to create text that scales smoothly across different viewport sizes.

Does this skill work with Tailwind CSS?

Yes, it includes predefined breakpoint configurations and utility class patterns specifically optimized for Tailwind CSS integration.

Are touch gestures included in these patterns?

Yes, the skill includes patterns for touch-friendly targets (minimum 44x44px) and React hooks for handling common mobile gestures like swipes.

Responsive Design Patterns

Name: Responsive Design Patterns
Author: organvm-iv-taxis

byorganvm-iv-taxis

•

デザインツール

Implements mobile-first layouts, fluid typography, and adaptive components for seamless cross-device user experiences.

This skill provides Claude with a comprehensive framework for building modern, responsive web interfaces using mobile-first methodologies. It includes standardized breakpoint systems compatible with Tailwind CSS, fluid typography patterns utilizing CSS clamp and container queries, and optimized media handling via responsive image tags. By applying these patterns, developers can ensure their applications are touch-friendly, accessible, and performant across all screen sizes, from mobile handsets to large desktop monitors.

主な機能

01Responsive image optimization using the HTML picture element and lazy loading

022 GitHub stars

03Touch-friendly UI patterns including minimum touch targets and swipe gesture hooks

04Mobile-first layout patterns with progressive enhancement for tablets and desktops

05Fluid typography implementations using CSS clamp and container queries

06Standardized multi-tier breakpoint system compatible with Tailwind CSS

ユースケース

01Converting desktop-only web applications into fully responsive, mobile-optimized experiences

02Implementing complex touch interactions and fluid content for modern web browsers

03Building a new design system with consistent scaling and spacing across all devices

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add organvm-iv-taxis/a-i--skills responsive-design-patterns

For use in Claude.ai and ChatGPT

Download Skill