UI Styling Skill

Comprehensive skill for creating beautiful, accessible user interfaces combining shadcn/ui components, Tailwind CSS utility styling, and canvas-based visual design systems.

Reference

shadcn/ui:

https://ui.shadcn.com/llms.txt

Tailwind CSS:

https://tailwindcss.com/docs

When to Use This Skill

Use when:

Building UI with React-based frameworks (Next.js, Vite, Remix, Astro)

Implementing accessible components (dialogs, forms, tables, navigation)

Styling with utility-first CSS approach

Creating responsive, mobile-first layouts

Implementing dark mode and theme customization

Building design systems with consistent tokens

Generating visual designs, posters, or brand materials

Rapid prototyping with immediate visual feedback

Adding complex UI patterns (data tables, charts, command palettes)

Core Stack

Component Layer: shadcn/ui

Pre-built accessible components via Radix UI primitives

Copy-paste distribution model (components live in your codebase)

TypeScript-first with full type safety

Composable primitives for complex UIs

CLI-based installation and management

Styling Layer: Tailwind CSS

Utility-first CSS framework

Build-time processing with zero runtime overhead

Mobile-first responsive design

Consistent design tokens (colors, spacing, typography)

Automatic dead code elimination

Visual Design Layer: Canvas

Museum-quality visual compositions

Philosophy-driven design approach

Sophisticated visual communication

Minimal text, maximum visual impact

Systematic patterns and refined aesthetics

Quick Start

Component + Styling Setup

Install shadcn/ui with Tailwind:

npx shadcn@latest init

CLI prompts for framework, TypeScript, paths, and theme preferences. This configures both shadcn/ui and Tailwind CSS.

Add components:

npx shadcn@latest

add

button card dialog form

Use components with utility styling:

import

{

Button

}

from

"@/components/ui/button"

import

{

Card

,

CardHeader

,

CardTitle

,

CardContent

}

from

"@/components/ui/card"

export

function

Dashboard

(

)

{

return

(

<

div

className

=

"

container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3

"

>

<

Card

className

=

"

hover:shadow-lg transition-shadow

"

>

<

CardHeader

>

<

CardTitle

className

=

"

text-2xl font-bold

"

>

Analytics

</

CardTitle

>

</

CardHeader

>

<

CardContent

className

=

"

space-y-4

"

>

<

p

className

=

"

text-muted-foreground

"

>

View your metrics

</

p

>

<

Button

variant

=

"

default

"

className

=

"

w-full

"

>

View Details

</

Button

>

</

CardContent

>

</

Card

>

</

div

>

)

}

Alternative: Tailwind-Only Setup

Vite projects:

npm

install

-D

tailwindcss @tailwindcss/vite

// vite.config.ts

import

tailwindcss

from

'@tailwindcss/vite'

export

default

{

plugins

:

[

tailwindcss

(

)

]

}

/ src/index.css /

@import

"tailwindcss"

;

Component Library Guide

Comprehensive component catalog with usage patterns, installation, and composition examples.

See:

references/shadcn-components.md

Covers:

Form & input components (Button, Input, Select, Checkbox, Date Picker, Form validation)

Layout & navigation (Card, Tabs, Accordion, Navigation Menu)

Overlays & dialogs (Dialog, Drawer, Popover, Toast, Command)

Feedback & status (Alert, Progress, Skeleton)

Display components (Table, Data Table, Avatar, Badge)

Theme & Customization

Theme configuration, CSS variables, dark mode implementation, and component customization.

See:

references/shadcn-theming.md

Covers:

Dark mode setup with next-themes

CSS variable system

Color customization and palettes

Component variant customization

Theme toggle implementation

Accessibility Patterns

ARIA patterns, keyboard navigation, screen reader support, and accessible component usage.

See:

references/shadcn-accessibility.md

Covers:

Radix UI accessibility features

Keyboard navigation patterns

Focus management

Screen reader announcements

Form validation accessibility

Tailwind Utilities

Core utility classes for layout, spacing, typography, colors, borders, and shadows.

See:

references/tailwind-utilities.md

Covers:

Layout utilities (Flexbox, Grid, positioning)

Spacing system (padding, margin, gap)

