How is fluid typography implemented?

The skill uses the CSS clamp() function to create text that scales smoothly between a minimum and maximum size based on the viewport width, eliminating the need for excessive media queries.

What are touch-friendly patterns?

These are design standards included in the skill that ensure usability on mobile, such as maintaining a minimum 44x44px touch target for buttons and implementing swipe gesture hooks.

How does this skill handle different screen sizes?

The skill utilizes a standardized breakpoint system (from 640px to 1536px) and follows a mobile-first philosophy, where styles are defined for small screens first and progressively enhanced for larger displays.

Does it support modern CSS frameworks like Tailwind?

Yes, it includes specific configuration patterns for Tailwind CSS, allowing you to easily map breakpoints to your theme and use utility classes for responsive layouts.

Responsive Design Patterns

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

byorganvm-iv-taxis

•

设计工具

Implements mobile-first responsive layouts, fluid typography, and touch-optimized components for modern web applications.

This Claude Code skill provides a comprehensive framework for building adaptive user interfaces that work seamlessly across all device sizes. It equips Claude with standardized breakpoint systems, Tailwind CSS configurations, and mobile-first CSS patterns, while also implementing advanced techniques like fluid typography using CSS clamp and responsive image handling. By focusing on touch-friendly interactions and swipe gestures, the skill ensures that developers can rapidly prototype and deploy production-grade frontend interfaces that prioritize performance and usability on both mobile and desktop environments.

主要功能

01Fluid typography implementation using CSS clamp and container queries

02Standardized breakpoint system ranging from small devices to 2xl displays

03Mobile-first CSS patterns and Tailwind CSS configuration templates

04Responsive image optimization via the HTML5 picture element

05Touch-optimized UI patterns including swipe gestures and minimum hit targets

062 GitHub stars

使用场景

01Implementing advanced touch interactions and swipe gestures for mobile web apps

02Optimizing site performance with adaptive image loading across varying screen resolutions

03Refactoring a desktop-only application into a fully responsive, mobile-first design

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