feat: Add DSS infrastructure, remove legacy admin-ui code

- Remove legacy admin-ui/js/ vanilla JS components
- Add .dss/ directory with core tokens, skins, themes
- Add Storybook configuration and generated stories
- Add DSS management scripts (dss-services, dss-init, dss-setup, dss-reset)
- Add MCP command definitions for DSS plugin
- Add Figma sync architecture and scripts
- Update pre-commit hooks with documentation validation
- Fix JSON trailing commas in skin files

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

admin-ui/src/stories/Overview.stories.js

@@ -0,0 +1,94 @@
+/**
+ * Design System Overview
+ * @generated 2025-12-10T21:48:22.316923
+ */
+export default {
+  title: 'Overview',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'DSS Design System - Token documentation and component library'
+      }
+    }
+  }
+};
+
+const styles = `
+  .overview { max-width: 800px; font-family: system-ui, sans-serif; }
+  .overview h1 { font-size: 2rem; margin-bottom: 0.5rem; }
+  .overview .subtitle { color: #6b7280; margin-bottom: 2rem; }
+  .overview h2 { font-size: 1.25rem; margin-top: 2rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; }
+  .overview ul { padding-left: 1.5rem; }
+  .overview li { margin: 0.5rem 0; }
+  .overview code { background: #f3f4f6; padding: 0.125rem 0.375rem; border-radius: 4px; font-size: 0.875rem; }
+  .layer { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; background: #f9fafb; border-radius: 8px; margin: 0.5rem 0; }
+  .layer-num { width: 24px; height: 24px; background: #18181b; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; }
+  .stats { display: flex; gap: 1rem; margin: 1rem 0; }
+  .stat { background: #f9fafb; padding: 1rem; border-radius: 8px; text-align: center; }
+  .stat-value { font-size: 2rem; font-weight: 700; color: #18181b; }
+  .stat-label { font-size: 0.75rem; color: #6b7280; }
+`;
+
+export const Introduction = {
+  render: () => `
+    <style>${styles}</style>
+    <div class="overview">
+      <h1>DSS Design System</h1>
+      <p class="subtitle">Token-driven design system with 3-layer architecture</p>
+
+      <div class="stats">
+        <div class="stat">
+          <div class="stat-value">22</div>
+          <div class="stat-label">Color Scales</div>
+        </div>
+        <div class="stat">
+          <div class="stat-value">59</div>
+          <div class="stat-label">Components</div>
+        </div>
+        <div class="stat">
+          <div class="stat-value">6</div>
+          <div class="stat-label">Categories</div>
+        </div>
+      </div>
+
+      <h2>Architecture</h2>
+      <div class="layer">
+        <span class="layer-num">1</span>
+        <strong>Core Primitives</strong> - Raw Tailwind values (colors, spacing, fonts)
+      </div>
+      <div class="layer">
+        <span class="layer-num">2</span>
+        <strong>Skin</strong> - Semantic mapping (primary, secondary, etc.)
+      </div>
+      <div class="layer">
+        <span class="layer-num">3</span>
+        <strong>Theme</strong> - Brand overrides
+      </div>
+
+      <h2>Navigation</h2>
+      <ul>
+        <li><strong>Foundation</strong> - Core primitives (colors, spacing, typography, radius, shadows)</li>
+        <li><strong>Tokens</strong> - Semantic design tokens from skin</li>
+        <li><strong>Components</strong> - 59 shadcn/ui components organized by category</li>
+      </ul>
+
+      <h2>Component Categories</h2>
+      <ul>
+        <li><strong>Form</strong> - Button, Input, Select, Checkbox, etc.</li>
+        <li><strong>Data Display</strong> - Table, Badge, Avatar, Chart, etc.</li>
+        <li><strong>Feedback</strong> - Alert, Toast, Progress, Spinner, etc.</li>
+        <li><strong>Navigation</strong> - Tabs, Breadcrumb, Sidebar, etc.</li>
+        <li><strong>Overlay</strong> - Dialog, Sheet, Dropdown, Tooltip, etc.</li>
+        <li><strong>Layout</strong> - Card, Separator, Scroll Area, etc.</li>
+      </ul>
+
+      <h2>Usage</h2>
+      <p>Import tokens CSS in your project:</p>
+      <pre><code>import '.dss/data/_system/themes/tokens.css';</code></pre>
+      <p>Use CSS variables in your styles:</p>
+      <pre><code>color: var(--color-primary);
+background: var(--color-background);</code></pre>
+    </div>
+  `
+};