How does this skill approach mobile-first development?

It follows the principle of defining base styles for mobile screens first and then adding responsive prefixes (sm:, md:, lg:, etc.) to enhance the layout for larger viewports.

Is this skill specific to Tailwind CSS?

Yes, the skill is primarily designed around Tailwind CSS default breakpoints and utility classes, though the underlying mobile-first principles apply to any CSS framework.

Does it include React hooks for responsive logic?

Yes, it provides a custom useMediaQuery hook that allows for conditional rendering of components based on the current window width.

Does it handle complex components like data tables?

Absolutely. It includes patterns for 'Responsive Tables' that automatically switch between standard table layouts on desktop and card-based layouts on mobile.

Responsive Design for React

Name: Responsive Design for React
Author: IvanTorresEdge

byIvanTorresEdge

Design Tools

Implements mobile-first responsive design patterns and adaptive layouts for modern React applications using Tailwind CSS.

About

This skill provides a comprehensive toolkit for building adaptive, mobile-first interfaces in React. It equips Claude with production-ready code patterns for common responsive challenges, including navigation menus, data tables, and complex grid layouts. By standardizing on Tailwind CSS breakpoints and mobile-first principles, it ensures that applications remain functional and visually appealing across all device sizes while adhering to accessibility best practices and fluid typography standards.

Key Features

0 GitHub stars
Fluid typography and spacing scales using CSS clamp and Tailwind
Mobile-first layout patterns for grids, flexbox, and containers
Custom useMediaQuery hook for responsive logic in React components
Adaptive data patterns that transition from tables to card views
Responsive navigation and sidebar component implementations

Use Cases

Implementing complex product grids that adapt to various screen widths
Building a dashboard that works seamlessly on mobile, tablet, and desktop
Creating accessible, responsive navigation menus with mobile toggle functionality

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ivantorresedge/molcajete.ai responsive-design

For use in Claude.ai and ChatGPT

Download Skill

GitHub