Phase 1.2: Design System Setup

Objective

This phase populates the shared design system and scaffolds the sdc.com website, using the Template site as a blueprint. Includes configuration of TypeScript path aliases before running interactive tools.

---

Part A: Configure Shared Design System

• Action: Populate packages/design-tokens/tokens.css with Utopia and theme variables.
• Action: Ensure the root package.json is set to "private": true.
• 🤖 Verification (Automated):
  • Script will confirm packages/design-tokens/tokens.css contains Utopia variables.
  • Script will verify root package.json has "private": true.

---

Part B: Configure TypeScript Path Alias in Template Site

• Action: Programmatically add the @/* path alias to sites/Template/tsconfig.json.
• 🤖 Verification (Automated):
  • Script will parse sites/Template/tsconfig.json and verify it contains paths entry for "@/*": ["src/*"].

---

Part C: Integrate Design System into Template Site

• Action: Install shadcn-svelte dependencies.
• Action: Interactively run shadcn-svelte init and provide the @/lib alias.
• 🤖 Verification (Automated):
  • Script will confirm sites/Template/components.json exists.
  • Script will verify the components.json contains expected shadcn-svelte configuration.

---

Part D: Scaffold and Configure sdc.com Site

• Action: Create the sdc.com Astro project and add integrations.
• Action: Programmatically add the @/* path alias to sites/sdc.com/tsconfig.json.
• Action: Copy the validated configurations from the Template site.
• 🤖 Verification (Automated):
  • Script will confirm sites/sdc.com directory exists.
  • Script will parse sites/sdc.com/tsconfig.json and verify correct path alias configuration.
  • Script will attempt to build the sdc.com site to verify setup is functional.