Back to Details

ui-styling

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI Styling Skill

UI样式设计技能

Comprehensive skill for creating beautiful, accessible user interfaces combining shadcn/ui components, Tailwind CSS utility styling, and canvas-based visual design systems.
这是一项综合性技能，结合shadcn/ui组件、Tailwind CSS实用类样式和基于画布的视觉设计系统，用于创建美观且可访问的用户界面。

Reference

参考资料

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)
适用于以下场景：
  • 使用基于React的框架（Next.js、Vite、Remix、Astro）构建UI
  • 实现可访问组件（对话框、表单、表格、导航）
  • 采用优先实用类的CSS方法进行样式设计
  • 创建响应式、移动优先的布局
  • 实现深色模式和主题自定义
  • 构建带有一致设计标记的设计系统
  • 生成视觉设计、海报或品牌物料
  • 通过即时视觉反馈进行快速原型开发
  • 添加复杂UI模式（数据表格、图表、命令面板）

Core Stack

核心技术栈

Component Layer: shadcn/ui

组件层：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
  • 通过Radix UI基元提供预构建的可访问组件
  • 复制粘贴式分发模式（组件直接存在于你的代码库中）
  • 优先支持TypeScript，具备完整类型安全
  • 用于复杂UI的可组合基元
  • 基于CLI的安装和管理

Styling Layer: Tailwind CSS

样式层：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
  • 优先实用类的CSS框架
  • 构建时处理，无运行时开销
  • 移动优先的响应式设计
  • 一致的设计标记（颜色、间距、排版）
  • 自动清除无用代码

Visual Design Layer: Canvas

视觉设计层：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:
bash
npx shadcn@latest init
CLI prompts for framework, TypeScript, paths, and theme preferences. This configures both shadcn/ui and Tailwind CSS.
Add components:
bash
npx shadcn@latest add button card dialog form
Use components with utility styling:
tsx
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>
  )
}
使用Tailwind安装shadcn/ui：
bash
npx shadcn@latest init
CLI会提示选择框架、TypeScript、路径和主题偏好，完成shadcn/ui和Tailwind CSS的配置。
添加组件：
bash
npx shadcn@latest add button card dialog form
结合实用类样式使用组件：
tsx
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

替代方案：仅使用Tailwind设置

