skills.rest
linsomniac
linsomniacCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/linsomniac/smtphotel --skill react-mobile
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
majesticlabs-devmajesticlabs-dev
47

tailwind-styling

Generate responsive Tailwind CSS styles for React components.

Official
Intermediate
leonanpereirapintoleonanpereirapinto
1

a11y-testing

Automate WCAG accessibility checks with jest-axe and Playwright axe-core.

Community
Advanced
leejayhsuleejayhsu

TanStack Router

Implement type-safe, file-based React routing with TanStack Router.

Community
Advanced
HsnSaboorHsnSaboor

mobile-development

Guide cross-platform and native mobile app development with React Native, Flutter, Swift, and Kotlin.

Community
Advanced