react-mobile

Develop mobile-first React components with Tailwind CSS and TanStack Query.

Updated Jan 17, 2026

Search Tags:#accessibility #react #mobile #tailwind #responsive-design #ui-components #tanstack-query

Ready to run

npx skills add https://github.com/linsomniac/smtphotel --skill react-mobile

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-mobile
Source: https://github.com/linsomniac/smtphotel/tree/main/.claude/skills/react-mobile
Command: npx skills add https://github.com/linsomniac/smtphotel --skill react-mobile

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Develop mobile-first React UI components with Tailwind CSS and TanStack Query patterns to enable accessible, responsive interfaces.

Core Features & Use Cases

Mobile-first CSS guidelines: Use Tailwind's mobile-first breakpoints and ensure 44px touch targets for interactive elements.
Loading and empty states best practices: Implement skeleton loading states and handle empty data with friendly messages.
Accessibility & keyboard navigation: Include ARIA attributes, proper semantics, and keyboard operability to ensure inclusive UI.
State management with TanStack Query patterns: Provide basic query and mutation patterns for data fetching, caching, and optimistic updates.

Quick Start

Create a mobile-first React component using Tailwind and TanStack Query to begin building accessible, responsive UI.

Frequently Asked Questions about react-mobile

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build mobile-first React components with Tailwind CSS?▼

Build mobile-first React components with Tailwind CSS by applying mobile-first breakpoints, ensuring 44px touch targets for interactive elements, and implementing accessible navigation with proper ARIA attributes and keyboard operability.

What's the best way to handle data loading states in React using TanStack Query?▼

Handle data loading states in React using TanStack Query by implementing skeleton loading states for pending requests, providing friendly empty data messages, and applying basic query and mutation patterns for robust data fetching and optimistic updates.

Does this mobile-first UI approach support accessible keyboard navigation?▼

Yes, this mobile-first UI approach supports accessible keyboard navigation by including ARIA attributes, proper HTML semantics, and full keyboard operability to ensure inclusive interfaces for all users interacting with your React components.

How do I ensure responsive layouts meet mobile touch target standards?▼

Ensure responsive layouts meet mobile touch target standards by using Tailwind's mobile-first breakpoints and verifying that all interactive elements maintain a minimum 44px touch target size for accessible mobile interaction.

Can I use TanStack Query patterns for state management in responsive React apps?▼

Yes, you can use TanStack Query patterns for state management in responsive React apps to handle data fetching, caching, and optimistic updates while maintaining accessible and mobile-first UI components.

Why do my React UI components fail accessibility standards on mobile devices?▼

React UI components fail accessibility standards on mobile devices when they lack ARIA attributes, proper semantics, keyboard operability, and adequate 44px touch targets required for inclusive mobile-first interfaces.