Vite projects:
bash
npm install -D tailwindcss @tailwindcss/vite
javascript
// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }
css
/* src/index.css */
@import "tailwindcss";
Vite项目：
bash
npm install -D tailwindcss @tailwindcss/vite
javascript
// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }
css
/* 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)
包含使用模式、安装和组合示例的综合组件目录。
查看：
references/shadcn-components.md
涵盖内容：
  • 表单与输入组件（Button、Input、Select、Checkbox、日期选择器、表单验证）
  • 布局与导航（Card、Tabs、Accordion、导航菜单）
  • 覆盖层与对话框（Dialog、Drawer、Popover、Toast、Command）
  • 反馈与状态（Alert、Progress、Skeleton）
  • 展示组件（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
主题配置、CSS变量、深色模式实现和组件自定义。
查看：
references/shadcn-theming.md
涵盖内容：
  • 使用next-themes设置深色模式
  • CSS变量系统
  • 颜色自定义与调色板
  • 组件变体自定义
  • 主题切换实现

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
ARIA模式、键盘导航、屏幕阅读器支持和可访问组件使用方法。
查看：
references/shadcn-accessibility.md
涵盖内容：
  • Radix UI可访问性功能
  • 键盘导航模式
  • 焦点管理
  • 屏幕阅读器提示
  • 表单验证可访问性

Tailwind Utilities

Tailwind实用类

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
用于布局、间距、排版、颜色、边框和阴影的核心实用类。
查看：
references/tailwind-utilities.md
涵盖内容：
  • 布局实用类（Flexbox、Grid、定位）
  • 间距系统（内边距、外边距、间隙）
  • 排版（字体大小、字重、对齐、行高）
  • 颜色与背景
  • 边框与阴影
  • 用于自定义样式的任意值

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
移动优先断点、响应式实用类和自适应布局。
查看：
references/tailwind-responsive.md
涵盖内容：
  • 移动优先方法
  • 断点系统（sm、md、lg、xl、2xl）
  • 响应式实用类模式
  • 容器查询
  • 最大宽度查询
  • 自定义断点

Tailwind Customization

Tailwind自定义

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
配置文件结构、自定义实用类、插件和主题扩展。
查看：
references/tailwind-customization.md
涵盖内容：
  • 用于自定义标记的@theme指令
  • 自定义颜色和字体
  • 间距和断点扩展
  • 自定义实用类创建
  • 自定义变体
  • 层级组织（@layer base、components、utilities）
  • 用于组件提取的@apply指令

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
基于画布的设计理念、视觉传达原则和精致构图。
查看：
references/canvas-design-system.md
涵盖内容：
  • 设计理念方法
  • 视觉传达优先于文字
  • 系统化模式和构图
  • 颜色、形态和空间设计
  • 极简文字整合
  • 博物馆级别的执行标准
  • 多页面设计系统

Utility Scripts

实用脚本

Python automation for component installation and configuration generation.
用于组件安装和配置生成的Python自动化脚本。

shadcn_add.py

shadcn_add.py

Add shadcn/ui components with dependency handling:
bash
python scripts/shadcn_add.py button card dialog
处理依赖并添加shadcn/ui组件：
bash
python scripts/shadcn_add.py button card dialog

tailwind_config_gen.py

tailwind_config_gen.py

Generate tailwind.config.js with custom theme:
bash
python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter
生成带有自定义主题的tailwind.config.js：
bash
python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter

Best Practices

最佳实践

  1. Component Composition: Build complex UIs from simple, composable primitives
  2. Utility-First Styling: Use Tailwind classes directly; extract components only for true repetition
  3. Mobile-First Responsive: Start with mobile styles, layer responsive variants
  4. Accessibility-First: Leverage Radix UI primitives, add focus states, use semantic HTML
  5. Design Tokens: Use consistent spacing scale, color palettes, typography system
  6. Dark Mode Consistency: Apply dark variants to all themed elements
  7. Performance: Leverage automatic CSS purging, avoid dynamic class names
  8. TypeScript: Use full type safety for better DX
  9. Visual Hierarchy: Let composition guide attention, use spacing and color intentionally
  10. Expert Craftsmanship: Every detail matters - treat UI as a craft
  1. 组件组合：通过简单、可组合的基元构建复杂UI
  2. 优先实用类样式：直接使用Tailwind类；仅在真正需要重复时提取组件
  3. 移动优先响应式：从移动样式开始，逐步添加响应式变体
  4. 优先可访问性：利用Radix UI基元，添加焦点状态，使用语义化HTML
  5. 设计标记：使用一致的间距比例、调色板和排版系统
  6. 深色模式一致性：为所有主题元素应用深色变体
  7. 性能优化：利用自动CSS清除，避免动态类名
  8. TypeScript：使用完整类型安全提升开发体验
  9. 视觉层级：通过构图引导注意力，有意使用间距和颜色
  10. 专业工艺：每个细节都至关重要——将UI视为一门工艺

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
组件库
  • references/shadcn-components.md
    - 完整组件目录
  • references/shadcn-theming.md
    - 主题与自定义
  • references/shadcn-accessibility.md
    - 可访问性模式
样式系统
  • references/tailwind-utilities.md
    - 核心实用类
  • references/tailwind-responsive.md
    - 响应式设计
  • references/tailwind-customization.md
    - 配置与扩展
视觉设计
  • references/canvas-design-system.md
    - 设计理念与画布工作流
自动化
  • scripts/shadcn_add.py
    - 组件安装
  • scripts/tailwind_config_gen.py
    - 配置生成

Common Patterns

常见模式

Form with validation:
tsx
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:
tsx
<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>
带验证的表单：
tsx
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>
  )
}
带深色模式的响应式布局：
tsx
<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

资源