Skills
.Work. You
Rest

modern-ui-designer

Community

Guide modern UI design with Tailwind + shadcn/ui.

Design & Creative#design#accessibility#UI#shadcn/ui#Tailwind CSS#responsive#design-system
Authorsitechfromgeorgia
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a comprehensive framework for creating modern, accessible UI designs using Tailwind CSS and the shadcn/ui component patterns. It helps teams maintain a consistent design system across products, covering typography, spacing, color, and interaction across breakpoints.

Core Features & Use Cases

  • 8px grid system: Enforces consistent spacing and sizing across components and layouts.
  • Neutral + Accent color system: Guides accessible color choices and brand cohesion.
  • Tailwind CSS best practices & shadcn/ui patterns: Provides reusable component patterns and token-based theming.
  • Use Case: Designing a dashboard with responsive cards, forms, navigation, and CTAs that remain accessible across devices.

Quick Start

Start by reviewing the 2025 design standards in SKILL.md, then apply the 8px grid and neutral+accent palette to a sample button and card component using Tailwind utilities like p-4, rounded-lg, and focus:ring.

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: modern-ui-designer
Download link: https://github.com/sitechfromgeorgia/georgian-distribution-system/archive/main.zip#modern-ui-designer

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.