Frontend Responsive Design
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