skills.rest
gileck
gileckCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/gileck/app-template-ai --skill ui-mobile-first-shadcn
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
vanman2024vanman2024
10

tailwind-shadcn-setup

Automate Tailwind CSS and shadcn/ui setup for Next.js projects.

Community
Advanced
HieubkavHieubkav

Frontend Responsive

Implement responsive mobile-first layouts with fluid containers, breakpoints, and touch targets.

Community
Basic
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate
Asymmetric-alAsymmetric-al
1

responsive-design

Build mobile-first CSS layouts with Grid, Flexbox, and media queries.

Official
Intermediate