ui-mirror-skill 1.0.0

package/skill/references/css-token-mapping.md

@@ -0,0 +1,359 @@
+# UI Mirror: CSS Token Mapping (Reference Example)
+
+> **NOTE**: This file contains example token values from a shadcn/ui project as a reference template.
+> When using this skill, replace these values with the actual tokens from your project's `globals.css`.
+> Auto-detect source of truth: project's global CSS file and design system documentation.
+> All token values should be in OKLCH format for accurate comparison.
+
+---
+
+## 1. Core Palette (`:root` tokens)
+
+### Primary
+
+| Token | OKLCH Value | Approx HEX | Usage |
+|-------|-------------|------------|-------|
+| `--primary` | `oklch(0.575 0.215 276)` | #6866F1 | Brand purple. Buttons (default), links, active states, sidebar active |
+| `--primary-foreground` | `oklch(1 0 0)` | #FFFFFF | Text on primary backgrounds |
+
+### Background & Foreground
+
+| Token | OKLCH Value | Approx HEX | Usage |
+|-------|-------------|------------|-------|
+| `--background` | `oklch(0.97 0.003 276)` | #F6F6F8 | Page background (purple-tinted light gray) |
+| `--foreground` | `oklch(0.145 0 0)` | #1A1A1A | Primary text color (near-black) |
+
+### Card & Popover
+
+| Token | OKLCH Value | Approx HEX | Usage |
+|-------|-------------|------------|-------|
+| `--card` | `oklch(1 0 0)` | #FFFFFF | Card surfaces |
+| `--card-foreground` | `oklch(0.145 0 0)` | #1A1A1A | Text on cards |
+| `--popover` | `oklch(1 0 0)` | #FFFFFF | Dropdown/popover surfaces |
+| `--popover-foreground` | `oklch(0.145 0 0)` | #1A1A1A | Text in popovers |
+
+### Secondary & Muted
+
+| Token | OKLCH Value | Approx HEX | Usage |
+|-------|-------------|------------|-------|
+| `--secondary` | `oklch(0.97 0.003 276)` | #F6F6F8 | Secondary button bg, subtle backgrounds |
+| `--secondary-foreground` | `oklch(0.205 0 0)` | #2E2E2E | Text on secondary backgrounds |
+| `--muted` | `oklch(0.955 0.005 276)` | #F0F0F4 | Muted backgrounds, disabled states |
+| `--muted-foreground` | `oklch(0.52 0.01 276)` | #7B7B8E | Placeholder text, descriptions, timestamps |
+
+### Accent
+
+| Token | OKLCH Value | Approx HEX | Usage |
+|-------|-------------|------------|-------|
+| `--accent` | `oklch(0.965 0.005 276)` | #F3F3F7 | Hover backgrounds, accent surfaces |
+| `--accent-foreground` | `oklch(0.205 0 0)` | #2E2E2E | Text on accent backgrounds |
+
+### Destructive
+
+| Token | OKLCH Value | Approx HEX | Usage |
+|-------|-------------|------------|-------|
+| `--destructive` | `oklch(0.577 0.245 27.325)` | #E53E3E | Destructive buttons, error states |
+
+### Border, Input & Ring
+
+| Token | OKLCH Value | Approx HEX | Usage |
+|-------|-------------|------------|-------|
+| `--border` | `oklch(0.91 0.005 276)` | #E4E4E9 | Default borders (cards, dividers) |
+| `--input` | `oklch(0.92 0.005 276)` | #E7E7EC | Input field borders |
+| `--ring` | `oklch(0.575 0.215 276 / 0.5)` | #6866F1 @ 50% | Focus ring color |
+
+---
+
+## 2. Chart Colors
+
+| Token | OKLCH Value | Approx HEX |
+|-------|-------------|------------|
+| `--chart-1` | `oklch(0.646 0.222 41.116)` | Orange |
+| `--chart-2` | `oklch(0.6 0.118 184.704)` | Teal |
+| `--chart-3` | `oklch(0.398 0.07 227.392)` | Dark blue |
+| `--chart-4` | `oklch(0.828 0.189 84.429)` | Yellow |
+| `--chart-5` | `oklch(0.769 0.188 70.08)` | Amber |
+
+---
+
+## 3. Shadow Tokens
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--shadow-primary-glow` | `0 2px 10px -3px oklch(0.575 0.215 276 / 0.5)` | Purple glow on primary buttons |
+
+### Shadow Scale (Tailwind classes)
+
+| Class | Usage | Rule |
+|-------|-------|------|
+| `shadow-xs` | Input fields, outline buttons | SH1 |
+| `shadow-sm` | Cards (via `<Card>` component) | SH2 |
+| `shadow-md` + `shadow-primary/20` | Default buttons, dropdowns, popovers | SH3 |
+| `shadow-lg` | Dialogs, sheets | SH4 |
+
+---
+
+## 4. Sidebar Tokens
+
+| Token | OKLCH Value | Approx HEX | Usage |
+|-------|-------------|------------|-------|
+| `--sidebar` | `oklch(1 0 0)` | #FFFFFF | Sidebar background |
+| `--sidebar-foreground` | `oklch(0.145 0 0)` | #1A1A1A | Sidebar text |
+| `--sidebar-primary` | `oklch(0.575 0.215 276)` | #6866F1 | Active sidebar item |
+| `--sidebar-primary-foreground` | `oklch(1 0 0)` | #FFFFFF | Text on active item |
+| `--sidebar-accent` | `oklch(0.965 0.005 276)` | #F3F3F7 | Hover/active background |
+| `--sidebar-accent-foreground` | `oklch(0.205 0 0)` | #2E2E2E | Text on hover |
+| `--sidebar-border` | `oklch(0.91 0.005 276)` | #E4E4E9 | Sidebar borders |
+| `--sidebar-ring` | `oklch(0.575 0.215 276 / 0.5)` | #6866F1 @ 50% | Sidebar focus ring |
+
+### Sidebar Dimensions
+| Property | Value |
+|----------|-------|
+| `--sidebar-width` | `16rem` (256px) |
+| `--sidebar-width-mobile` | `18rem` (288px) |
+| `--sidebar-width-icon` | `3rem` (48px) |
+
+---
+
+## 5. BoXa M3 Autumn Theme Tokens
+
+> Used exclusively within `[data-boxa]` scoped elements for the ecology wiki.
+
+| Token | OKLCH Value | Approx HEX | Usage |
+|-------|-------------|------------|-------|
+| `--boxa-primary` | `oklch(0.45 0.14 42)` | #6D5044 | Autumn brown primary |
+| `--boxa-primary-container` | `oklch(0.52 0.16 42)` | -- | Primary container (M3) |
+| `--boxa-on-primary` | `oklch(1 0 0)` | #FFFFFF | Text on primary |
+| `--boxa-on-primary-container` | `oklch(0.99 0.002 0)` | -- | Text on primary container |
+| `--boxa-primary-fixed` | `oklch(0.91 0.05 42)` | -- | Fixed primary tint |
+| `--boxa-secondary` | `oklch(0.48 0.13 240)` | -- | Blue secondary |
+| `--boxa-on-secondary` | `oklch(1 0 0)` | #FFFFFF | Text on secondary |
+| `--boxa-secondary-fixed` | `oklch(0.92 0.04 240)` | -- | Fixed secondary tint |
+| `--boxa-tertiary` | `oklch(0.47 0.14 255)` | -- | Purple tertiary |
+| `--boxa-surface` | `oklch(0.98 0.01 85)` | -- | Warm white surface |
+| `--boxa-surface-dim` | `oklch(0.88 0.01 85)` | -- | Dimmed surface |
+| `--boxa-surface-container` | `oklch(0.95 0.01 85)` | -- | Container surface |
+| `--boxa-surface-container-high` | `oklch(0.93 0.01 85)` | -- | High-emphasis container |
+| `--boxa-surface-container-low` | `oklch(0.96 0.01 85)` | -- | Low-emphasis container |
+| `--boxa-on-surface` | `oklch(0.18 0.02 85)` | -- | Dark text on surface |
+| `--boxa-on-surface-variant` | `oklch(0.40 0.06 42)` | -- | Variant text |
+| `--boxa-outline` | `oklch(0.55 0.05 42)` | -- | Outline/border |
+| `--boxa-outline-variant` | `oklch(0.82 0.04 42)` | -- | Light outline |
+| `--boxa-error` | `oklch(0.44 0.2 27)` | -- | Error color |
+| `--boxa-background` | `oklch(0.98 0.01 85)` | -- | Page background |
+
+### Wiki Alias Tokens (v1 redesign)
+| Alias Token | Maps To |
+|-------------|---------|
+| `--wiki-primary` | `var(--boxa-primary)` |
+| `--wiki-primary-light` | `var(--boxa-primary-container)` |
+| `--wiki-secondary` | `var(--boxa-secondary)` |
+| `--wiki-accent` | `var(--boxa-tertiary)` |
+| `--wiki-surface` | `var(--boxa-surface)` |
+| `--wiki-surface-alt` | `var(--boxa-surface-container-low)` |
+| `--wiki-text` | `var(--boxa-on-surface)` |
+| `--wiki-text-muted` | `var(--boxa-on-surface-variant)` |
+| `--wiki-border` | `var(--boxa-outline)` |
+| `--wiki-border-light` | `var(--boxa-outline-variant)` |
+
+### BoXa Radius Override
+```css
+[data-boxa] {
+  --radius: 0.25rem;  /* Tighter radius than core project's 0.375rem */
+}
+```
+
+---
+
+## 6. BlockLab Mode Tokens
+
+### Batch Mode (`[data-blocklab-mode="batch"]`)
+| Token | OKLCH Value |
+|-------|-------------|
+| `--bl-primary` | `oklch(0.575 0.215 276)` (same as core primary) |
+| `--bl-primary-fg` | `oklch(1 0 0)` |
+| `--bl-accent-bg` | `oklch(0.97 0.003 276)` |
+| `--bl-accent-subtle` | `oklch(0.955 0.01 276)` |
+| `--bl-ring` | `oklch(0.575 0.215 276 / 0.5)` |
+
+### Interactive Mode (`[data-blocklab-mode="interactive"]`)
+| Token | OKLCH Value |
+|-------|-------------|
+| `--bl-primary` | `oklch(0.6 0.155 175)` (teal-green) |
+| `--bl-primary-fg` | `oklch(1 0 0)` |
+| `--bl-accent-bg` | `oklch(0.97 0.01 175)` |
+| `--bl-accent-subtle` | `oklch(0.955 0.02 175)` |
+| `--bl-ring` | `oklch(0.6 0.155 175 / 0.5)` |
+
+---
+
+## 7. Radius System
+
+### Base Value
+```css
+:root {
+  --radius: 0.375rem;  /* 6px */
+}
+```
+
+### Computed Scale
+| Tailwind Class | CSS Variable | Computed Value | Usage |
+|---------------|-------------|---------------|-------|
+| `rounded-sm` | `--radius-sm` | `calc(0.375rem - 4px)` = ~2px | Close buttons, tiny elements |
+| `rounded-md` | `--radius-md` | `calc(0.375rem - 2px)` = ~4px | Buttons, inputs (R1) |
+| `rounded-lg` | `--radius-lg` | `0.375rem` = 6px | Cards, tabs, calendar (R2) |
+| `rounded-xl` | `--radius-xl` | `calc(0.375rem + 4px)` = ~10px | FORBIDDEN per R4 (homeroom exception) |
+| `rounded-2xl` | `--radius-2xl` | `calc(0.375rem + 8px)` = ~14px | FORBIDDEN per R4 |
+| `rounded-3xl` | `--radius-3xl` | `calc(0.375rem + 12px)` = ~18px | FORBIDDEN per R4 |
+| `rounded-4xl` | `--radius-4xl` | `calc(0.375rem + 16px)` = ~22px | FORBIDDEN per R4 |
+| `rounded-full` | -- | 9999px | Avatars, badges, status dots (R3) |
+
+---
+
+## 8. Typography System
+
+### Font Stack
+```css
+--font-sans: var(--font-pretendard), "Pretendard Variable", "Pretendard",
+             var(--font-inter), Inter, ui-sans-serif, system-ui, sans-serif;
+--font-mono: var(--font-mono);  /* System monospace */
+```
+
+### Size Scale (Tailwind)
+| Class | Size | Usage |
+|-------|------|-------|
+| `text-xs` | 0.75rem (12px) | Badge text, timestamps, metadata |
+| `text-sm` | 0.875rem (14px) | Body text, descriptions, inputs (md:) |
+| `text-base` | 1rem (16px) | Mobile input text, emphasis body |
+| `text-lg` | 1.125rem (18px) | Dialog titles, section headers |
+| `text-xl` | 1.25rem (20px) | Page sub-headers |
+| `text-2xl` | 1.5rem (24px) | Page titles |
+| `text-3xl` | 1.875rem (30px) | Hero/large titles |
+| `text-4xl` | 2.25rem (36px) | Maximum heading size |
+
+### Weight Scale
+| Class | Weight | Usage |
+|-------|--------|-------|
+| `font-normal` | 400 | Body text |
+| `font-medium` | 500 | Labels, table headers, button text |
+| `font-semibold` | 600 | Card titles, dialog titles, emphasis |
+| `font-bold` | 700 | Strong emphasis (rare) |
+
+---
+
+## 9. State Colors (Semantic)
+
+| State | Background | Text | Usage |
+|-------|-----------|------|-------|
+| Success | `bg-emerald-50` | `text-emerald-700` | Completed, approved, online |
+| Warning | `bg-amber-50` | `text-amber-700` | Pending, needs attention |
+| Error | `bg-red-50` | `text-red-700` | Failed, blocked, error |
+| Info | `bg-primary/10` | `text-primary` | Informational highlights |
+
+---
+
+## 10. Design Rules Reference (design system rules)
+
+### Colors (C1-C5)
+| ID | Rule |
+|----|------|
+| C1 | Semantic tokens only -- no hardcoded HEX/RGB |
+| C2 | Light mode only -- `dark:` prefix forbidden |
+| C3 | State colors: emerald/amber/red + 50/700 |
+| C4 | Opacity via slash notation: `bg-primary/10` |
+| C5 | globals.css tokens in OKLCH format |
+
+### Typography (T1-T4)
+| ID | Rule |
+|----|------|
+| T1 | `--font-sans` (Pretendard+Inter) -- no hardcoded font-family |
+| T2 | Tailwind size scale only (xs-4xl) -- no `text-[13px]` |
+| T3 | Weight 4 steps: normal(400)/medium(500)/semibold(600)/bold(700) |
+| T4 | Monospace: `font-mono` system variable |
+
+### Spacing (S1-S3)
+| ID | Rule |
+|----|------|
+| S1 | 4px base unit -- Tailwind scale only |
+| S2 | Page padding `p-6`, card padding `px-4 pt-4`/`px-4 pb-4` |
+| S3 | Section gap `gap-4`, internal element gap `gap-2` |
+
+### Border Radius (R1-R4)
+| ID | Rule |
+|----|------|
+| R1 | Buttons/inputs: `rounded-md` (6px) |
+| R2 | Cards/tabs/calendar: `rounded-lg` (8px) |
+| R3 | Avatars/status dots: `rounded-full` |
+| R4 | `rounded-xl` and above FORBIDDEN (homeroom exception) |
+
+### Shadows (SH1-SH4)
+| ID | Rule |
+|----|------|
+| SH1 | Inputs/outline buttons: `shadow-xs` |
+| SH2 | Cards: `shadow-sm` (via Card component) -- no additional shadow |
+| SH3 | Dropdowns/popovers/default buttons: `shadow-md` |
+| SH4 | Dialogs/sheets: `shadow-lg` |
+
+### Animations (A1-A3)
+| ID | Rule |
+|----|------|
+| A1 | `tw-animate-css` only -- `framer-motion` forbidden |
+| A2 | `transition-all` + duration allowed |
+| A3 | Custom keyframes in `globals.css` only |
+
+### Components (CP1-CP6)
+| ID | Rule |
+|----|------|
+| CP1 | CVA + `cn()` + `data-slot` pattern required |
+| CP2 | Cards: shadcn `<Card>` component (no raw div) |
+| CP3 | Icons: `lucide-react`, default `size-4` |
+| CP4 | Empty state: icon + title + description |
+| CP5 | Toast: shadcn Sonner |
+| CP6 | Status badge: shadcn `<Badge>` variant |
+
+### Accessibility (AC1-AC4)
+| ID | Rule |
+|----|------|
+| AC1 | `focus-visible` ring style: `ring-ring/50 ring-[3px]` |
+| AC2 | Form error: `aria-invalid` |
+| AC3 | Visually hidden text: `sr-only` |
+| AC4 | UI components: `data-slot` attribute required |
+
+---
+
+## 11. Scrollbar Styling
+
+```css
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background-color: oklch(0.575 0.215 276 / 0.2);  /* Primary @ 20% */
+  border-radius: 20px;
+}
+```
+
+### Hide Scrollbar Utility
+```css
+.no-scrollbar::-webkit-scrollbar { display: none; }
+.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+```
+
+---
+
+## 12. Custom Animations (globals.css)
+
+| Class | Keyframe | Duration | Easing |
+|-------|----------|----------|--------|
+| `.animate-slot-spin` | `slot-spin` (translateY 0 -> -480px) | 2.5s | cubic-bezier(0.33, 1, 0.68, 1) |
+| `.animate-fade-in` | `fade-in` (opacity 0 -> 1) | 0.3s | ease-in |
+| `.cursor-blink` | `cursor-blink` (opacity toggle) | 1s | step-end infinite |
+
+---
+
+## 13. Privacy Masking System
+
+| Attribute | Selector | Effect |
+|-----------|----------|--------|
+| `data-masking-names="true"` | `[data-sensitive="name"]` | blur(8px) + no-select |
+| `data-masking-scores="true"` | `[data-sensitive="score"]` | blur(8px) + no-select |
+| `data-masking-photos="true"` | `[data-sensitive="photo"]` | blur(12px) + no-select |

package/skill/references/output-template.md

@@ -0,0 +1,249 @@
+# UI Mirror: Analysis Report Template
+
+> Copy this template for each benchmark analysis. Replace all `{{placeholder}}` values.
+
+---
+
+```markdown
+# UI Mirror Analysis: {{BENCHMARK_NAME}}
+
+**Benchmark URL**: {{URL}}
+**Date Analyzed**: {{YYYY-MM-DD}}
+**Pages Analyzed**: {{list of specific pages/routes examined}}
+**Analyzer**: UI Mirror Skill (automated)
+**Project Version**: current `main` branch
+
+---
+
+## Executive Summary
+
+{{3-5 sentences summarizing the overall comparison. Include:
+- Overall similarity score (X.X / 5.0)
+- The most similar axis and least similar axis
+- Whether migration is feasible within the project's design rules
+- Key blockers or conflicts with existing design system rules
+- Recommended approach (token swap / component override / hybrid)}}
+
+---
+
+## Visual Comparison
+
+### Benchmark Screenshots
+| Page | Screenshot |
+|------|-----------|
+| {{page_name}} | ![{{page_name}}](./screenshots/benchmark-{{slug}}.png) |
+
+### Current Project State
+| Page | Screenshot |
+|------|-----------|
+| {{equivalent_page}} | ![{{equivalent_page}}](./screenshots/current-{{slug}}.png) |
+
+### Side-by-Side Overlay
+| Element | Benchmark | Current | Delta |
+|---------|-----------|-------|-------|
+| {{element}} | ![](./screenshots/detail-benchmark-{{n}}.png) | ![](./screenshots/detail-current-{{n}}.png) | {{description}} |
+
+---
+
+## 7-Axis Comparison
+
+### Axis 1: Layout (Score: {{X}}/5)
+
+| Property | Benchmark Value | Current Value | Gap | Action |
+|----------|----------------|-------------|-----|--------|
+| Grid system | {{value}} | Sidebar + SidebarInset (flex) | {{description}} | {{KEEP / ADOPT / HYBRID}} |
+| Max-width | {{value}} | No fixed max-width (flex-1) | {{description}} | {{action}} |
+| Sidebar width | {{value}} | 16rem (--sidebar-width) | {{description}} | {{action}} |
+| Header position | {{value}} | Per-page (not global sticky) | {{description}} | {{action}} |
+| Breakpoints | {{values}} | sm:640 md:768 lg:1024 xl:1280 | {{description}} | {{action}} |
+| Column structure | {{value}} | 2-col (sidebar + main) | {{description}} | {{action}} |
+| Responsive collapse | {{value}} | Sheet on mobile | {{description}} | {{action}} |
+
+### Axis 2: Color (Score: {{X}}/5)
+
+| Token | Benchmark OKLCH | Current OKLCH | Delta-E | Action |
+|-------|-----------------|-------------|---------|--------|
+| Primary | {{oklch(L C H)}} | oklch(0.575 0.215 276) | {{value}} | {{action}} |
+| Primary foreground | {{oklch(L C H)}} | oklch(1 0 0) | {{value}} | {{action}} |
+| Background | {{oklch(L C H)}} | oklch(0.97 0.003 276) | {{value}} | {{action}} |
+| Foreground | {{oklch(L C H)}} | oklch(0.145 0 0) | {{value}} | {{action}} |
+| Card | {{oklch(L C H)}} | oklch(1 0 0) | {{value}} | {{action}} |
+| Secondary | {{oklch(L C H)}} | oklch(0.97 0.003 276) | {{value}} | {{action}} |
+| Muted | {{oklch(L C H)}} | oklch(0.955 0.005 276) | {{value}} | {{action}} |
+| Muted foreground | {{oklch(L C H)}} | oklch(0.52 0.01 276) | {{value}} | {{action}} |
+| Accent | {{oklch(L C H)}} | oklch(0.965 0.005 276) | {{value}} | {{action}} |
+| Destructive | {{oklch(L C H)}} | oklch(0.577 0.245 27.325) | {{value}} | {{action}} |
+| Border | {{oklch(L C H)}} | oklch(0.91 0.005 276) | {{value}} | {{action}} |
+| Input | {{oklch(L C H)}} | oklch(0.92 0.005 276) | {{value}} | {{action}} |
+| Ring | {{oklch(L C H / A)}} | oklch(0.575 0.215 276 / 0.5) | {{value}} | {{action}} |
+
+**Gradient usage**: {{yes/no, details}}
+**Dark mode**: {{yes/no -- check project design rules}}
+**State colors**: {{mapping to emerald/amber/red per C3}}
+
+### Axis 3: Typography (Score: {{X}}/5)
+
+| Property | Benchmark Value | Current Value | Gap | Action |
+|----------|----------------|-------------|-----|--------|
+| Primary font | {{font-name}} | Pretendard + Inter (font-sans) | {{description}} | {{action}} |
+| Mono font | {{font-name}} | System mono (font-mono) | {{description}} | {{action}} |
+| Body size | {{size}} | text-sm (14px) | {{description}} | {{action}} |
+| Heading scale | {{sizes}} | text-lg to text-4xl | {{description}} | {{action}} |
+| Weight 400 | {{usage}} | font-normal (body) | {{description}} | {{action}} |
+| Weight 500 | {{usage}} | font-medium (labels) | {{description}} | {{action}} |
+| Weight 600 | {{usage}} | font-semibold (titles) | {{description}} | {{action}} |
+| Weight 700 | {{usage}} | font-bold (emphasis) | {{description}} | {{action}} |
+| Line-height | {{value}} | Tailwind defaults | {{description}} | {{action}} |
+| Letter-spacing | {{value}} | None (default) | {{description}} | {{action}} |
+
+**Google Font to install**: {{font-name or "none needed"}}
+
+### Axis 4: Icons & Graphics (Score: {{X}}/5)
+
+| Property | Benchmark Value | Current Value | Gap | Action |
+|----------|----------------|-------------|-----|--------|
+| Icon library | {{library}} | lucide-react | {{description}} | {{action}} |
+| Default icon size | {{size}} | size-4 (16px) | {{description}} | {{action}} |
+| Icon style | {{stroke/fill}} | Stroke (Lucide) | {{description}} | {{action}} |
+| Stroke width | {{value}} | 2 (Lucide default) | {{description}} | {{action}} |
+| Icon color | {{approach}} | Inherits currentColor | {{description}} | {{action}} |
+| Illustrations | {{yes/no, style}} | None (icons only) | {{description}} | {{action}} |
+| Decorative elements | {{details}} | Minimal | {{description}} | {{action}} |
+
+**Icon mapping table** (benchmark icon -> Lucide equivalent):
+| Benchmark Icon | Lucide Equivalent | Notes |
+|----------------|-------------------|-------|
+| {{icon_name}} | {{lucide_name}} | {{notes}} |
+
+### Axis 5: Spacing (Score: {{X}}/5)
+
+| Context | Benchmark Value | Current Value | On 4px Grid? | Action |
+|---------|----------------|-------------|-------------|--------|
+| Page padding | {{value}} | p-6 (24px) | {{yes/no}} | {{action}} |
+| Card header padding | {{value}} | px-4 pt-4 | {{yes/no}} | {{action}} |
+| Card content padding | {{value}} | px-4 pb-4 | {{yes/no}} | {{action}} |
+| Section gap | {{value}} | gap-4 (16px) | {{yes/no}} | {{action}} |
+| Internal element gap | {{value}} | gap-2 (8px) | {{yes/no}} | {{action}} |
+| Button padding | {{value}} | px-4 py-2 (h-9) | {{yes/no}} | {{action}} |
+| Input padding | {{value}} | px-3 py-1 (h-9) | {{yes/no}} | {{action}} |
+| Icon-text gap | {{value}} | gap-2 (8px) | {{yes/no}} | {{action}} |
+
+**Off-grid values found**: {{list of values not on 4px grid}}
+
+### Axis 6: Components (Score: {{X}}/5)
+
+| Component | Benchmark Styling | Current Styling | Differences | Action |
+|-----------|------------------|---------------|-------------|--------|
+| Card | {{radius, shadow, border, bg}} | rounded-lg, shadow-sm, border, bg-card | {{list}} | {{action}} |
+| Button (primary) | {{radius, height, shadow, bg}} | rounded-md, h-9, shadow-md shadow-primary/20, bg-primary | {{list}} | {{action}} |
+| Button (secondary) | {{styling}} | bg-secondary text-secondary-foreground | {{list}} | {{action}} |
+| Button (ghost) | {{styling}} | hover:bg-accent | {{list}} | {{action}} |
+| Input | {{radius, height, border, shadow}} | rounded-md, h-9, border-input, shadow-sm | {{list}} | {{action}} |
+| Badge | {{radius, padding, size}} | rounded-full, px-2 py-0.5, text-xs | {{list}} | {{action}} |
+| Dialog | {{radius, shadow, max-width}} | rounded-lg, shadow-lg, max-w-lg | {{list}} | {{action}} |
+| Table | {{border, padding, hover}} | border-b rows, h-10 head, hover:bg-muted/50 | {{list}} | {{action}} |
+| Navigation | {{pattern}} | Sidebar component (16rem fixed) | {{list}} | {{action}} |
+
+### Axis 7: Interaction (Score: {{X}}/5)
+
+| Interaction | Benchmark Pattern | Current Pattern | Gap | Action |
+|-------------|------------------|---------------|-----|--------|
+| Hover (button) | {{effect}} | bg-primary/90 | {{description}} | {{action}} |
+| Hover (card) | {{effect}} | None (default Card) | {{description}} | {{action}} |
+| Hover (table row) | {{effect}} | bg-muted/50 | {{description}} | {{action}} |
+| Focus ring | {{style}} | ring-ring/50 ring-[3px] | {{description}} | {{action}} |
+| Transition duration | {{ms}} | 200ms | {{description}} | {{action}} |
+| Transition easing | {{function}} | ease (default) | {{description}} | {{action}} |
+| Dialog enter | {{animation}} | zoom-in-95 + fade-in-0 | {{description}} | {{action}} |
+| Dialog exit | {{animation}} | zoom-out-95 + fade-out-0 | {{description}} | {{action}} |
+| Page transitions | {{yes/no, type}} | None | {{description}} | {{action}} |
+| Animation library | {{library}} | tw-animate-css only (A1) | {{description}} | {{action}} |
+| Reduced motion | {{support}} | @media prefers-reduced-motion | {{description}} | {{action}} |
+
+---
+
+## Score Summary
+
+| Axis | Score | Weight | Weighted |
+|------|-------|--------|----------|
+| 1. Layout | {{X}}/5 | 1.0 | {{X}} |
+| 2. Color | {{X}}/5 | 1.0 | {{X}} |
+| 3. Typography | {{X}}/5 | 1.0 | {{X}} |
+| 4. Icons & Graphics | {{X}}/5 | 1.0 | {{X}} |
+| 5. Spacing | {{X}}/5 | 1.0 | {{X}} |
+| 6. Components | {{X}}/5 | 1.0 | {{X}} |
+| 7. Interaction | {{X}}/5 | 1.0 | {{X}} |
+| **Overall** | | | **{{X.X}}/5.0** |
+
+---
+
+## Design Token Mapping
+
+Complete mapping from benchmark tokens to project CSS custom properties.
+
+| Benchmark Token | Benchmark Value | Project Token | Current Value | Override Value | Notes |
+|----------------|----------------|-------------|-------------|----------------|-------|
+| {{token_name}} | {{value}} | {{--project-token}} | {{current_value}} | {{new_value or "KEEP"}} | {{notes}} |
+
+---
+
+## Conflicts with Existing Design Rules
+
+| Rule ID | Rule Description | Conflict | Proposed Resolution |
+|---------|-----------------|----------|-------------------|
+| {{C1-C5}} | {{rule text}} | {{what the benchmark does differently}} | {{KEEP project rule / ADOPT benchmark / EXCEPTION for X}} |
+| {{T1-T4}} | {{rule text}} | {{conflict}} | {{resolution}} |
+| {{S1-S3}} | {{rule text}} | {{conflict}} | {{resolution}} |
+| {{R1-R4}} | {{rule text}} | {{conflict}} | {{resolution}} |
+| {{SH1-SH4}} | {{rule text}} | {{conflict}} | {{resolution}} |
+| {{A1-A3}} | {{rule text}} | {{conflict}} | {{resolution}} |
+| {{CP1-CP6}} | {{rule text}} | {{conflict}} | {{resolution}} |
+| {{AC1-AC4}} | {{rule text}} | {{conflict}} | {{resolution}} |
+
+---
+
+## Migration Plan Summary
+
+| Phase | Scope | Risk | Effort | Impact |
+|-------|-------|------|--------|--------|
+| 1. Token Swap | Override CSS custom properties in `:root` | Low | 1-2 hours | Color + typography alignment |
+| 2. Component Override | CVA variant additions or CSS overrides | Medium | 4-8 hours | Button/Card/Input visual parity |
+| 3. Layout Adaptation | Grid/flex restructuring if needed | High | 8-16 hours | Structural alignment |
+| 4. Icon Migration | Icon library swap or mapping | Low-Medium | 2-4 hours | Visual consistency |
+| 5. Interaction Polish | Transition/animation adjustments | Low | 1-2 hours | Feel alignment |
+
+**Total estimated effort**: {{X-Y hours}}
+**Recommended priority**: Phase {{N}} first (highest impact/lowest risk)
+
+---
+
+## Generated Artifacts
+
+| Artifact | Path | Description |
+|----------|------|-------------|
+| Token override CSS | `./output/{{slug}}-tokens.css` | CSS custom property overrides for `:root` |
+| Component overrides | `./output/{{slug}}-components.css` | Tailwind `@layer components` overrides |
+| Color palette | `./output/{{slug}}-palette.json` | Extracted OKLCH color palette |
+| Typography scale | `./output/{{slug}}-typography.json` | Font family, sizes, weights mapping |
+| Spacing map | `./output/{{slug}}-spacing.json` | Spacing values mapped to Tailwind scale |
+| Icon mapping | `./output/{{slug}}-icons.json` | Benchmark icon -> Lucide icon mapping |
+| Screenshot archive | `./output/screenshots/` | All captured screenshots |
+
+---
+
+## Appendix: Raw Extracted Styles
+
+<details>
+<summary>Click to expand raw CSS extraction</summary>
+
+```css
+/* Paste full extracted CSS here for reference */
+{{raw_css}}
+```
+
+</details>
+
+---
+
+*Generated by UI Mirror Skill on {{YYYY-MM-DD HH:mm}} KST*
+```