Typography (font sizes, weights, alignment, line height)

Colors and backgrounds

Borders and shadows

Arbitrary values for custom styling

Responsive Design

Mobile-first breakpoints, responsive utilities, and adaptive layouts.

See:

references/tailwind-responsive.md

Covers:

Mobile-first approach

Breakpoint system (sm, md, lg, xl, 2xl)

Responsive utility patterns

Container queries

Max-width queries

Custom breakpoints

Tailwind Customization

Config file structure, custom utilities, plugins, and theme extensions.

See:

references/tailwind-customization.md

Covers:

@theme directive for custom tokens

Custom colors and fonts

Spacing and breakpoint extensions

Custom utility creation

Custom variants

Layer organization (@layer base, components, utilities)

Apply directive for component extraction

Visual Design System

Canvas-based design philosophy, visual communication principles, and sophisticated compositions.

See:

references/canvas-design-system.md

Covers:

Design philosophy approach

Visual communication over text

Systematic patterns and composition

Color, form, and spatial design

Minimal text integration

Museum-quality execution

Multi-page design systems

Utility Scripts

Python automation for component installation and configuration generation.

shadcn_add.py

Add shadcn/ui components with dependency handling:

python scripts/shadcn_add.py button card dialog

tailwind_config_gen.py

Generate tailwind.config.js with custom theme:

python scripts/tailwind_config_gen.py

--colors

brand:blue

--fonts

display:Inter

Best Practices

Component Composition

Build complex UIs from simple, composable primitives

Utility-First Styling

Use Tailwind classes directly; extract components only for true repetition

Mobile-First Responsive

Start with mobile styles, layer responsive variants

Accessibility-First

Leverage Radix UI primitives, add focus states, use semantic HTML

Design Tokens

Use consistent spacing scale, color palettes, typography system

Dark Mode Consistency

Apply dark variants to all themed elements

Performance

Leverage automatic CSS purging, avoid dynamic class names

TypeScript

Use full type safety for better DX

Visual Hierarchy

Let composition guide attention, use spacing and color intentionally
Expert Craftsmanship: Every detail matters - treat UI as a craft Reference Navigation Component Library references/shadcn-components.md - Complete component catalog references/shadcn-theming.md - Theming and customization references/shadcn-accessibility.md - Accessibility patterns Styling System references/tailwind-utilities.md - Core utility classes references/tailwind-responsive.md - Responsive design references/tailwind-customization.md - Configuration and extensions Visual Design references/canvas-design-system.md - Design philosophy and canvas workflows Automation scripts/shadcn_add.py - Component installation scripts/tailwind_config_gen.py - Config generation Common Patterns Form with validation: import { useForm } from "react-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import * as z from "zod" import { Form , FormField , FormItem , FormLabel , FormControl , FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" const schema = z . object ( { email : z . string ( ) . email ( ) , password : z . string ( ) . min ( 8 ) } ) export function LoginForm ( ) { const form = useForm ( { resolver : zodResolver ( schema ) , defaultValues : { email : "" , password : "" } } ) return ( < Form { ... form }

< form onSubmit = { form . handleSubmit ( console . log ) } className = " space-y-6 "

< FormField control = { form . control } name = " email " render = { ( { field } ) => ( < FormItem

< FormLabel

Email </ FormLabel

< FormControl

< Input type = " email " { ... field } /> </ FormControl

< FormMessage /> </ FormItem

) } /> < Button type = " submit " className = " w-full "

Sign In </ Button

</ form

</ Form

) } Responsive layout with dark mode: < div className = " min-h-screen bg-white dark:bg-gray-900 "

< div className = " container mx-auto px-4 py-8 "

< div className = " grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 "

< Card className = " bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 "

< CardContent className = " p-6 "

< h3 className = " text-xl font-semibold text-gray-900 dark:text-white "

Content </ h3

</ CardContent

</ Card

</ div

</ div

</ div

Resources shadcn/ui Docs: https://ui.shadcn.com Tailwind CSS Docs: https://tailwindcss.com Radix UI: https://radix-ui.com Tailwind UI: https://tailwindui.com Headless UI: https://headlessui.com v0 (AI UI Generator): https://v0.dev

ckm:ui-styling

安装