Does this skill work with Tailwind CSS?

Yes, it is specifically designed to handle Tailwind responsive utility classes like sm, md, lg, and xl for seamless styling across breakpoints.

Can it help convert fixed layouts to responsive ones?

Absolutely. The skill provides guidance on replacing fixed pixel values with relative units like rem, em, and percentages to create fluid designs.

Is it compatible with React and TypeScript?

Yes, it is optimized for .tsx and .jsx files, ensuring that React components follow responsive best practices and accessible structures.

Does it address mobile-specific UI needs?

Yes, it includes instructions for implementing touch-friendly UI elements, optimizing tap targets, and handling mobile-specific navigation patterns.

Frontend Responsive Design

Name: Frontend Responsive Design
Author: aiskillstore

byaiskillstore

•

114

•

デザインツール

Implements mobile-first responsive interfaces and fluid layouts across all device sizes using modern CSS frameworks and React.

This skill empowers Claude Code to build and maintain sophisticated responsive web interfaces by adhering to modern mobile-first design principles. It provides specific guidance for implementing fluid layouts, breakpoint-specific styling with Tailwind CSS, and touch-friendly UI components. By leveraging relative units, adaptive grid systems, and flexible typography, it ensures that React components remain consistent and functional across mobile, tablet, and desktop viewports while following industry-standard coding practices.

主な機能

01114 GitHub stars

02Mobile-first design pattern implementation

03Tailwind CSS responsive utility management (sm through 2xl)

04Fluid layout construction using CSS Grid and Flexbox

05Relative unit scaling (rem, em, %, vh, vw) for flexible UI

06Touch-friendly interface optimization and tap target adjustment

ユースケース

01Converting static desktop-only React components into fluid, responsive layouts

02Optimizing complex navigation menus and headers for mobile and tablet views

03Implementing scalable typography and spacing systems that adapt to screen size

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add aiskillstore/marketplace devanb

For use in Claude.ai and ChatGPT