ui-mirror-skill 1.0.0

package/README.md

@@ -0,0 +1,95 @@
+# ui-mirror-skill
+
+Claude Code skill for benchmarking website UI analysis and design token extraction.
+
+Capture screenshots and extract design tokens (colors, typography, spacing, border-radius, shadows, components, layout) from any website, then compare against your project's UI across **7 analysis axes**. Generates CSS token overrides, component snippets, and a prioritized migration plan.
+
+## Install
+
+```bash
+npx ui-mirror-skill
+```
+
+This installs the skill to `~/.agents/skills/ui-mirror/` (global).
+
+### Options
+
+```bash
+npx ui-mirror-skill --local      # Project-level: .claude/skills/ui-mirror/
+npx ui-mirror-skill --both       # Both global and project-level
+npx ui-mirror-skill --uninstall  # Remove installed files
+```
+
+## Usage in Claude Code
+
+```
+/ui-mirror https://example.com
+/mirror https://example.com
+```
+
+Or natural language:
+- "이 사이트처럼 만들어줘"
+- "Benchmark this site's design"
+- "이 디자인 따라해줘"
+
+## What it does
+
+1. **Capture** — Screenshots + computed CSS extraction from benchmark site
+2. **Extract** — Normalize design tokens (colors → OKLCH, spacing → Tailwind scale)
+3. **Compare** — 7-axis analysis (Color, Typography, Spacing, Radius, Shadows, Components, Motion)
+4. **Generate** — CSS overrides, component TSX snippets, SVG radar chart, migration plan
+
+### Output
+
+```
+docs/ui-mirror/{name}/
+├── analysis.md           # 7-axis comparison report
+├── tokens-override.css   # CSS custom property overrides
+├── migration-plan.md     # Prioritized migration plan
+├── radar-chart.svg       # Visual score chart
+├── components/           # Mirror component TSX snippets
+├── screenshots/          # Captured screenshots
+└── raw/                  # Raw JSON data
+```
+
+## Requirements
+
+- **Python 3.10+** — for token extraction and comparison scripts
+- **One screenshot tool** (in priority order):
+  1. `agent-browser` (recommended)
+  2. Chrome DevTools MCP
+  3. Jina MCP
+
+## 7-Axis Analysis
+
+| Axis | What it compares |
+|------|-----------------|
+| Color | Palette, OKLCH tokens, semantic roles, gradients |
+| Typography | Font families, size scale, weights, line-height |
+| Spacing | Padding, margin, gap patterns (4px grid alignment) |
+| Radius | Border-radius scale, component differentiation |
+| Shadows | Shadow layers, elevation hierarchy |
+| Components | Button, Card, Input, Nav, Table, Dialog, Badge styling |
+| Motion | Transitions, hover states, animations, focus indicators |
+
+Each axis is scored 1-5 with a detailed rubric.
+
+## Design System Awareness
+
+The skill auto-detects your project's design system documentation (`FRONTEND_CONSISTENCY.md`, `DESIGN_SYSTEM.md`, etc.) and flags conflicts between benchmark styles and your existing rules. Every proposed change includes conflict resolution proposals.
+
+## Python Scripts
+
+All scripts use Python 3 standard library only (no pip dependencies):
+
+| Script | Purpose |
+|--------|---------|
+| `extract_design_tokens.py` | Parse computed styles → normalized OKLCH tokens |
+| `compare_tokens.py` | Structured diff with delta-E color distance |
+| `generate_migration.py` | Token diff → prioritized migration plan |
+| `generate_radar_chart.py` | SVG/Mermaid radar chart for 7-axis scores |
+| `download_screenshot.py` | URL/base64 screenshot downloader |
+
+## License
+
+MIT

package/bin/cli.mjs

