@nerdev/skillset 0.2.1

package/skills/ui/ui-theme-picker/references/component-sources.md

@@ -0,0 +1,223 @@
+# Component Sources
+
+Don't hand-roll what already exists. This maps style families and common "wow" effects
+to where to actually pull the code from - and for the cheap-to-build ones, the actual
+code, since this user wants working snippets by default, not just links.
+
+## Hard avoid-list (applies across all style families)
+
+Confirmed instant "cheap/dated" signals for this user - don't reach for these as
+defaults even if a style family below mentions them as an example:
+- Overused purple/blue SaaS gradient (the generic Linear/Stripe-clone gradient every
+  startup site defaults to). If a gradient is needed, pick something less generic  - 
+  warm terracotta/gold, single-hue monochrome, or brand-matched instead.
+- Cheesy "friendly" rounded corporate fonts (Poppins, Quicksand, Baloo-style roundness
+  used to fake approachability). Prefer Inter/Geist for clean, a real humanist sans
+  (General Sans) for warm, or a serif for editorial - not rounded-for-friendliness fonts.
+
+## Core library roles (know these, use together)
+
+- **shadcn/ui** - your foundation. Buttons, dialogs, inputs, forms, dropdowns. Accessible
+  (Radix-based). Install via `npx shadcn@latest add <component>`. Start every project here.
+- **Aceternity UI** (ui.aceternity.com) - visually dramatic effects: 3D cards, spotlight,
+  particle backgrounds, parallax, glowing borders. Free tier is generous; Pro has full
+  templates. Built with Tailwind + Framer Motion.
+- **Magic UI** (magicui.design) - 150+ free components, more restrained than Aceternity:
+  marquees, animated beams, bento grids, text effects. Pairs cleanly with shadcn.
+- **21st.dev** - aggregator/registry of 12,000+ components across dozens of libraries
+  (Aceternity, Magic UI, Origin UI, HextaUI, Kokonut UI, etc.) with live preview + copy
+  TSX or shadcn-CLI install. Use this to browse when you don't know which library has
+  what you want.
+- **React Bits** (reactbits.dev) - largest open animated collection, has both plain-CSS
+  and Tailwind variants, GSAP ScrollTrigger wrappers, hover/magnetic effects.
+- **Motion Primitives** - subtler/cleaner animation than Aceternity, good when a client
+  wants "polished" not "flashy."
+- **Uiverse.io** - community CSS/Tailwind snippets, good for buttons/loaders/toggles.
+  Quality varies since it's crowdsourced - preview before using.
+
+## Style family → primary source
+
+| Style family | Primary source |
+|---|---|
+| Minimalist / Clean SaaS | shadcn/ui + Motion Primitives for subtle motion |
+| Brutalist | Mostly hand-built (hard borders/shadows are simple CSS); Uiverse for raw buttons |
+| Glassmorphism | Aceternity (`Glare Card`, `3D Card Effect`) + hand-rolled `backdrop-blur` |
+| Neumorphism | Uiverse (search "neumorphic") - niche enough that dedicated libraries are thin |
+| Dark Techy / Terminal | Aceternity (`Background Beams`, `Sparkles`) + shadcn dark theme |
+| Editorial / Content-first | Mostly typography + shadcn; skip animation-heavy libraries |
+| Retro / Vaporwave | Magic UI (`Retro Grid`, neon gradients) + Aceternity (`Wavy Background`) |
+| Corporate / Enterprise | shadcn/ui only - resist the urge to add flashy libraries here |
+| Playful / Maximalist | Magic UI (bento grids, confetti) + React Bits for bouncy micro-interactions |
+| Swiss / Typographic | Hand-built grid + shadcn primitives; no animation library needed |
+| Warm / Human SaaS | Motion Primitives + shadcn, restrained use of Magic UI bento grids |
+| E-commerce | shadcn/ui (cards, carousels) - let product photography carry the visual weight |
+| Data-dense Dashboard | shadcn/ui + `tremor.so` or `recharts` for data viz, skip effect libraries entirely |
+| Indie Dev / Hacker Aesthetic | React Bits (terminal-style effects) + Aceternity (`Text Generate Effect`) |
+
+## Performance guardrails (non-negotiable - janky motion kills "great UI" faster than anything)
+
+- Animate `transform` and `opacity` only where possible - never animate `width`,
+  `height`, `top`/`left`, or `box-shadow` directly (forces layout/paint, causes jank).
+  For a "grow" effect use `transform: scale()` not `width`/`height`.
+- Always respect `prefers-reduced-motion` - wrap heavy motion in a media query check or
+  Framer Motion's `useReducedMotion()`.
+- Cap simultaneous heavy effects (particles, 3D, large blurs) to what's actually on
+  screen - don't run an idle three.js scene under content the user has scrolled past.
+- `backdrop-blur` and large `blur-3xl` divs are cheap individually but add up - don't
+  stack more than 2-3 blurred layers in one viewport.
+- Max 2-3 signature effects per page (see list below). More reads as noisy, not premium.
+- Test on mid-range mobile, not just the dev's laptop - glass/blur/3D effects are the
+  first thing to lag on lower-end devices.
+
+## Signature effects - the recurring "wow" moves
+
+These show up constantly on standout marketing sites (agency sites, SaaS landers, studio
+portfolios). When a user references a site with "great UI" or asks to recreate an effect,
+check here first before building from scratch.
+
+### Particle / 3D hero background
+Animated wireframe shapes, particle networks, or 3D objects behind hero text.
+- **Source:** Aceternity `3D Globe`, `Vortex`, `Sparkles`, `Wavy Background` - or raw
+  `three.js` if you need something fully custom.
+- **Effort:** low if using Aceternity components, medium if hand-building with three.js.
+
+### Floating glass navbar
+Pill-shaped nav with `backdrop-blur`, translucent background, subtle inset shadow,
+often animates in on load (slides/fades from off-screen).
+- **Source:** hand-buildable in plain Tailwind - no library needed.
+- **Code:**
+```tsx
+<nav className="fixed top-5 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2
+  px-3 py-2 rounded-full border border-white/20 bg-white/10 backdrop-blur-xl
+  backdrop-saturate-150 shadow-[inset_0_1px_1px_rgba(255,255,255,0.3),0_12px_40px_rgba(0,0,0,0.15)]">
+  {/* nav links */}
+</nav>
+```
+- **Load-in animation (Framer Motion):**
+```tsx
+<motion.nav
+  initial={{ x: "-50%", y: -20, opacity: 0 }}
+  animate={{ x: "-50%", y: 0, opacity: 1 }}
+  transition={{ duration: 0.5, ease: "easeOut" }}
+  className="fixed top-5 left-1/2 ..." />
+```
+
+### Scroll-driven text ticker / word roller
+A pinned section where a list of words scrolls vertically inside a fixed frame as the
+user scrolls the page (e.g. "We can DESIGN. PROTOTYPE. BUILD...").
+- **Source:** GSAP `ScrollTrigger`, not in any component library - ~30-40 lines, worth
+  hand-building.
+- **Code:**
+```tsx
+"use client";
+import { useEffect, useRef } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+gsap.registerPlugin(ScrollTrigger);
+
+const WORDS = ["DESIGN.", "PROTOTYPE.", "BUILD.", "SHIP."];
+
+export function WordRoller() {
+  const listRef = useRef<HTMLUListElement>(null);
+  useEffect(() => {
+    const items = listRef.current?.children.length ?? 0;
+    const ctx = gsap.context(() => {
+      gsap.to(listRef.current, {
+        yPercent: -100 * ((items - 1) / items),
+        ease: "none",
+        scrollTrigger: {
+          trigger: listRef.current?.parentElement,
+          start: "top top",
+          end: "+=2000",
+          scrub: 0.5,
+          pin: true,
+        },
+      });
+    });
+    return () => ctx.revert();
+  }, []);
+
+  return (
+    <div className="h-screen overflow-hidden">
+      <ul ref={listRef} className="text-8xl font-bold">
+        {WORDS.map((w) => (
+          <li key={w} className="h-screen flex items-center">{w}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+```
+
+### Glowing / luminous cards
+Icon or content cards with a soft internal light/glow effect that reacts on hover.
+- **Source:** Aceternity `Glowing Effect`, `Glare Card`, `Card Spotlight` cover most of
+  this out of the box - install via their CLI/copy-paste, faster than hand-rolling the
+  SVG-filter version.
+- **Cheap CSS-only version (no library, mouse-follow glow):**
+```tsx
+function GlowCard({ children }: { children: React.ReactNode }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const onMove = (e: React.MouseEvent) => {
+    const r = ref.current!.getBoundingClientRect();
+    ref.current!.style.setProperty("--x", `${e.clientX - r.left}px`);
+    ref.current!.style.setProperty("--y", `${e.clientY - r.top}px`);
+  };
+  return (
+    <div ref={ref} onMouseMove={onMove}
+      className="relative overflow-hidden rounded-2xl border border-white/10 p-6
+        before:content-[''] before:absolute before:inset-0 before:opacity-0
+        hover:before:opacity-100 before:transition-opacity before:duration-300
+        before:[background:radial-gradient(200px_circle_at_var(--x)_var(--y),rgba(255,255,255,0.15),transparent_70%)]">
+      {children}
+    </div>
+  );
+}
+```
+
+### Ambient blurred blob backgrounds
+Large soft-edged colored circles (`blur-3xl`) positioned absolute behind content
+sections - does most of the work of making dark sections feel premium instead of flat.
+- **Source:** no library needed. Cheapest high-impact trick in this list - use liberally.
+- **Code:**
+```tsx
+<div className="absolute -top-20 -left-20 w-96 h-96 rounded-full bg-primary/30
+  blur-3xl pointer-events-none" />
+<div className="absolute bottom-0 right-0 w-80 h-80 rounded-full bg-violet-500/20
+  blur-3xl pointer-events-none" />
+```
+
+### Infinite marquee / scrolling gallery
+Row of logos or images scrolling continuously sideways.
+- **Source:** Magic UI `Marquee` component (handles pause-on-hover, direction, speed)  - 
+  don't hand-roll the CSS keyframes unless you need something non-standard.
+- **Minimal hand-built version if avoiding the dependency:**
+```css
+@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+.marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
+.marquee-track:hover { animation-play-state: paused; }
+```
+Duplicate the item list once inside the track (so it's 200% width) for a seamless loop.
+
+### Button hover fill-sweep
+Button background color sweeps in from one side on hover instead of a flat color change.
+- **Source:** hand-buildable - no library needed.
+- **Code:**
+```tsx
+<button className="group relative overflow-hidden px-8 py-4 rounded-xl
+  bg-foreground text-background">
+  <span className="absolute inset-0 bg-primary -translate-x-full
+    group-hover:translate-x-0 transition-transform duration-300" />
+  <span className="relative z-10 group-hover:text-primary-foreground
+    transition-colors">Send Message</span>
+</button>
+```
+
+## When a client/user references a site they like
+
+1. Identify which signature effects are doing the work (usually 2-4 of the above).
+2. Map each to its source from this file.
+3. Note what's cheap (ambient blobs, glass navbar - minutes) vs what takes real effort
+   (custom 3D/particle scenes, hand-built SVG filter effects - hours).
+4. Be honest if the reference site is using flash to cover for a thin portfolio/content  - 
+   worth calling out so effort goes where it matters for the actual project.

package/skills/ui/ui-theme-picker/references/styles.md

@@ -0,0 +1,298 @@
+# Style Family Library
+
+14 style families. Each has: what it's for, when it's a trap, and concrete tokens.
+Hex values, font names, and Tailwind values are ready to paste — not placeholders.
+
+---
+
+## 1. Minimalist / Clean SaaS
+**Best for:** SaaS products, dev tools, landing pages, B2B. The safe, high-conversion default.
+**Trap if:** the user wants to stand out in a crowded, visually loud market — this style
+blends in with every other Y Combinator startup site.
+**Anchor:** Linear, Vercel, Stripe docs.
+
+- Colors (light): bg `#FFFFFF`, surface `#F8F9FA`, border `#E5E7EB`, text `#111827`,
+  muted text `#6B7280`, primary `#111827` or one accent e.g. `#4F46E5`
+- Colors (dark): bg `#0A0A0B`, surface `#141416`, border `#27272A`, text `#FAFAFA`,
+  muted `#A1A1AA`, accent same as light
+- Type: Inter or Geist for UI, font-weight 500-600 for headings, tight tracking
+- Spacing: generous, 4/8px base scale, lots of whitespace
+- Radius: `8px`–`12px` (rounded-lg/xl)
+- Shadow: very subtle, `0 1px 2px rgba(0,0,0,0.05)` — almost flat
+- Motion: fast, subtle — 150-200ms ease-out, no bounce
+
+---
+
+## 2. Brutalist
+**Best for:** developer tools, portfolios, indie/creative products, anything wanting to
+signal "not another templated startup."
+**Trap if:** the audience is enterprise buyers or non-technical consumers — reads as
+unfinished or unprofessional to them.
+**Anchor:** Gumroad (older era), brutalist portfolio sites, raw HTML aesthetic done intentionally.
+
+- Colors: bg `#FFFFFF` or `#000000`, near-max contrast text, one loud accent
+  e.g. `#FF3B00` or `#00FF00`, borders always solid black/white, no grays in between
+- Type: monospace or a raw system serif for headers (e.g. `"JetBrains Mono"`, or a
+  heavy grotesk like `Archivo Black`); body can be a plain sans
+- Spacing: inconsistent-on-purpose is fine, but keep it a deliberate grid, not sloppy
+- Radius: `0px` always — sharp corners are the whole point
+- Shadow: hard offset shadows, no blur — `4px 4px 0px #000000`
+- Border: thick, `2px`-`4px` solid black, visible everywhere
+- Motion: abrupt, no easing, or none at all
+
+---
+
+## 3. Glassmorphism
+**Best for:** consumer apps, music/media players, dashboards wanting a "premium/futuristic"
+feel, marketing pages with a hero visual.
+**Trap if:** used for dense data tables or text-heavy content — blur hurts legibility and
+performance at scale.
+**Anchor:** macOS Big Sur UI, iOS Control Center.
+
+- Colors: needs a colorful/gradient background to sit on top of, e.g. gradient
+  `#667EEA` → `#764BA2`; glass panels: `rgba(255,255,255,0.1)` with `backdrop-filter: blur(20px)`
+- Border: `1px solid rgba(255,255,255,0.2)`
+- Type: clean sans, Inter or SF Pro-like (system-ui)
+- Radius: `16px`–`24px`, generous rounding
+- Shadow: soft diffuse, `0 8px 32px rgba(0,0,0,0.1)`
+- Motion: smooth, springy transitions, 300-400ms
+
+---
+
+## 4. Neumorphism (soft UI)
+**Best for:** niche — settings panels, physical-feeling controls, wellness/lifestyle apps.
+**Trap if:** almost anything else. Accessibility (low contrast) and general usability issues
+are real; use sparingly and only where explicitly requested.
+**Anchor:** early Dribbble neumorphism shots, some smart-home app UIs.
+
+- Colors: monochrome base, e.g. bg `#E0E5EC`, everything same base tone
+- Shadow: dual shadow, light `-6px -6px 12px #FFFFFF`, dark `6px 6px 12px #A3B1C6`
+- Radius: `12px`–`20px`, soft everywhere
+- Type: rounded sans, e.g. Poppins or Quicksand
+- Motion: gentle press/depress on interaction
+
+---
+
+## 5. Dark Techy / Terminal
+**Best for:** dev tools, CLI wrappers, infra/observability dashboards, AI/ML products,
+crypto/quant tools.
+**Trap if:** audience is non-technical — can feel cold or intimidating to consumers.
+**Anchor:** Vercel dashboard, Raycast, Warp terminal, GitHub dark mode.
+
+- Colors: bg `#0D1117`, surface `#161B22`, border `#30363D`, text `#C9D1D9`,
+  muted `#8B949E`, accent green `#3FB950` or blue `#58A6FF` or purple `#A371F7`
+- Type: monospace for code/data (`"JetBrains Mono"`, `"Fira Code"`), clean sans for UI chrome
+- Spacing: tight-to-medium, information-dense is acceptable and often desired
+- Radius: `6px`–`8px`, understated
+- Shadow: minimal, rely on borders for separation not shadow
+- Motion: fast and functional, 100-150ms
+
+---
+
+## 6. Editorial / Content-first
+**Best for:** blogs, publications, documentation sites, content-heavy marketing pages,
+personal writing sites.
+**Trap if:** the product is interaction-heavy (dashboards, tools) — this style deprioritizes UI chrome.
+**Anchor:** Stripe blog, Every.to, NYT reading pages.
+
+- Colors: warm off-white bg `#FAF9F6`, near-black text `#1A1A1A`, one restrained accent
+  for links, e.g. `#B45309` or `#1D4ED8`
+- Type: a real serif for headlines/body (e.g. `"Source Serif 4"`, `"Lora"`, `"Charter"`),
+  sans for UI labels/nav
+- Spacing: wide line-height (1.6-1.8), narrow content column (max-w ~65ch)
+- Radius: minimal, `4px` or none — content doesn't need rounded cards
+- Shadow: none, rely on whitespace
+- Motion: minimal, prioritize reading over animation
+
+---
+
+## 7. Retro / Vaporwave
+**Best for:** creative portfolios, music/entertainment products, anything wanting
+personality over "professional."
+**Trap if:** B2B, enterprise, anything needing to look "trustworthy" in a conventional sense.
+**Anchor:** 80s/90s revival aesthetics, synthwave visuals.
+
+- Colors: gradient-heavy, hot pink `#FF6EC7`, cyan `#00F0FF`, deep purple `#1A0B2E` bg,
+  high saturation
+- Type: display font with retro character (e.g. `"Righteous"`, `"VT323"` for accents),
+  clean sans for body
+- Radius: mixed — sharp on some elements, pill-shaped (`9999px`) on buttons
+- Shadow: neon glow effect, `0 0 20px rgba(255,110,199,0.5)`
+- Motion: can lean playful/bouncy
+
+---
+
+## 8. Corporate / Enterprise Trust
+**Best for:** enterprise SaaS, fintech, healthtech, anything selling to risk-averse buyers
+or needing compliance/trust signaling.
+**Trap if:** the audience is indie devs or consumers looking for personality — reads as
+generic/boring to them, which is somewhat the point here.
+**Anchor:** Salesforce, Workday, most enterprise B2B products.
+
+- Colors: bg `#FFFFFF`, surface `#F5F7FA`, border `#D1D5DB`, text `#1F2937`,
+  primary blue `#1D4ED8` or navy `#1E3A8A`, avoid saturated/loud accents
+- Type: Inter, "Segoe UI"-adjacent, or IBM Plex Sans — safe, legible, no personality risk
+- Spacing: structured, grid-based, predictable
+- Radius: `4px`–`6px`, conservative
+- Shadow: light, standard elevation system (sm/md/lg tiers)
+- Motion: minimal, functional only
+
+---
+
+## 9. Playful / Maximalist
+**Best for:** consumer products, kids/education, creative tools, anything wanting to feel
+fun and approachable over polished.
+**Trap if:** professional/enterprise or data-dense contexts — clashes with seriousness or
+information density.
+**Anchor:** Duolingo, Notion's playful illustrations, Figma community pages.
+
+- Colors: multiple saturated colors used deliberately (not just one accent), e.g.
+  `#FF5A5F`, `#FFB400`, `#00C2A8`, `#5B5FEF` — bg stays light/white to let colors pop
+- Type: rounded, friendly sans, e.g. Nunito, Baloo 2
+- Radius: large, `16px`–`24px`, pill buttons
+- Shadow: soft but visible, playful offset shadows in color (not just black/gray)
+- Motion: bouncy, springy easing, micro-interactions everywhere
+
+---
+
+## 10. Swiss / International Typographic
+**Best for:** portfolios (especially design/architecture), agencies, anything wanting to
+signal typographic confidence and precision.
+**Trap if:** the team can't commit to strict grid discipline — half-executed Swiss design
+looks like a mistake, not a style.
+**Anchor:** classic print-design-inspired sites, high-end agency portfolios.
+
+- Colors: near-monochrome, `#FFFFFF` bg, `#000000` text, one red accent `#E30613` used sparingly
+- Type: Helvetica/Neue Haas Grotesk or Inter at heavy weight for headers, strict grid alignment
+- Spacing: mathematically precise grid, generous margins
+- Radius: `0px`, always sharp
+- Shadow: none
+- Motion: precise, no easing flourishes
+
+---
+
+## 11. Warm / Human SaaS
+**Best for:** products wanting to feel less corporate-cold without going full playful —
+common current trend for B2B tools targeting non-technical users (HR, ops, creator tools).
+**Trap if:** highly technical audience — can read as style-over-substance to devs.
+**Anchor:** Notion, Linear's warmer competitors, Cron/Arc browser.
+
+- Colors: warm off-white bg `#FDFBF7`, soft surface `#F5F1EA`, text `#2D2A26`,
+  warm accent e.g. terracotta `#D97757` or muted gold `#C9A15A`
+- Type: Inter or a humanist sans like "General Sans", medium weight headers
+- Spacing: generous, rounded groupings
+- Radius: `10px`–`14px`
+- Shadow: soft, warm-toned (not pure gray) — `0 2px 8px rgba(60,40,20,0.06)`
+- Motion: smooth, unhurried, 250-300ms ease
+
+---
+
+## 12. E-commerce / Product-forward
+**Best for:** online stores, product marketplaces — anything where the product photo/visual
+is the actual content and UI should recede.
+**Trap if:** used where there's no strong visual product asset to showcase — this style
+needs great imagery to work.
+**Anchor:** Shopify storefronts, Aesop, high-end DTC brand sites.
+
+- Colors: near-neutral bg `#FFFFFF` or brand-specific single tone, minimal chrome color
+  so product photography carries color
+- Type: often a distinctive but restrained serif or sans for brand headers, plain sans for UI
+- Spacing: large image-to-whitespace ratio, generous gutters between product cards
+- Radius: `0px`–`4px`, let photography be the visual interest not the chrome
+- Shadow: none to minimal
+- Motion: smooth image transitions/zooms, otherwise minimal
+
+---
+
+## 13. Data-dense Dashboard / Internal Tool
+**Best for:** admin panels, internal ops tools, analytics dashboards, anything prioritizing
+information density and speed of scanning over visual flourish.
+**Trap if:** it's a customer-facing/marketing surface — feels sterile for that use case.
+**Anchor:** Retool, Metabase, Grafana, internal admin panels.
+
+- Colors: bg `#FFFFFF` or `#F9FAFB`, borders doing most of the visual separation
+  `#E5E7EB`, text `#111827`, status colors (success `#16A34A`, warning `#D97706`,
+  error `#DC2626`) used functionally not decoratively
+- Type: Inter or system-ui, tabular figures for numbers (`font-variant-numeric: tabular-nums`)
+- Spacing: tight, compact rows, density over whitespace
+- Radius: `4px`–`6px`, small
+- Shadow: minimal, borders do the work
+- Motion: instant/near-instant, no decorative animation
+
+---
+
+## 14. Indie Dev / Personal Portfolio Hacker Aesthetic
+**Best for:** solo dev portfolios, side-project landing pages, "build in public" content —
+signals technical credibility over polish.
+**Trap if:** the goal is to look like a funded/serious company — can undersell scale.
+**Anchor:** many indie hacker Twitter/X-linked landing pages, terminal-inspired portfolios.
+
+- Colors: bg `#0F0F0F` or `#FAFAFA` (pick one, high contrast), one accent color tied to
+  personal brand, often green `#00FF9C` or amber `#FFB86C`
+- Type: monospace-forward even in body copy for a "coded by hand" feel, or mix mono
+  headers with clean sans body
+- Spacing: can be tighter/scrappier than corporate — signals speed/shipping over polish
+- Radius: `4px`–`8px`, understated
+- Shadow: minimal or hard-edge (borrow from brutalist if wanted)
+- Motion: snappy, minimal
+
+---
+
+## Tailwind config template (fill with chosen family's values)
+
+```ts
+// tailwind.config.ts
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  theme: {
+    extend: {
+      colors: {
+        background: "#___",
+        surface: "#___",
+        border: "#___",
+        foreground: "#___",
+        muted: "#___",
+        primary: "#___",
+        accent: "#___",
+      },
+      fontFamily: {
+        sans: ["___", "sans-serif"],
+        mono: ["___", "monospace"],
+      },
+      borderRadius: {
+        DEFAULT: "___px",
+      },
+      boxShadow: {
+        DEFAULT: "___",
+      },
+    },
+  },
+};
+
+export default config;
+```
+
+## CSS variables template (alternative to Tailwind config)
+
+```css
+:root {
+  --background: #___;
+  --surface: #___;
+  --border: #___;
+  --foreground: #___;
+  --muted: #___;
+  --primary: #___;
+  --accent: #___;
+  --radius: ___px;
+  --shadow: ___;
+}
+
+[data-theme="dark"] {
+  --background: #___;
+  --surface: #___;
+  --border: #___;
+  --foreground: #___;
+  --muted: #___;
+}
+```