演示真实运行记录 · claude-sonnet-5-5 · 2026年10月

Using the ui-styling skill, build a responsive "Account settings" card with shadcn/ui and Tailwind that has a dark-mode toggle and a notifications switch. Show the component code and explain the key utility classes.

Skill: ui-styling

Account settings card

Setup

npx shadcn@latest add card switch label separator
npm install next-themes

Wrap your app in the theme provider once (for example in app/layout.tsx). Add suppressHydrationWarning to <html>.

import { ThemeProvider } from "next-themes"

<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
  {children}
</ThemeProvider>

`components/account-settings-card.tsx`

"use client"

import * as React from "react"
import { useTheme } from "next-themes"
import { Moon, Sun, Bell } from "lucide-react"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { Switch } from "@/components/ui/switch"

export function AccountSettingsCard() {
  const { resolvedTheme, setTheme } = useTheme()
  const [mounted, setMounted] = React.useState(false)
  const [notifications, setNotifications] = React.useState(true)

  // The theme is unknown on the server, so wait for mount to avoid a hydration mismatch.
  React.useEffect(() => setMounted(true), [])

  const isDark = mounted && resolvedTheme === "dark"

  return (
    <Card className="mx-auto w-full max-w-sm shadow-sm transition-shadow hover:shadow-md sm:max-w-md lg:max-w-lg">
      <CardHeader className="space-y-1 p-4 sm:p-6">
        <CardTitle className="text-xl font-semibold tracking-tight sm:text-2xl">
          Account settings
        </CardTitle>
        <CardDescription>Manage your appearance and alerts.</CardDescription>
      </CardHeader>

      <CardContent className="space-y-4 p-4 pt-0 sm:p-6 sm:pt-0">
        <Separator />

        {/* Dark mode */}
        <div className="flex items-center justify-between gap-4">
          <div className="flex items-start gap-3">
            <div className="rounded-md bg-muted p-2 text-muted-foreground">
              {isDark ? <Moon className="size-4" /> : <Sun className="size-4" />}
            </div>
            <div className="space-y-0.5">
              <Label htmlFor="dark-mode" className="text-sm font-medium">
                Dark mode
              </Label>
              <p className="text-sm text-muted-foreground">
                Switch between light and dark themes.
              </p>
            </div>
          </div>
          <Switch
            id="dark-mode"
            checked={isDark}
            disabled={!mounted}
            onCheckedChange={(checked) => setTheme(checked ? "dark" : "light")}
          />
        </div>

        <Separator />

        {/* Notifications */}
        <div className="flex items-center justify-between gap-4">
          <div className="flex items-start gap-3">
            <div className="rounded-md bg-muted p-2 text-muted-foreground">
              <Bell className="size-4" />
            </div>
            <div className="space-y-0.5">
              <Label htmlFor="notifications" className="text-sm font-medium">
                Notifications
              </Label>
              <p className="text-sm text-muted-foreground">
                Get email updates about account activity.
              </p>
            </div>
          </div>
          <Switch
            id="notifications"
            checked={notifications}
            onCheckedChange={setNotifications}
          />
        </div>
      </CardContent>
    </Card>
  )
}

Key utility classes

Responsive sizing

w-full max-w-sm sm:max-w-md lg:max-w-lg mx-auto: the card fills narrow screens, then caps its width at each breakpoint. mx-auto centers it. The styles are mobile-first, so the unprefixed classes apply to phones and sm:/lg: layer on top.
p-4 sm:p-6: tighter padding on phones, roomier from 640px up. pt-0 sm:pt-0 stops CardContent's default top padding from stacking on the header's bottom padding.
text-xl sm:text-2xl: the title scales up with the viewport.

Row layout

flex items-center justify-between gap-4: the label block sits on the left and the switch is pushed to the right edge. gap-4 keeps long text from touching the switch.
flex items-start gap-3: the icon aligns with the top of the two-line label and description.
space-y-0.5 / space-y-4: vertical rhythm between children, with no margins on individual elements.

Theme-aware colors

bg-muted, text-muted-foreground: these are shadcn semantic tokens backed by CSS variables, which .dark redefines. The card therefore re-themes without any dark: prefixes. Reach for dark: only for one-off overrides.
rounded-md p-2: a small tinted square behind each icon.
size-4: shorthand for w-4 h-4 on the icons (Tailwind 3.4+).

Polish

shadow-sm hover:shadow-md transition-shadow: a subtle lift on hover, animating only the shadow.
tracking-tight font-semibold: tighter, bolder heading text.

Accessibility and behavior notes

Each Label htmlFor matches its Switch id, so clicking the text toggles the switch. Radix's Switch supplies role="switch", aria-checked, Space-key toggling and focus rings.
resolvedTheme follows the OS preference when the theme is system. The first toggle then pins an explicit light or dark.
The notifications state is local. Replace setNotifications with a call to your API or form action to persist it.

I haven't run this, since there's no project scaffold in the working directory. If you'd like, I can write it into a Vite or Next app here and check it in the browser.

Real run in an isolated folder with only this skill installed. Only the Skill and Read tools were enabled; the model answered from SKILL.md without opening the reference files, and no bundled script was run.

它做什么

教模型在 shadcn/ui（Radix UI + Tailwind CSS）技术栈上做界面：安装配置组件、组合表单/对话框/表格/导航、写移动优先的响应式布局、加入深色模式和主题、定制 Tailwind（@theme 指令、自定义工具类、分层）。另有一份参考文档讲基于画布的海报与视觉设计思路。

工作方式

SKILL.md 给出技术栈概览、快速开始（npx shadcn@latest init、add）、常见写法，并指向各参考文档。
模型按需打开对应参考：组件目录、主题、无障碍、Tailwind 工具类、响应式、定制或画布设计。
两个可选的辅助脚本：一个通过 npx 添加 shadcn 组件，一个生成带自定义颜色和字体的 tailwind.config.js。

适合什么场景

搭建或改造 React、Next.js、Vite、Remix、Astro 界面，添加无障碍组件，实现深色模式和设计令牌。

说明与风险

含两个 Python 辅助脚本。`shadcn_add.py` 会在你指定的项目目录里运行 `npx shadcn@<版本> add ...`：会从 npm 下载（需要联网），并把组件文件写进你的项目；已存在的组件不会重装，除非加 `--overwrite`，也支持 `--dry-run` 预览。`tailwind_config_gen.py` 会写一个 Tailwind 配置文件，目录里已有 `tailwind.config.*` 时拒绝创建或替换，除非加 `--force`。使用前先提交现有改动，保留生成文件前先看 diff。不需要账号或密钥。本站收录的版本不含随包的画布字体文件（可选的画布设计思路会改用你自己的字体）和测试文件。