@archetypeai/ds-cli 0.3.9 → 0.3.10

package/files/AGENTS.md

@@ -28,7 +28,6 @@ Standard Tailwind is fine for:
 
 - Spacing/sizing: `p-4`, `w-full`, `gap-2`, `h-screen`
 - Layout: `flex`, `grid`, `absolute`, `relative`
-- One-off colors: gradients, illustrations, custom accents
 
 ## CSS Import Order
 
@@ -49,15 +48,32 @@ Standard Tailwind is fine for:
 
 Read these when relevant to your task:
 
-- `@skills/apply-ds` - setup tokens in new project
+- `@skills/apply-ds` - apply DS tokens, components, and patterns to an existing demo
 - `@skills/build-pattern` - create composite patterns from primitives
 - `@skills/setup-chart` - set up charts with layerchart
 - `@skills/create-dashboard` - scaffold a full-viewport dashboard with menubar and panels
 - `@skills/fix-accessibility` - audit and fix a11y issues
 - `@skills/fix-metadata` - update page titles, favicons, and OG tags
 - `@skills/deploy-worker` - deploy SvelteKit projects to Cloudflare Workers
-- `@skills/explain-code` - explain code with structure and traced execution
+- `@skills/embedding-from-file` - run an Embedding Lens by streaming sensor data from a CSV file
+- `@skills/embedding-from-sensor` - run an Embedding Lens by streaming real-time data from a physical sensor
+- `@skills/embedding-upload` - run an Embedding Lens by uploading a CSV file for server-side processing
+- `@skills/newton-activity-monitor-lens-on-video` - analyze uploaded video files using Newton's activity monitor lens
+- `@skills/newton-camera-frame-analysis` - live webcam frame analysis using Newton's vision model
+- `@skills/newton-direct-query` - simple direct query to Newton model using the /query API endpoint
+- `@skills/newton-machine-state-from-file` - run a Machine State Lens by streaming sensor data from a CSV file
+- `@skills/newton-machine-state-from-sensor` - run a Machine State Lens by streaming real-time data from a physical sensor
+- `@skills/newton-machine-state-upload` - run a Machine State Lens by uploading a CSV file for server-side processing
 
 ## Rules
 
 See `@rules/` for comprehensive guidance on design principles, components, styling, charts, and linting.
+
+- `@rules/accessibility` — a11y guidelines and ARIA patterns
+- `@rules/charts` — chart setup, layerchart conventions, data visualization
+- `@rules/components` — component API patterns, props, variants, slots
+- `@rules/design-principles` — visual design language, spacing, typography
+- `@rules/frontend-architecture` — component decomposition, page composition, API logic extraction
+- `@rules/linting` — linting and formatting rules
+- `@rules/state` — state management with Svelte 5 runes
+- `@rules/styling` — Tailwind v4, semantic tokens, theming

package/files/CLAUDE.md

@@ -28,7 +28,6 @@ Standard Tailwind is fine for:
 
 - Spacing/sizing: `p-4`, `w-full`, `gap-2`, `h-screen`
 - Layout: `flex`, `grid`, `absolute`, `relative`
-- One-off colors: gradients, illustrations, custom accents
 
 ## CSS Import Order
 
@@ -47,17 +46,36 @@ Standard Tailwind is fine for:
 
 ## Skills
 
+**Skill composition:** When building a demo that uses a Newton or Embedding API skill, also consult `@skills/create-dashboard` for dashboard layouts and `@skills/build-pattern` for extracting components. Only include chart components (SensorChart, ScatterChart) if the user's request involves time-series or explicitly mentions charts.
+
 Read these when relevant to your task:
 
-- `@skills/apply-ds` - setup tokens in new project
+- `@skills/apply-ds` - apply DS tokens, components, and patterns to an existing demo
 - `@skills/build-pattern` - create composite patterns from primitives
 - `@skills/setup-chart` - set up charts with layerchart
 - `@skills/create-dashboard` - scaffold a full-viewport dashboard with menubar and panels
 - `@skills/fix-accessibility` - audit and fix a11y issues
 - `@skills/fix-metadata` - update page titles, favicons, and OG tags
 - `@skills/deploy-worker` - deploy SvelteKit projects to Cloudflare Workers
