ui-mobile-first-shadcn

Enforce mobile-first UI rules for shadcn and Tailwind in Next.js apps.

Updated Mar 28, 2025

Search Tags:#mobile-first #responsive #UI design #Tailwind #shadcn

Ready to run

npx skills add https://github.com/gileck/app-template-ai --skill ui-mobile-first-shadcn

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-mobile-first-shadcn
Source: https://github.com/gileck/app-template-ai/tree/main/.ai/skills/template/ui-mobile-first-shadcn
Command: npx skills add https://github.com/gileck/app-template-ai --skill ui-mobile-first-shadcn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill codifies a consistent mobile-first UI approach for building interfaces with shadcn UI and Tailwind, ensuring usability on small screens before scaling up.

Core Features & Use Cases

Mobile-first baseline: Start styling for ~400px width and progressively enhance with sm:, md:, lg: breakpoints.
Touch-friendly UX: Enforce 44px minimum touch targets and thumb-friendly layouts.
Consistent theming: Use semantic tokens and ensure dark mode compatibility without conditional classes.

Quick Start

Begin implementing new UI components by starting with mobile base styles and then layering responsive breakpoints. Validate layouts at common mobile widths and ensure no horizontal scrolling.

Frequently Asked Questions about ui-mobile-first-shadcn

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

FAQPage Schema

How do I enforce a mobile-first responsive UI design with Tailwind and shadcn/ui?▼

To enforce a mobile-first responsive UI design with Tailwind and shadcn/ui, start styling for a ~400px base width and progressively layer sm:, md:, and lg: breakpoints to scale up components.

What is the minimum touch target size for mobile-first UI components?▼

The minimum touch target size for mobile-first UI components is 44px. Enforcing this dimension ensures touch-friendly UX and thumb-friendly layouts before applying responsive scaling.

Does this mobile-first UI approach support dark mode without conditional classes?▼

Yes, this mobile-first UI approach supports dark mode without conditional classes by using semantic tokens for consistent theming. This ensures dark mode compatibility directly within the Tailwind and shadcn/ui setup.

How do I prevent horizontal scrolling when building responsive layouts in Next.js?▼

To prevent horizontal scrolling in responsive Next.js layouts, validate layouts at common mobile widths like ~400px and apply mobile-first base styles before scaling up with Tailwind breakpoints.

Can I use this Skill to apply mobile-first rules to existing shadcn components?▼

Yes, you can use this Skill to apply mobile-first rules to existing shadcn components. It codifies base mobile styles, 44px touch targets, and token-based theming to guide component styling for small screens.