DemostraciónEjecución real · claude-sonnet-5-5 · octubre de 2026

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.

Qué hace

Enseña al modelo a crear interfaces con el stack shadcn/ui (Radix UI + Tailwind CSS): configurar componentes, componer formularios, diálogos, tablas y navegación, escribir diseños responsivos con enfoque mobile-first, añadir modo oscuro y personalización de temas, y personalizar Tailwind (la directiva @theme, utilidades personalizadas, capas). Un archivo de referencia abarca un enfoque basado en canvas para pósteres y diseños visuales.

Cómo funciona

SKILL.md ofrece la descripción general del stack, el inicio rápido (npx shadcn@latest init, add), patrones comunes y enlaces a archivos de referencia.
El modelo abre la referencia correspondiente bajo demanda: catálogo de componentes, temas, accesibilidad, utilidades de Tailwind, diseño responsivo, personalización o diseño con canvas.
Dos scripts auxiliares opcionales: uno añade componentes de shadcn mediante npx y el otro genera un tailwind.config.js con colores personalizados y fuentes personalizadas.

Ideal para

Crear o rediseñar interfaces de React, Next.js, Vite, Remix o Astro, añadir componentes accesibles e implementar modo oscuro y tokens de diseño.

Notas y riesgos

Contiene dos scripts auxiliares de Python. `shadcn_add.py` ejecuta `npx shadcn@<version> add ...` en el directorio del proyecto que le indiques: esto descarga desde npm (acceso a la red) y escribe archivos de componentes en tu proyecto. Se niega a reinstalar componentes que ya existen a menos que pases `--overwrite`, y admite `--dry-run`. `tailwind_config_gen.py` escribe un archivo de configuración de Tailwind y se niega a crear o reemplazar uno cuando ya existe otro `tailwind.config.*`, a menos que pases `--force`. Haz commit de tu trabajo primero y revisa el diff antes de conservar los archivos generados. No se necesita cuenta ni clave. Esta ficha no incluye: los archivos de fuentes para canvas empaquetados (por lo que el enfoque opcional de diseño con canvas recurre a tus propias fuentes) y los archivos de prueba.

SKILL.md original13 archivos en este paquete