Client Site Component Install

Step 1: Generate brand-config.json

Run the brand-config-generator skill:

/generate brand config

The skill asks for inputs. For Meridian Robotics, provide:

Output: ./brand-config.json

Step 2: Export design tokens

Run the design-token-export skill, providing the path to brand-config.json and selecting all formats:

/export design tokens

Output written to ./tokens/:

Step 3: Apply tokens to the client project

In the client's Next.js project, import the CSS variables and override the shadcn/ui theme:

@import "./tokens/variables.css";

/* Override shadcn/ui theme variables with brand tokens */
:root {
  --primary: var(--brand-primary-oklch);
  --secondary: var(--brand-secondary-oklch);
  --accent: var(--brand-accent-oklch);
  --background: var(--brand-background-oklch);
  --foreground: var(--brand-foreground-oklch);
  --muted: var(--brand-muted-oklch);
  --border: var(--brand-border-oklch);
}

The import must come before any shadcn theme definitions so the overrides take effect correctly.

Step 4: Install @vandoko components

Install components using the standard shadcn CLI — no special flags needed:

# Install individual components
npx shadcn@latest add @vandoko/hero-industrial
npx shadcn@latest add @vandoko/pricing-saas

# Components inherit the client's brand tokens via CSS custom properties
# No code changes needed -- oklch tokens resolve from globals.css

The installed components use Tailwind classes like bg-primary, text-foreground, border-border — which resolve to Meridian's colors through the CSS custom property override chain defined in Step 3.

Step 5: Verify theme customization

Start the dev server:

pnpm dev

Inspect the hero component in the browser and confirm:

• Background should be #0D1117 (Meridian's background), not #0A0A0A (Vandoko's)
• Primary CTA should be #1E3A5F (Meridian's industrial blue), not #00EEFF (Vandoko's cyan)
• Typography should render Space Grotesk headings with Inter body text