Skills
.Work. You
Rest

ui-mobile-first-shadcn

Community

Design UI for mobile first, then scale up.

Design & Creative#mobile-first#responsive#UI design#Tailwind#shadcn
Authorgileck
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ui-mobile-first-shadcn
Download link: https://github.com/gileck/app-template-ai/archive/main.zip#ui-mobile-first-shadcn

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.