演示真實執行紀錄 · 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 介面，加入無障礙元件，實作深色模式與設計 Token。

說明與風險

含兩個 Python 輔助腳本。`shadcn_add.py` 會在你指定的專案目錄執行 `npx shadcn@<版本> add ...`：會從 npm 下載（需要連網），並把元件檔寫入你的專案；已存在的元件不會重新安裝，除非加上 `--overwrite`，也支援 `--dry-run` 預覽。`tailwind_config_gen.py` 會寫入 Tailwind 設定檔，目錄中已有 `tailwind.config.*` 時拒絕建立或取代，除非加上 `--force`。使用前請先提交現有變更，保留產生的檔案前先檢視 diff。不需要帳號或金鑰。本站收錄的版本不含隨附的畫布字體檔（選用的畫布設計思路會改用你自己的字體）與測試檔。