-- `@skills/explain-code` - explain code with structure and traced execution
+- `@skills/embedding-from-file` - run an Embedding Lens by streaming sensor data from a CSV file
+- `@skills/embedding-from-sensor` - run an Embedding Lens by streaming real-time data from a physical sensor
+- `@skills/embedding-upload` - run an Embedding Lens by uploading a CSV file for server-side processing
+- `@skills/newton-activity-monitor-lens-on-video` - analyze uploaded video files using Newton's activity monitor lens
+- `@skills/newton-camera-frame-analysis` - live webcam frame analysis using Newton's vision model
+- `@skills/newton-direct-query` - simple direct query to Newton model using the /query API endpoint
+- `@skills/newton-machine-state-from-file` - run a Machine State Lens by streaming sensor data from a CSV file
+- `@skills/newton-machine-state-from-sensor` - run a Machine State Lens by streaming real-time data from a physical sensor
+- `@skills/newton-machine-state-upload` - run a Machine State Lens by uploading a CSV file for server-side processing
 
 ## Rules
 
 See `@rules/` for comprehensive guidance on design principles, components, styling, charts, and linting.
+
+- `@rules/accessibility` — a11y guidelines and ARIA patterns
+- `@rules/charts` — chart setup, layerchart conventions, data visualization
+- `@rules/components` — component API patterns, props, variants, slots
+- `@rules/design-principles` — visual design language, spacing, typography
+- `@rules/frontend-architecture` — component decomposition, page composition, API logic extraction
+- `@rules/linting` — linting and formatting rules
+- `@rules/state` — state management with Svelte 5 runes
+- `@rules/styling` — Tailwind v4, semantic tokens, theming

package/files/rules/accessibility.md

