ui-styling

视觉设计 / 插画 界面 · 动效 · 设计品味 UI 样式 16 文件 EN 原文 4 脚本

UI 样式与细节

按钮、输入框、卡片等组件的样式细节与各种状态的处理。

说明语言：中文

原文描述EN

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

来源nextlevelbuilderui-ux-pro-max-skill ↗　查看原文件 ↗版权归原作者，请遵循原仓库许可
安装
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling

需要已安装 skills CLI。也可以直接从源仓库 clone。

在星云中查看 ↗
SKILL.md 原文

name: ui-styling description: Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications. argument-hint: "[component or layout]" license: MIT metadata: author: claudekit version: "1.0.0" ---

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

When to Use This Skill

Use when:

Core Stack

Component Layer: shadcn/ui

Styling Layer: Tailwind CSS

Visual Design Layer: Canvas

Script Paths

Script paths in this skill and its references/ are relative to the directory that contains this SKILL.md, not to the project: scripts/<file> is this skill's own scripts/ folder, and ../<skill>/scripts/<file> is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as docs/brand-guidelines.md, assets/design-tokens.json or src/ relative to it.

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:

Theme & Customization

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

See: references/shadcn-theming.md

Covers:

Accessibility Patterns

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

See: references/shadcn-accessibility.md

Covers:

Tailwind Utilities

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

See: references/tailwind-utilities.md

Covers:

Responsive Design

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

See: references/tailwind-responsive.md

Covers:

Tailwind Customization

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

See: references/tailwind-customization.md

Covers:

Visual Design System

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

See: references/canvas-design-system.md

Covers:

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

The generator refuses to create or replace a config when any sibling tailwind.config.js, .cjs, .mjs, or .ts file already exists. Review the reported config first, then pass --force only when the competing output is intentional:

python scripts/tailwind_config_gen.py --colors brand:blue --force

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

Reference Navigation

Component Library

Styling System

Visual Design

Automation

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

同类技能
animateanimate-expoanimation-performanceanimation-vocabularyapple-designask-sonnerbrandkitbreak-ui
本页内容来自开源项目 nextlevelbuilder， 版权归原作者所有。
本站仅作技能索引与分享，所有 Skill 版权归其原作者所有。