Can I use this for existing React projects?

Absolutely. It is designed to work with .tsx and .jsx files to modify existing components or create new responsive ones.

Does this skill support Tailwind CSS?

Yes, it specifically helps implement Tailwind responsive utility classes like sm, md, lg, and xl for efficient styling.

How does it handle mobile optimization?

It follows mobile-first design patterns, ensuring touch-friendly targets, relative units, and fluid layouts for smaller viewports.

Does it assist with CSS Grid and Flexbox?

Yes, the skill provides guidance on using Grid and Flexbox to create adaptive layouts that respond dynamically to viewport changes.

Frontend Responsive Design

Name: Frontend Responsive Design
Author: Senury

bySenury

0•

Design Tools

Implements mobile-first responsive designs and fluid layouts across all device sizes using modern CSS frameworks and relative units.

This skill provides Claude Code with expert guidance on creating professional-grade, cross-platform web interfaces. It focuses on mobile-first methodologies, utilizing Tailwind CSS breakpoints, CSS Grid, and Flexbox to build fluid layouts that adapt seamlessly from smartphones to ultra-wide monitors. By prioritizing touch-friendly elements and relative unit scaling, it ensures high usability and visual consistency across the entire device spectrum, whether you are building complex navigation menus or refactoring React components.

Key Features

01Mobile-first responsive pattern implementation

02Adaptive typography and spacing systems across breakpoints

03Touch-friendly UI element and navigation menu design

04Tailwind CSS utility class optimization (sm:, md:, lg:, xl:)

050 GitHub stars

06Fluid layout construction using relative units like rem, vh, and %

Use Cases

01Building adaptive navigation menus that transition from hamburger to desktop bars

02Refactoring static React components into responsive, fluid layouts

03Optimizing complex grid-based dashboards for mobile, tablet, and desktop views

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add senury/senury-website frontend-responsive

For use in Claude.ai and ChatGPT

Key Features

01Mobile-first responsive pattern implementation

02Adaptive typography and spacing systems across breakpoints

03Touch-friendly UI element and navigation menu design

04Tailwind CSS utility class optimization (sm:, md:, lg:, xl:)

050 GitHub stars

06Fluid layout construction using relative units like rem, vh, and %

Use Cases

01Building adaptive navigation menus that transition from hamburger to desktop bars

02Refactoring static React components into responsive, fluid layouts

03Optimizing complex grid-based dashboards for mobile, tablet, and desktop views

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add senury/senury-website frontend-responsive

For use in Claude.ai and ChatGPT