@@ -205,10 +205,59 @@ For custom interactive elements, ensure:
 >
 ```
 
+## Page Structure
+
+### Skip Link
+
+Every page should have a skip link as the first focusable element:
+
+```svelte
+<a
+  href="#main-content"
+  class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-4 focus:py-2 focus:text-foreground focus:ring-2 focus:ring-ring"
+>
+  Skip to content
+</a>
+
+<main id="main-content">
+  <!-- page content -->
+</main>
+```
+
+### Semantic Landmarks
+
+Use semantic HTML elements instead of generic `<div>` wrappers:
+
+```svelte
+<!-- Before -->
+<div class="header">...</div>
+<div class="nav">...</div>
+<div class="content">...</div>
+
+<!-- After -->
+<header>...</header>
+<nav>...</nav>
+<main id="main-content">...</main>
+```
+
+### Heading Hierarchy
+
+Every page needs an `<h1>`. If the visual design doesn't include one, add it as screen-reader-only:
+
+```svelte
+<h1 class="sr-only">Dashboard</h1>
+```
+
+Never skip heading levels (e.g. `<h1>` → `<h3>`). Use the correct level for the document outline.
+
 ## Checklist
 
 When building components, verify:
 
+- [ ] Page has a skip-to-content link as the first focusable element
+- [ ] Page uses semantic landmarks (`<main>`, `<header>`, `<nav>`)
+- [ ] Page has an `<h1>` (visible or `sr-only`)
+- [ ] Heading hierarchy doesn't skip levels
 - [ ] Icon-only buttons have `aria-label`
 - [ ] Decorative icons have `aria-hidden="true"`
 - [ ] Interactive groups have `aria-label`

package/files/rules/frontend-architecture.md

@@ -0,0 +1,77 @@
+---
+paths:
+  - '**/routes/**/*.svelte'
+  - '**/+page.svelte'
+  - '**/+layout.svelte'
+---
+
+# Frontend Architecture
+
+When building a page that involves more than a simple static layout, decompose it into components rather than writing a monolithic `+page.svelte`.
+
+## When to extract a component
+
+Extract a component when a section of UI has:
+
+- 3+ primitives composed together (Card + Badge + Button = a status card)
+- Its own reactive state (`$state`, `$derived`)
+- Potential for reuse across pages or skills
+
+Common extraction candidates: media inputs, status displays, result/summary views, streaming logs, file upload flows.
+
+## Gold-standard references
+
+The project includes pattern components that demonstrate these conventions. Study them before building new ones:
+
+- `$lib/components/ui/VideoPlayer.svelte` — media playback with controls, composes Card + AspectRatio + Button + Slider
+- `$lib/components/ui/ExpandableLog.svelte` — streaming log display, composes Collapsible + Item + Badge
+- `$lib/components/ui/StatusBadge.svelte` — health indicator with derived state, composes Badge + Avatar
+- `$lib/components/ui/HealthscoreCard.svelte` — score card with derived state, composes Card sub-components
+- `$lib/components/ui/Menubar.svelte` — branded header with snippet slots
+
+Check if an existing pattern fits before building a new one. Use `@skills/build-pattern` to create new patterns that follow these same conventions.
+
+## Component conventions
+
+Follow `@rules/components` for the full conventions. The essentials:
+
+- `let { class: className, ...restProps } = $props();`
+- `cn()` for all class merging — never raw string concatenation
+- `$derived` for computed state
+- Spread `...restProps` on the root element
+- Compose from DS primitives (Card, Badge, Button, etc.) — not raw HTML
+
+## Page-level orchestration
+
+`+page.svelte` is the orchestrator. It should:
+
+- Own flow state (status, session IDs, error messages)
+- Import and compose child components
+- Pass data down via props
+- Handle top-level layout (using `@skills/create-dashboard` for dashboard layouts)
+
+Components should be presentational where possible — receive data via props, emit events up.
+
+## API and streaming logic extraction
+
+SSE consumers, fetch wrappers, polling loops, and data transforms belong in a utility file, not inline in components or pages:
+
+```
+src/lib/api/activity-monitor.js   — SSE + session management
+src/lib/api/machine-state.js      — streaming + windowing
+src/lib/api/embeddings.js         — upload + embedding extraction
+```
+
+This keeps components focused on rendering and makes API logic testable and reusable.
+
+## Streaming UI
+
+For skills that stream results (SSE, polling), prefer:
+
+- Progressive rendering — show results as they arrive, don't wait for completion
+- Live counters or progress indicators
+- Auto-scrolling log views (reference ExpandableLog pattern)
+
+## Override clause
+
+If the user explicitly requests a single-file prototype, a minimal example, or specifies a different structure, follow their instruction. These guidelines apply to production-quality demos, not quick experiments.

package/files/skills/apply-ds/SKILL.md

@@ -1,117 +1,129 @@
 ---
 name: apply-ds
-description: Sets up an existing SvelteKit project with the Archetype AI design system (@archetypeai/ds-lib-tokens). Use when initializing a new project with the design system by adding tokens to an existing project, configuring Tailwind v4 CSS imports, setting up shadcn-svelte, installing design system components and configuring eslint/prettier for Svelte projects.
+description: Apply DS tokens, components, and patterns to an existing demo initialized with ds-cli init.
+allowed-tools: Read, Edit, Grep, Bash
 ---
 
-# Applying the Design System
+# Applying the Design System to a Demo
 
-Setup involves these steps:
+This skill assumes `npx @archetypeai/ds-cli init` has already been run. The project has tokens, Tailwind v4, shadcn-svelte, and DS components installed. The goal is to migrate the demo's existing UI to use DS primitives and semantic tokens.
 
-1. Install tokens package
-2. Install and configure Tailwind CSS
-3. Initialize shadcn-svelte
-4. Install design system components
-5. Configure CSS imports
-6. Set up linting and formatting
+## Steps
 
-## Automated Setup
+1. Audit for non-DS patterns
+2. Replace raw colors with semantic tokens
+3. Replace native elements with DS components
+4. Apply layout patterns
+5. Set up linting and formatting
+6. Verify
 
-Run the setup script from the project root:
+## Step 1: Audit for Non-DS Patterns
 
-```bash
-bash scripts/setup.sh
-```
-
-The script requires:
+Run the `scripts/audit.sh` script located in this skill's directory from the project root. The script scans all `.svelte` files and reports:
 
-- A global CSS file at `src/app.css`, `src/routes/layout.css`, or `src/app.pcss`
+- **Raw Tailwind colors** — utilities like `bg-gray-100`, `text-blue-500`, `border-red-300` that should be semantic tokens
+- **Native HTML elements** — `<button>`, `<input>`, `<table>`, `<select>`, `<textarea>`, `<dialog>`, `<hr>` that have DS component equivalents
+- **Hardcoded colors** — inline `color:`, `background:`, `background-color:`, `border-color:` style values
+- **Class concatenation** — string templates or `+` concatenation on class attributes instead of `cn()`
 
-## Manual Setup
+Review the output to prioritize what to migrate.
 
-### Step 1: Install Tokens
+## Step 2: Replace Raw Colors with Semantic Tokens
 
-```bash
-npm i @archetypeai/ds-lib-tokens
-```
-
-### Step 2: Install and Configure Tailwind CSS
-
-Install Tailwind CSS v4 and its Vite plugin:
-
-```bash
-npm i -D tailwindcss @tailwindcss/vite
-```
+Replace raw Tailwind color utilities with semantic equivalents throughout `.svelte` files:
 
-Then add the `@tailwindcss/vite` plugin to your `vite.config.js`:
+| Raw Tailwind | Semantic Token |
+| --- | --- |
+| `bg-white` | `bg-background` |
+| `bg-black` | `bg-foreground` |
+| `text-black` | `text-foreground` |
+| `text-white` | `text-background` |
+| `bg-gray-50`, `bg-gray-100` | `bg-muted` |
+| `text-gray-500`, `text-gray-600` | `text-muted-foreground` |
+| `bg-gray-200`, `bg-gray-300` | `bg-accent` |
+| `border-gray-200`, `border-gray-300` | `border-border` |
+| `bg-slate-900`, `bg-gray-900` | `bg-primary` |
+| `text-slate-900`, `text-gray-900` | `text-primary` |
+| `bg-red-*` | `bg-destructive` |
+| `text-red-*` | `text-destructive` |
+| `bg-green-*` | `bg-atai-good` |
+| `text-green-*` | `text-atai-good` |
+| `bg-yellow-*` | `bg-atai-warning` |
+| `text-yellow-*` | `text-atai-warning` |
+| `bg-blue-*` | `bg-atai-neutral` |
+| `text-blue-*` | `text-atai-neutral` |
 
-```js
-import tailwindcss from '@tailwindcss/vite';
+Use judgement — not every raw color maps 1:1. Context matters:
 
