How to build a UI in the shadcn/ui style

:root {
  /* shadcn/ui style — extracted from ui.shadcn.com by taste-skill */
  --canvas: #FFFFFF;
  --surface: #F5F5F5;
  --text: #0A0A0A;
  --text-muted: #737373;
  --accent: #171717;
  --border: #E5E5E5;
  --font-heading: Geist, Inter, system-ui, -apple-system, sans-serif;
  --font-body: Geist, Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 48px;
  --h1-tracking: -0.05em;
  --h1-weight: 600;
  --radius-button: 10px;
  --radius-common: 18px;
  --shadow-common: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.145 -0.00000143796 0.00000340492 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.15s;
}

// tailwind.config.js — shadcn/ui style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#FFFFFF",
        surface: "#F5F5F5",
        ink: "#0A0A0A",
        muted: "#737373",
        accent: "#171717",
        line: "#E5E5E5",
      },
      fontFamily: {
        heading: ["Geist", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["Geist", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["Geist Mono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["48px", { letterSpacing: "-0.05em", fontWeight: "600" }] },
      borderRadius: { button: "10px", card: "18px" },
      boxShadow: { brand: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.145 -0.00000143796 0.00000340492 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px" },
      transitionTimingFunction: { brand: "cubic-bezier(0.4, 0, 0.2, 1)" },
    },
  },
};

---
name: shadcn-style
description: Build UI in the shadcn/ui visual style (Zinc Monochrome Component Primitives & Zero-Distraction Craft). Use when the user asks for a shadcn/ui-like look.
---

# shadcn/ui Style — Quick Rules (source: ui.shadcn.com, extracted by taste-skill)

## Tokens
- canvasBg: #FFFFFF — Primary shadcn/ui page canvas
- surfaceElevated: #F5F5F5 — Primary elevated card & bento surface
- surfaceSecondary: rgba(245, 245, 245, 0.5) — Secondary interactive container / hover fill
- borderPrimary: #E5E5E5 — Primary structural divider (1px solid #E5E5E5)
- borderSecondary: #171717 — Secondary nested module or pill border
- textPrimary: #0A0A0A — Hero H1, section H2 & high-contrast foreground
- textMuted: #737373 — Lead paragraphs, descriptions & muted labels
- accentPrimary: #171717 — Primary interactive CTA & brand highlight (8px / 10px)
- accentSecondary: #F5F5F5 — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: Geist; body: Geist; mono: Geist Mono
- Hero H1: 48px | line-height 52.8px (leading-[1.1]) | letter-spacing -2.4px (tracking-[-0.05em]) | weight 600 (font-[600]) | color #000000 (text-black) | font Geist
- Section H2 (Primary): Section headline with negative letter-spacing
- Card / Feature H3: Subheading with crisp line-height
- Body Copy (Paragraph): 18px | line-height 28px (leading-[1.56]) | letter-spacing 0px (tracking-[0em]) | weight 400 (font-[400]) | color #000000 (text-black) | font Geist

## Components
- Primary button: height 32px, padding 8px 16px, radius 10px, bg #F5F5F5, text #000000, 14px / 500
- Card: bg #FFFFFF, border none, radius 24px, padding 20px 0px

## Never
- NEVER substitute generic uncalibrated gray backgrounds for shadcn/ui’s exact #FFFFFF canvas and #F5F5F5 surface pairing.
- NEVER replace Geist display typography or ignore its signature scale (48px / -0.05em (w600)).
- NEVER use thick opaque borders that clash with #E5E5E5 (1px solid #E5E5E5).
- NEVER deviate from the signature button geometry (8px / 10px) or introduce off-brand saturated gradients.
- NEVER use default browser monospace when rendering code or telemetry—always pair with Geist Mono.

Full 120-line spec: https://taste-skill.pages.dev/taste/shadcn/

npx taste-skill add shadcn