@@ -0,0 +1,121 @@
+#!/usr/bin/env node
+
+/**
+ * ui-mirror-skill installer
+ *
+ * Installs the ui-mirror skill for Claude Code.
+ *
+ * Usage:
+ *   npx ui-mirror-skill              # Install globally to ~/.agents/skills/
+ *   npx ui-mirror-skill --local      # Install to ./.claude/skills/ (project-level)
+ *   npx ui-mirror-skill --both       # Install both global and local
+ *   npx ui-mirror-skill --uninstall  # Remove installed skill files
+ */
+
+import { cpSync, existsSync, mkdirSync, rmSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { homedir } from "node:os";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const SKILL_SRC = join(__dirname, "..", "skill");
+
+const GLOBAL_TARGET = join(homedir(), ".agents", "skills", "ui-mirror");
+const LOCAL_TARGET = join(process.cwd(), ".claude", "skills", "ui-mirror");
+
+const args = process.argv.slice(2);
+const isLocal = args.includes("--local");
+const isBoth = args.includes("--both");
+const isUninstall = args.includes("--uninstall");
+const isHelp = args.includes("--help") || args.includes("-h");
+
+if (isHelp) {
+  console.log(`
+ui-mirror-skill — Claude Code UI benchmarking skill installer
+
+Usage:
+  npx ui-mirror-skill              Install globally (~/.agents/skills/ui-mirror/)
+  npx ui-mirror-skill --local      Install to project (.claude/skills/ui-mirror/)
+  npx ui-mirror-skill --both       Install both global and project-level
+  npx ui-mirror-skill --uninstall  Remove installed skill files
+  npx ui-mirror-skill --help       Show this help
+
+What it does:
+  Copies SKILL.md, reference docs, and Python scripts to the target directory.
+  Claude Code will auto-detect the skill from .claude/skills/ or ~/.agents/skills/.
+
+Requirements:
+  - Python 3.10+ (for token extraction/comparison scripts)
+  - One of: agent-browser, Chrome DevTools MCP, or Jina MCP (for screenshots)
+`);
+  process.exit(0);
+}
+
+function install(target, label) {
+  if (existsSync(target)) {
+    console.log(`  Updating existing installation at ${target}`);
+    rmSync(target, { recursive: true });
+  }
+
+  mkdirSync(target, { recursive: true });
+  cpSync(SKILL_SRC, target, { recursive: true });
+  console.log(`  ✓ Installed to ${target}`);
+}
+
+function uninstall(target, label) {
+  if (existsSync(target)) {
+    rmSync(target, { recursive: true });
+    console.log(`  ✓ Removed ${label}: ${target}`);
+  } else {
+    console.log(`  - ${label} not found: ${target}`);
+  }
+}
+
+console.log("");
+console.log("┌─────────────────────────────────────┐");
+console.log("│  ui-mirror-skill installer           │");
+console.log("└─────────────────────────────────────┘");
+console.log("");
+
+if (isUninstall) {
+  console.log("Uninstalling ui-mirror skill...");
+  uninstall(GLOBAL_TARGET, "Global");
+  uninstall(LOCAL_TARGET, "Local");
+  console.log("");
+  console.log("Done.");
+  process.exit(0);
+}
+
+const targets = [];
+if (isBoth) {
+  targets.push([GLOBAL_TARGET, "Global"]);
+  targets.push([LOCAL_TARGET, "Local"]);
+} else if (isLocal) {
+  targets.push([LOCAL_TARGET, "Local"]);
+} else {
+  targets.push([GLOBAL_TARGET, "Global"]);
+}
+
+console.log("Installing ui-mirror skill...");
+console.log("");
+
+for (const [target, label] of targets) {
+  install(target, label);
+}
+
+console.log("");
+console.log("── Setup complete ──");
+console.log("");
+console.log("Trigger in Claude Code:");
+console.log("  /ui-mirror <url>         Analyze a website's design");
+console.log("  /mirror <url>            Short alias");
+console.log('  "이 사이트처럼 만들어줘"  Natural language trigger');
+console.log("");
+console.log("The skill will:");
+console.log("  1. Capture screenshots & extract design tokens");
+console.log("  2. Compare against your project's UI (7-axis analysis)");
+console.log("  3. Generate CSS overrides + component snippets + migration plan");
+console.log("");
+console.log("Output: docs/ui-mirror/{name}/");
+console.log("");

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "ui-mirror-skill",
+  "version": "1.0.0",
+  "description": "Claude Code skill for benchmarking website UI analysis and design token extraction with 7-axis comparison",
+  "keywords": [
+    "claude-code",
+    "skill",
+    "ui-mirror",
+    "design-tokens",
+    "benchmark",
+    "ui-analysis",
+    "shadcn-ui",
+    "tailwind",
+    "oklch"
+  ],
+  "author": "mulkib",
+  "license": "MIT",
+  "bin": {
+    "ui-mirror-skill": "bin/cli.mjs"
+  },
+  "files": [
+    "bin/",
+    "skill/",
+    "README.md"
+  ],
+  "type": "module",
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mulkib/ui-mirror-skill.git"
+  }
+}