-export default defineConfig({
-  plugins: [svelte(), tailwindcss()]
-  // ...
-});
-```
+- A `bg-gray-100` card background → `bg-card` or `bg-muted`
+- A `bg-gray-100` hover state → `bg-accent`
+- A `text-gray-400` placeholder → `text-muted-foreground`
+- A `border-gray-200` divider → `border-border`
 
-The setup script handles this automatically — it detects your vite config file, adds the import, and inserts `tailwindcss()` into the plugins array.
+Leave non-color utilities (`p-4`, `flex`, `rounded-lg`, etc.) unchanged.
 
-### Step 3: Initialize shadcn-svelte
+## Step 3: Replace Native Elements with DS Components
 
-The `--css` flag should point to your project's global CSS file:
+Swap native HTML elements for their DS component equivalents. Add imports as needed.
 
-```bash
-npx shadcn-svelte@latest init \
-  --base-color slate \
-  --css src/app.css \
-  --components-alias '$lib/components' \
-  --lib-alias '$lib' \
-  --utils-alias '$lib/utils' \
-  --hooks-alias '$lib/hooks' \
-  --ui-alias '$lib/components/ui' \
-  --skip-preflight \
-  --no-deps
-```
+| Native Element | DS Component | Import From |
+| --- | --- | --- |
+| `<button>` | `<Button>` | `$lib/components/ui/button` |
+| `<input>` | `<Input>` | `$lib/components/ui/input` |
+| `<textarea>` | `<Textarea>` | `$lib/components/ui/textarea` |
+| `<select>` | `<Select.Root>` + `<Select.Trigger>` + `<Select.Content>` + `<Select.Item>` | `$lib/components/ui/select` |
+| `<table>` | `<Table.Root>` + `<Table.Header>` + `<Table.Row>` + `<Table.Head>` + `<Table.Body>` + `<Table.Cell>` | `$lib/components/ui/table` |
+| `<dialog>` | `<Dialog.Root>` + `<Dialog.Content>` + `<Dialog.Header>` + `<Dialog.Title>` | `$lib/components/ui/dialog` |
+| `<hr>` | `<Separator>` | `$lib/components/ui/separator` |
+| `<label>` | `<Label>` | `$lib/components/ui/label` |
+| `<a>` (styled as button) | `<Button variant="link">` or `<Button>` with `href` | `$lib/components/ui/button` |
 
-### Step 4: Install Components
+For each replacement:
 
-Install all components:
+1. Add the import to the `<script>` block
+2. Replace the element and map attributes (`class` → `class`, `onclick` → `onclick`, etc.)
+3. Use `cn()` from `$lib/utils.js` for merging classes — never raw concatenation
+4. Map native variants: e.g. a small styled button → `<Button size="sm">`, a ghost-styled button → `<Button variant="ghost">`
 
-```bash
-npx @archetypeai/ds-cli add ds-ui-svelte
-```
+## Step 4: Apply Layout Patterns
 
-Or install individually:
+Identify structural opportunities to use DS composition patterns:
 
-```bash
-npx shadcn-svelte@latest add https://design-system.archetypeai.workers.dev/r/button.json
-```
+- **Cards** — wrap content sections in `<Card.Root>` / `<Card.Header>` / `<Card.Content>` instead of raw `<div>` with border/shadow classes
+- **Separators** — replace `<hr>` or border-bottom hacks with `<Separator>`
+- **Badges** — replace styled `<span>` status indicators with `<Badge>`
+- **Skeleton** — replace loading placeholders with `<Skeleton>`
+- **Scroll Area** — replace overflow containers with `<ScrollArea>`
+- **Tooltips** — replace `title` attributes with `<Tooltip.Root>` / `<Tooltip.Trigger>` / `<Tooltip.Content>`
 
-### Step 5: Configure CSS Imports
+Import patterns from `$lib/components/ui/` as needed.
 
-Replace the contents of your global CSS file with:
+## Step 5: Set Up Linting and Formatting
 
-```css
-@import '@archetypeai/ds-lib-tokens/theme.css';
-@import 'tailwindcss';
-```
+Run the `scripts/setup.sh` script located in this skill's directory from the project root. The script:
 
-### Step 6: Set Up Linting
+- Installs `eslint`, `prettier`, `eslint-plugin-svelte`, `eslint-config-prettier`, `prettier-plugin-svelte`, `prettier-plugin-tailwindcss`, and `globals`
+- Creates `eslint.config.js` (flat config v9+) if it doesn't exist
+- Creates `.prettierrc` with Svelte + Tailwind plugin config if it doesn't exist
+- Creates `.prettierignore` if it doesn't exist
+- Adds `lint`, `lint:fix`, `format`, and `format:check` scripts to `package.json`
 
-Install dependencies:
+After setup, run linting and formatting:
 
 ```bash
-npm i -D eslint prettier eslint-plugin-svelte eslint-config-prettier prettier-plugin-svelte prettier-plugin-tailwindcss globals
+npm run lint:fix && npm run format
 ```
 
-The setup script creates `eslint.config.js`, `.prettierrc`, and `.prettierignore` automatically. See `@rules/linting.md` for details.
+See `@rules/linting.md` for details.
 
-## Verification
+## Step 6: Verify
 
-Confirm setup is complete:
+Confirm the design system is properly applied:
 
-- [ ] `@archetypeai/ds-lib-tokens` in package.json
-- [ ] `tailwindcss` and `@tailwindcss/vite` in package.json devDependencies
-- [ ] `vite.config.js` includes `import tailwindcss from '@tailwindcss/vite'` and `tailwindcss()` in plugins
-- [ ] `components.json` exists
-- [ ] Components in `$lib/components/ui/`
-- [ ] CSS file contains correct imports
+- [ ] No raw Tailwind color utilities in `.svelte` files (re-run the audit script)
+- [ ] Native elements replaced with DS components where appropriate
+- [ ] All component imports resolve to `$lib/components/ui/`
+- [ ] `cn()` used for class merging — no string concatenation
+- [ ] Linting passes: `npm run lint && npm run format:check`
+- [ ] App builds without errors: `npm run build`
+- [ ] App runs correctly: `npm run dev`

package/files/skills/apply-ds/scripts/audit.sh

@@ -0,0 +1,169 @@
+#!/bin/bash
+#
+# Design System Audit Script
+#
+# Scans .svelte files for non-DS patterns that should be migrated:
+# - Raw Tailwind color utilities (should be semantic tokens)
+# - Native HTML elements (should be DS components)
+# - Hardcoded inline color styles
+# - Class string concatenation (should use cn())
+#
+# Usage: bash <skill-dir>/scripts/audit.sh
+#
+
+set -e
+
+# Colors for output
+RED='\033[0;31m'
+YELLOW='\033[0;33m'
+CYAN='\033[0;36m'
+NC='\033[0m'
+
+echo "═══════════════════════════════════════════════════"
+echo "  Design System Audit"
+echo "═══════════════════════════════════════════════════"
+echo ""
+
+if [ ! -d "src" ]; then
+    echo "✗ Error: No src/ directory found"
+    echo "  Run this script from your project root directory"
+    exit 1
+fi
+
+SVELTE_FILES=$(find src -name "*.svelte" -not -path "*/node_modules/*" -not -path "*/.svelte-kit/*" 2>/dev/null)
+
+if [ -z "$SVELTE_FILES" ]; then
+    echo "✗ No .svelte files found in src/"
+    exit 1
+fi
+
+FILE_COUNT=$(echo "$SVELTE_FILES" | wc -l | tr -d ' ')
+echo "Scanning $FILE_COUNT .svelte files..."
+echo ""
+
+ISSUES=0
+
+# ─────────────────────────────────────────────────────────
+# 1. Raw Tailwind color utilities
+# ─────────────────────────────────────────────────────────
+
+echo -e "${CYAN}── Raw Tailwind Colors ──${NC}"
+echo ""
+
+RAW_COLOR_PATTERN='\b(bg|text|border|ring|outline|shadow|from|to|via)-(red|blue|green|yellow|orange|purple|pink|indigo|violet|teal|cyan|emerald|amber|lime|rose|fuchsia|sky|stone|zinc|neutral|slate|gray|grey|white|black)-[0-9]'
+
+RAW_MATCHES=$(grep -rn --include="*.svelte" -E "$RAW_COLOR_PATTERN" src/ 2>/dev/null || true)
+
+if [ -n "$RAW_MATCHES" ]; then
+    echo "$RAW_MATCHES" | while IFS= read -r line; do
+        echo -e "  ${YELLOW}$line${NC}"
+    done
+    RAW_COUNT=$(echo "$RAW_MATCHES" | wc -l | tr -d ' ')
+    ISSUES=$((ISSUES + RAW_COUNT))
+    echo ""
+    echo "  Found $RAW_COUNT raw color utilities → replace with semantic tokens"
+else
+    echo "  ✓ No raw Tailwind color utilities found"
+fi
+
+# Also check bg-white, bg-black, text-white, text-black without shade numbers
+BW_PATTERN='\b(bg-white|bg-black|text-white|text-black)\b'
+BW_MATCHES=$(grep -rn --include="*.svelte" -E "$BW_PATTERN" src/ 2>/dev/null || true)
+
+if [ -n "$BW_MATCHES" ]; then
+    echo ""
+    echo "$BW_MATCHES" | while IFS= read -r line; do
+        echo -e "  ${YELLOW}$line${NC}"
+    done
+    BW_COUNT=$(echo "$BW_MATCHES" | wc -l | tr -d ' ')
+    echo ""
+    echo "  Found $BW_COUNT black/white utilities → replace with bg-background, text-foreground, etc."
+fi
+
+echo ""
+
+# ─────────────────────────────────────────────────────────
+# 2. Native HTML elements with DS equivalents
+# ─────────────────────────────────────────────────────────
+
+echo -e "${CYAN}── Native HTML Elements ──${NC}"
+echo ""
+
+# Search in template sections only (outside <script> blocks)
+NATIVE_ELEMENTS="<button[> ]|<input[> /]|<textarea[> /]|<select[> ]|<table[> ]|<dialog[> ]|<hr[> /]|<hr>"
+
+NATIVE_MATCHES=$(grep -rn --include="*.svelte" -E "$NATIVE_ELEMENTS" src/ 2>/dev/null | grep -v '<script' | grep -v 'import ' || true)
+
+if [ -n "$NATIVE_MATCHES" ]; then
+    echo "$NATIVE_MATCHES" | while IFS= read -r line; do
+        echo -e "  ${YELLOW}$line${NC}"
+    done
+    NATIVE_COUNT=$(echo "$NATIVE_MATCHES" | wc -l | tr -d ' ')
+    ISSUES=$((ISSUES + NATIVE_COUNT))
+    echo ""
+    echo "  Found $NATIVE_COUNT native elements → replace with DS components"
+else
+    echo "  ✓ No native HTML elements with DS equivalents found"
+fi
+
+echo ""
+
+# ─────────────────────────────────────────────────────────
+# 3. Hardcoded inline color styles
+# ─────────────────────────────────────────────────────────
+
+echo -e "${CYAN}── Hardcoded Inline Colors ──${NC}"
+echo ""
+
+INLINE_PATTERN='style="[^"]*\b(color|background|background-color|border-color)\s*:'
+
+INLINE_MATCHES=$(grep -rn --include="*.svelte" -E "$INLINE_PATTERN" src/ 2>/dev/null || true)
+
+if [ -n "$INLINE_MATCHES" ]; then
+    echo "$INLINE_MATCHES" | while IFS= read -r line; do
+        echo -e "  ${YELLOW}$line${NC}"
+    done
+    INLINE_COUNT=$(echo "$INLINE_MATCHES" | wc -l | tr -d ' ')
+    ISSUES=$((ISSUES + INLINE_COUNT))
+    echo ""
+    echo "  Found $INLINE_COUNT hardcoded inline colors → use semantic token classes"
+else
+    echo "  ✓ No hardcoded inline colors found"
+fi
+
+echo ""
+
+# ─────────────────────────────────────────────────────────
+# 4. Class string concatenation (should use cn())
+# ─────────────────────────────────────────────────────────
+
+echo -e "${CYAN}── Class Concatenation ──${NC}"
+echo ""
+
+# Look for class={`...`} or class={something + "..."} patterns
+CONCAT_PATTERN='class=\{`|class=\{[^}]*\+'
+
+CONCAT_MATCHES=$(grep -rn --include="*.svelte" -E "$CONCAT_PATTERN" src/ 2>/dev/null | grep -v 'cn(' || true)
+
+if [ -n "$CONCAT_MATCHES" ]; then
+    echo "$CONCAT_MATCHES" | while IFS= read -r line; do
+        echo -e "  ${YELLOW}$line${NC}"
+    done
+    CONCAT_COUNT=$(echo "$CONCAT_MATCHES" | wc -l | tr -d ' ')
+    ISSUES=$((ISSUES + CONCAT_COUNT))
+    echo ""
+    echo "  Found $CONCAT_COUNT class concatenations → use cn() from \$lib/utils.js"
+else
+    echo "  ✓ No class string concatenation found"
+fi
+
+echo ""
+
+# ─────────────────────────────────────────────────────────
+# Summary
+# ─────────────────────────────────────────────────────────
+
+echo "═══════════════════════════════════════════════════"
+echo "  Audit Complete"
+echo "═══════════════════════════════════════════════════"
+echo ""