{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "skill-assessment-radar",
  "title": "Skill Assessment Radar",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/skill-assessment-radar/SkillAssessmentRadar.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport {\n  Award,\n  CheckCircle2,\n  Code2,\n  Compass,\n  Eye,\n  FileDown,\n  GraduationCap,\n  Layers,\n  Play,\n  Share2,\n  ShieldCheck,\n  Target,\n  TrendingUp,\n  Zap,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\ninterface Props {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<Props>()\n\ninterface DomainBenchmark {\n  id: string\n  title: string\n  score: number\n  percentile: string\n  percentileLabel: string\n  benchmarkScore: number\n  delta: string\n  description: string\n  icon: typeof Layers\n  accentColor: string\n}\n\ninterface CompetencyMetric {\n  id: string\n  name: string\n  description: string\n  userScore: number\n  benchmarkScore: number\n  masteryLevel: 'Expert' | 'Advanced' | 'Proficient'\n  masteryVariant: 'success' | 'default' | 'secondary'\n  deltaLabel: string\n  percentile: string\n}\n\ninterface LearningCourse {\n  id: string\n  gapTarget: string\n  currentScore: string\n  targetScore: string\n  title: string\n  provider: string\n  duration: string\n  priority: 'High' | 'Medium' | 'Refinement'\n  priorityVariant: 'warning' | 'default' | 'secondary'\n  syllabus: string[]\n  buttonText: string\n}\n\ninterface RadarAxis {\n  label: string\n  shortLabel: string\n  userScore: number\n  benchmarkScore: number\n}\n\nconst domainBenchmarks: DomainBenchmark[] = [\n  {\n    id: 'frontend-architecture',\n    title: 'Frontend Architecture',\n    score: 92,\n    percentile: 'Top 5% percentile',\n    percentileLabel: '95th Percentile',\n    benchmarkScore: 74,\n    delta: '+18% vs Benchmark',\n    description: 'Component decoupling, polymorphic primitives, headless state machines, and micro-frontend isolation.',\n    icon: Layers,\n    accentColor: 'text-success',\n  },\n  {\n    id: 'typescript-typing',\n    title: 'TypeScript & Typing',\n    score: 88,\n    percentile: 'Top 8% percentile',\n    percentileLabel: '92nd Percentile',\n    benchmarkScore: 68,\n    delta: '+20% vs Benchmark',\n    description:\n      'Advanced mapped types, conditional generics, discriminated unions, and compile-time contract enforcement.',\n    icon: Code2,\n    accentColor: 'text-info',\n  },\n  {\n    id: 'accessibility-wcag',\n    title: 'Web Accessibility & WCAG',\n    score: 95,\n    percentile: 'Top 2% percentile',\n    percentileLabel: '98th Percentile',\n    benchmarkScore: 61,\n    delta: '+34% vs Benchmark',\n    description: 'WCAG 2.2 AAA compliance, keyboard focus rings, ARIA live regions, and screen reader UX verification.',\n    icon: Eye,\n    accentColor: 'text-chart-1',\n  },\n  {\n    id: 'performance-vitals',\n    title: 'Performance & Core Web Vitals',\n    score: 82,\n    percentile: 'Top 14% percentile',\n    percentileLabel: '86th Percentile',\n    benchmarkScore: 65,\n    delta: '+17% vs Benchmark',\n    description: 'Sub-50ms INP optimization, bundle treeshaking, zero-layout-shift rendering, and island hydration.',\n    icon: Zap,\n    accentColor: 'text-warning',\n  },\n]\n\nconst competencyBreakdown: CompetencyMetric[] = [\n  {\n    id: 'reka-primitives',\n    name: 'Polymorphic Reka Primitives',\n    description: 'Polymorphic asChild composition, headless accessibility, slot delegation, and forwardRef contracts.',\n    userScore: 94,\n    benchmarkScore: 70,\n    masteryLevel: 'Expert',\n    masteryVariant: 'success',\n    deltaLabel: '+24% Lead',\n    percentile: '96th percentile',\n  },\n  {\n    id: 'oklch-tokens',\n    name: 'OKLCH Token Systems',\n    description: 'Perceptually uniform color spaces, light/dark contrast mapping, and dynamic theme token cascades.',\n    userScore: 96,\n    benchmarkScore: 64,\n    masteryLevel: 'Expert',\n    masteryVariant: 'success',\n    deltaLabel: '+32% Lead',\n    percentile: '99th percentile',\n  },\n  {\n    id: 'ssr-hydration',\n    name: 'SSR & Hydration Safety',\n    description: 'Isomorphic DOM execution, hydration mismatch prevention, and cookie-aware theme providers.',\n    userScore: 86,\n    benchmarkScore: 68,\n    masteryLevel: 'Advanced',\n    masteryVariant: 'default',\n    deltaLabel: '+18% Lead',\n    percentile: '88th percentile',\n  },\n  {\n    id: 'headless-state',\n    name: 'Headless State Machines',\n    description: 'Deterministic state transitions, keyboard navigation focus rings, and roving tabindex traps.',\n    userScore: 90,\n    benchmarkScore: 62,\n    masteryLevel: 'Expert',\n    masteryVariant: 'success',\n    deltaLabel: '+28% Lead',\n    percentile: '93rd percentile',\n  },\n  {\n    id: 'design-governance',\n    name: 'Design System Governance',\n    description:\n      'Component deprecation lifecycles, semantic token versioning, and zero-dependency registry boundaries.',\n    userScore: 88,\n    benchmarkScore: 72,\n    masteryLevel: 'Advanced',\n    masteryVariant: 'default',\n    deltaLabel: '+16% Lead',\n    percentile: '91st percentile',\n  },\n  {\n    id: 'micro-frontends',\n    name: 'Micro-Frontend Routing',\n    description: 'Module federation, dynamic remote isolation, and zero-downtime micro-app orchestration.',\n    userScore: 78,\n    benchmarkScore: 66,\n    masteryLevel: 'Proficient',\n    masteryVariant: 'secondary',\n    deltaLabel: '+12% Lead',\n    percentile: '79th percentile',\n  },\n]\n\nconst radarAxes: RadarAxis[] = [\n  { label: 'Frontend Architecture', shortLabel: 'Architecture', userScore: 92, benchmarkScore: 74 },\n  { label: 'TypeScript & Typing', shortLabel: 'TypeScript', userScore: 88, benchmarkScore: 68 },\n  { label: 'Web Accessibility & WCAG', shortLabel: 'Accessibility', userScore: 95, benchmarkScore: 61 },\n  { label: 'Performance & Vitals', shortLabel: 'Performance', userScore: 82, benchmarkScore: 65 },\n  { label: 'Headless State Machines', shortLabel: 'State Machines', userScore: 90, benchmarkScore: 62 },\n  { label: 'Design System Governance', shortLabel: 'Governance', userScore: 88, benchmarkScore: 72 },\n]\n\nconst learningCourses: LearningCourse[] = [\n  {\n    id: 'course-1',\n    gapTarget: 'Micro-Frontend Routing',\n    currentScore: '78%',\n    targetScore: '95%',\n    title: 'Enterprise Module Federation & Micro-App Orchestration',\n    provider: 'UIPKGE Systems Architecture Guild',\n    duration: '4.5 Hours · 6 Deep-Dive Labs',\n    priority: 'High',\n    priorityVariant: 'warning',\n    syllabus: [\n      'Bidirectional dependency sharing & version collision isolation',\n      'Cross-micro-app state synchronization without global window leakage',\n      'Canary deployment pipelines with zero-downtime remote rollbacks',\n    ],\n    buttonText: 'Enroll Pathway',\n  },\n  {\n    id: 'course-2',\n    gapTarget: 'Performance & Core Web Vitals',\n    currentScore: '82%',\n    targetScore: '96%',\n    title: 'Sub-50ms Interaction to Next Paint (INP) & Chrome Profiling',\n    provider: 'Web Performance & Engine Guild',\n    duration: '3.0 Hours · 4 Profile Traces',\n    priority: 'Medium',\n    priorityVariant: 'default',\n    syllabus: [\n      'Main-thread cooperative yielding using scheduler.yield() primitives',\n      'Compositor layer diagnostics & forced synchronous layout avoidance',\n      'Fine-grained virtualized rendering and selective component reconciliation',\n    ],\n    buttonText: 'Start Module',\n  },\n  {\n    id: 'course-3',\n    gapTarget: 'SSR & Hydration Safety',\n    currentScore: '86%',\n    targetScore: '98%',\n    title: 'Isomorphic State Engines & Streaming SSR Mechanics',\n    provider: 'Modern Frontend Systems Lab',\n    duration: '5.0 Hours · 8 Architecture Blueprints',\n    priority: 'Refinement',\n    priorityVariant: 'secondary',\n    syllabus: [\n      'Zero-mismatch server state serialization & client reconciliation',\n      'Streaming HTML chunking & out-of-order Suspense boundaries',\n      'Edge worker execution models and cookie-aware cache sharding',\n    ],\n    buttonText: 'Explore Syllabus',\n  },\n]\n\n// Radar chart SVG geometry calculations\nconst radarCenter = { x: 180, y: 160 }\nconst radarRadius = 105\nconst totalAxes = radarAxes.length\n\nfunction getPolygonPoint(index: number, score: number, maxScore = 100) {\n  const angle = -Math.PI / 2 + (index * 2 * Math.PI) / totalAxes\n  const ratio = Math.min(1, Math.max(0, score / maxScore))\n  const r = radarRadius * ratio\n  const x = radarCenter.x + r * Math.cos(angle)\n  const y = radarCenter.y + r * Math.sin(angle)\n  return { x, y }\n}\n\nfunction getPolygonPointsString(scores: number[]) {\n  return scores\n    .map((score, index) => {\n      const pt = getPolygonPoint(index, score)\n      return `${pt.x.toFixed(1)},${pt.y.toFixed(1)}`\n    })\n    .join(' ')\n}\n\nfunction getRingPolygonString(ringRatio: number) {\n  return radarAxes\n    .map((_, index) => {\n      const pt = getPolygonPoint(index, ringRatio * 100)\n      return `${pt.x.toFixed(1)},${pt.y.toFixed(1)}`\n    })\n    .join(' ')\n}\n\nconst candidateScores = radarAxes.map((a) => a.userScore)\nconst benchmarkScores = radarAxes.map((a) => a.benchmarkScore)\n\nconst candidatePolygon = getPolygonPointsString(candidateScores)\nconst benchmarkPolygon = getPolygonPointsString(benchmarkScores)\n\nconst gridRings = [0.2, 0.4, 0.6, 0.8, 1.0]\n\nconst axisLabels = [\n  { index: 0, x: 180, y: 32, anchor: 'middle' },\n  { index: 1, x: 286, y: 104, anchor: 'start' },\n  { index: 2, x: 286, y: 224, anchor: 'start' },\n  { index: 3, x: 180, y: 294, anchor: 'middle' },\n  { index: 4, x: 74, y: 224, anchor: 'end' },\n  { index: 5, x: 74, y: 104, anchor: 'end' },\n]\n</script>\n\n<template>\n  <div data-slot=\"skill-assessment-radar\" :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- Header: Profile Summary, Assessment Date, Overall Score & PDF Download -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardContent class=\"p-6\">\n        <div class=\"flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between\">\n          <!-- Candidate Identity & Proctor Info -->\n          <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center\">\n            <Avatar class=\"border-border size-16 shrink-0 border sm:size-20\">\n              <AvatarImage\n                src=\"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=200&auto=format&fit=crop&q=80\"\n                alt=\"Elena Rostova\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <div class=\"space-y-1.5\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <h2 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">Elena Rostova</h2>\n                <Badge variant=\"secondary\" class=\"font-medium\">Senior Frontend Engineer</Badge>\n              </div>\n              <p class=\"text-muted-foreground text-sm\">\n                Platform Architecture · Design Systems & Headless UI Specialization\n              </p>\n              <div class=\"flex flex-wrap items-center gap-3 pt-1\">\n                <Badge variant=\"outline\" class=\"gap-1.5 text-xs font-normal\">\n                  <ShieldCheck class=\"text-success size-3.5\" />\n                  Verified on Aug 21, 2026\n                </Badge>\n                <Separator orientation=\"vertical\" class=\"hidden h-3.5 sm:block\" />\n                <span class=\"text-muted-foreground text-xs\">\n                  Proctored Evaluation ID:\n                  <strong class=\"text-foreground font-medium tabular-nums\">#UIP-8849-FE</strong>\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Overall Proficiency Badge & PDF Download -->\n          <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center lg:flex-col lg:items-end\">\n            <div class=\"flex flex-col items-start gap-1 lg:items-end\">\n              <Badge variant=\"success\" class=\"gap-1.5 px-3.5 py-1.5 text-sm font-semibold shadow-xs\">\n                <Award class=\"text-success size-4 shrink-0\" />\n                <span>Level 4 - Expert · 88 / 100</span>\n              </Badge>\n              <span class=\"text-muted-foreground text-xs font-medium\">\n                Top 4% Global Engineering Percentile (n = 14,820)\n              </span>\n            </div>\n\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Button aria-label=\"Download attachment\" variant=\"outline\" size=\"sm\" class=\"gap-2 shadow-xs\">\n                <FileDown class=\"size-4\" />\n                <span>Download Skill Transcript PDF</span>\n              </Button>\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                class=\"text-muted-foreground hover:text-foreground size-8\"\n                aria-label=\"Share skill transcript verification link\"\n              >\n                <Share2 class=\"size-4\" />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- 4 Domain Benchmark Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <Card\n        v-for=\"domain in domainBenchmarks\"\n        :key=\"domain.id\"\n        class=\"border-border bg-card flex flex-col justify-between shadow-xs\"\n      >\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <div class=\"flex min-w-0 items-center gap-2\">\n              <div\n                class=\"bg-muted border-border flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                aria-hidden=\"true\"\n              >\n                <component :is=\"domain.icon\" :class=\"cn('size-4', domain.accentColor)\" />\n              </div>\n              <CardTitle class=\"text-muted-foreground truncate text-xs font-medium\">{{ domain.title }}</CardTitle>\n            </div>\n            <Badge variant=\"success\" class=\"shrink-0 text-xs font-medium\">\n              {{ domain.percentile }}\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3 pt-1\">\n          <div>\n            <div class=\"mb-1.5 flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n              <div class=\"flex items-baseline gap-1.5\">\n                <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums sm:text-3xl\">\n                  {{ domain.score }}%\n                </span>\n                <span class=\"text-muted-foreground text-xs font-normal\">Proficiency</span>\n              </div>\n              <div class=\"text-success flex items-center gap-1 text-xs font-medium\">\n                <TrendingUp class=\"size-3\" />\n                <span class=\"tabular-nums\">{{ domain.delta }}</span>\n              </div>\n            </div>\n            <Progress :model-value=\"domain.score\" class=\"h-1.5 w-full\" />\n          </div>\n\n          <div class=\"border-border/60 border-t pt-2.5 text-xs\">\n            <div class=\"text-muted-foreground flex items-center justify-between gap-x-2\">\n              <span>Senior Cohort Benchmark:</span>\n              <span class=\"text-foreground font-semibold tabular-nums\">{{ domain.benchmarkScore }}%</span>\n            </div>\n            <p class=\"text-muted-foreground mt-1 line-clamp-2 text-xs leading-relaxed\">{{ domain.description }}</p>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Skill Radar Chart & Telemetry Synthesis Strip -->\n    <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-12\">\n      <!-- Radar Spider Graphic Card (7 Cols) -->\n      <Card class=\"border-border bg-card shadow-xs lg:col-span-7\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between\">\n            <div>\n              <CardTitle class=\"text-base font-semibold\">Proficiency Radar Telemetry</CardTitle>\n              <CardDescription class=\"text-xs\">\n                Multi-axis radial polygon comparing candidate proficiency against senior baseline across 6 dimensions.\n              </CardDescription>\n            </div>\n            <Badge variant=\"outline\" class=\"w-fit gap-1 text-xs font-normal\">\n              <Compass class=\"text-primary size-3\" />\n              <span>6 Axis Calibration</span>\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"pt-2\">\n          <!-- SVG Spider Radar Chart -->\n          <div class=\"relative flex w-full items-center justify-center overflow-hidden py-2\">\n            <svg\n              class=\"h-72 w-full max-w-md overflow-visible sm:h-80\"\n              viewBox=\"0 0 360 320\"\n              aria-label=\"Radar chart showing candidate scores vs industry benchmark across 6 competencies\"\n            >\n              <defs>\n                <!-- Candidate Gradient Fill -->\n                <radialGradient id=\"candidate-grad-vue\" cx=\"50%\" cy=\"50%\" r=\"50%\">\n                  <stop offset=\"0%\" stop-color=\"var(--color-emerald-500, #10b981)\" stop-opacity=\"0.35\" />\n                  <stop offset=\"100%\" stop-color=\"var(--color-emerald-500, #10b981)\" stop-opacity=\"0.10\" />\n                </radialGradient>\n              </defs>\n\n              <!-- Concentric Background Grid Rings -->\n              <polygon\n                v-for=\"ring in gridRings\"\n                :key=\"ring\"\n                :points=\"getRingPolygonString(ring)\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                class=\"text-border/60\"\n                :stroke-width=\"ring === 1.0 ? '1.5' : '1'\"\n                :stroke-dasharray=\"ring === 1.0 ? 'none' : '3 3'\"\n              />\n\n              <!-- Radial Spoke Lines -->\n              <line\n                v-for=\"(_, index) in radarAxes\"\n                :key=\"`spoke-${index}`\"\n                :x1=\"radarCenter.x\"\n                :y1=\"radarCenter.y\"\n                :x2=\"getPolygonPoint(index, 100).x\"\n                :y2=\"getPolygonPoint(index, 100).y\"\n                stroke=\"currentColor\"\n                class=\"text-border/60\"\n                stroke-width=\"1\"\n              />\n\n              <!-- Ring Percentage Label (Vertical Center Axis) -->\n              <text\n                v-for=\"ring in [0.4, 0.8]\"\n                :key=\"`ring-text-${ring}`\"\n                :x=\"radarCenter.x + 4\"\n                :y=\"radarCenter.y - radarRadius * ring + 10\"\n                class=\"fill-muted-foreground text-xs tabular-nums\"\n              >\n                {{ ring * 100 }}%\n              </text>\n\n              <!-- Industry Benchmark Polygon (Dashed Gray) -->\n              <polygon\n                :points=\"benchmarkPolygon\"\n                fill=\"currentColor\"\n                class=\"text-muted-foreground/10\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-dasharray=\"4 4\"\n              />\n\n              <!-- Candidate Polygon (Emerald Filled) -->\n              <polygon\n                :points=\"candidatePolygon\"\n                fill=\"url(#candidate-grad-vue)\"\n                stroke=\"var(--color-emerald-500, #10b981)\"\n                stroke-width=\"2.5\"\n                stroke-linejoin=\"round\"\n              />\n\n              <!-- Candidate Vertex Marker Points -->\n              <circle\n                v-for=\"(score, index) in candidateScores\"\n                :key=\"`vertex-${index}`\"\n                :cx=\"getPolygonPoint(index, score).x\"\n                :cy=\"getPolygonPoint(index, score).y\"\n                r=\"3.5\"\n                class=\"stroke-background fill-success\"\n                stroke-width=\"1.5\"\n              />\n\n              <!-- Outer Axis Labels -->\n              <text\n                v-for=\"label in axisLabels\"\n                :key=\"`label-${label.index}`\"\n                :x=\"label.x\"\n                :y=\"label.y\"\n                :text-anchor=\"label.anchor\"\n                class=\"fill-foreground text-xs font-medium\"\n              >\n                {{ radarAxes[label.index].shortLabel }}\n                <tspan class=\"dark:fill-success fill-emerald-600 font-semibold tabular-nums\">\n                  ({{ radarAxes[label.index].userScore }}%)\n                </tspan>\n              </text>\n            </svg>\n          </div>\n\n          <!-- Radar Chart Legend -->\n          <div class=\"border-border/60 mt-3 flex flex-wrap items-center justify-center gap-6 border-t pt-3 text-xs\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <span class=\"bg-success size-3 rounded-full shadow-xs\" />\n              <span class=\"text-foreground font-medium\">Candidate Score: Elena Rostova (88.8% Avg)</span>\n            </div>\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <span class=\"border-muted-foreground/60 bg-muted size-3 rounded-full border border-dashed\" />\n              <span class=\"text-muted-foreground\">Industry Senior Cohort Baseline (67.0% Avg)</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Percentile & Assessment Calibration Summary (5 Cols) -->\n      <Card class=\"border-border bg-card flex flex-col justify-between shadow-xs lg:col-span-5\">\n        <CardHeader class=\"pb-3\">\n          <div class=\"flex items-center justify-between gap-x-2\">\n            <CardTitle class=\"text-base font-semibold\">Percentile & Calibration Report</CardTitle>\n            <Badge variant=\"outline\" class=\"gap-1 text-xs font-normal\">\n              <Award class=\"text-success size-3.5\" />\n              <span>Staff Ready</span>\n            </Badge>\n          </div>\n          <CardDescription class=\"text-xs\">\n            Synthesized assessment diagnostic based on 12 proctored test suites and coding scenarios.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-4\">\n          <!-- Summary Key Data Points -->\n          <div class=\"space-y-2.5\">\n            <div\n              class=\"bg-muted/40 border-border/80 flex items-center justify-between gap-x-2 rounded-lg border p-3 text-xs\"\n            >\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <Target class=\"text-primary size-4 shrink-0\" />\n                <span class=\"text-muted-foreground font-medium\">Highest Skill Domain:</span>\n              </div>\n              <span class=\"text-foreground font-semibold\">Web Accessibility (95%) · Top 2%</span>\n            </div>\n\n            <div\n              class=\"bg-muted/40 border-border/80 flex items-center justify-between gap-x-2 rounded-lg border p-3 text-xs\"\n            >\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <Compass class=\"text-warning size-4 shrink-0\" />\n                <span class=\"text-muted-foreground font-medium\">Primary Growth Delta:</span>\n              </div>\n              <span class=\"text-foreground font-semibold\">Micro-Frontends (78%) · Top 21%</span>\n            </div>\n\n            <div\n              class=\"bg-muted/40 border-border/80 flex items-center justify-between gap-x-2 rounded-lg border p-3 text-xs\"\n            >\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <ShieldCheck class=\"text-success size-4 shrink-0\" />\n                <span class=\"text-muted-foreground font-medium\">Proctor Verification Integrity:</span>\n              </div>\n              <span class=\"text-success text-success font-semibold tabular-nums\">99.4% Full Trust</span>\n            </div>\n          </div>\n\n          <!-- Percentile Distribution Meter -->\n          <div class=\"border-border/60 space-y-2 border-t pt-3\">\n            <div class=\"flex items-center justify-between gap-x-2 text-xs\">\n              <span class=\"text-muted-foreground font-medium\">Global Percentile Placement</span>\n              <span class=\"text-foreground font-bold tabular-nums\">96th Percentile</span>\n            </div>\n            <div class=\"bg-muted border-border/80 relative h-3 w-full overflow-hidden rounded-full border\">\n              <!-- Tier 1: Proficient (0-50%) -->\n              <div class=\"bg-muted-foreground/15 absolute inset-y-0 left-0 w-1/2\" />\n              <!-- Tier 2: Advanced (50-80%) -->\n              <div class=\"bg-info/20 absolute inset-y-0 left-1/2 w-[30%]\" />\n              <!-- Tier 3: Expert (80-100%) -->\n              <div class=\"bg-success/30 absolute inset-y-0 right-0 w-[20%]\" />\n              <!-- Marker for Elena (96%) -->\n              <div\n                class=\"bg-success ring-success/40 absolute top-1/2 size-2.5 -translate-y-1/2 rounded-full shadow-xs ring-2\"\n                style=\"left: 96%\"\n              />\n            </div>\n            <div class=\"text-muted-foreground flex items-center justify-between gap-x-2 text-xs tabular-nums\">\n              <span>50th (Mid)</span>\n              <span>80th (Senior)</span>\n              <span class=\"text-success font-bold\">96th (Elena)</span>\n              <span>99th (Staff)</span>\n            </div>\n          </div>\n\n          <!-- Assessment Transcript Metadata -->\n          <div class=\"bg-muted/30 border-border text-muted-foreground rounded-lg border p-3 text-xs leading-relaxed\">\n            Elena demonstrated outstanding mastery in accessibility tree construction, OKLCH theme token isolation, and\n            deterministic state management. Enrolling in the Micro-Frontend pathway will bridge remaining Staff-level\n            requirements.\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Competency Breakdown Multi-Bar Matrix -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"pb-4\">\n        <div class=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <CardTitle class=\"text-base font-semibold\">Competency Breakdown Multi-Bar Matrix</CardTitle>\n            <CardDescription class=\"text-xs\">\n              Direct comparison of candidate skill scores against industry senior baseline with mastery classifications.\n            </CardDescription>\n          </div>\n          <Badge variant=\"outline\" class=\"w-fit text-xs font-normal tabular-nums\">\n            6 Technical Competencies Evaluated\n          </Badge>\n        </div>\n      </CardHeader>\n      <CardContent class=\"space-y-4\">\n        <!-- Table for Desktop & Tablet, Structured Cards for Mobile -->\n        <div class=\"border-border overflow-hidden rounded-lg border\">\n          <div class=\"overflow-x-auto\">\n            <Table>\n              <TableHeader class=\"bg-muted/50\">\n                <TableRow>\n                  <TableHead class=\"text-xs\">Competency & Technical Scope</TableHead>\n                  <TableHead class=\"w-28 text-center text-xs\">Mastery Level</TableHead>\n                  <TableHead class=\"w-64 text-xs\">Candidate vs Industry Benchmark</TableHead>\n                  <TableHead class=\"w-28 text-right text-xs\">Score Delta</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow v-for=\"comp in competencyBreakdown\" :key=\"comp.id\">\n                  <!-- Competency Name & Scope -->\n                  <TableCell class=\"py-3.5\">\n                    <div class=\"space-y-0.5\">\n                      <p class=\"text-foreground text-sm font-semibold\">{{ comp.name }}</p>\n                      <p class=\"text-muted-foreground line-clamp-1 text-xs\">{{ comp.description }}</p>\n                    </div>\n                  </TableCell>\n\n                  <!-- Mastery Badge -->\n                  <TableCell class=\"py-3.5 text-center\">\n                    <Badge :variant=\"comp.masteryVariant\" class=\"text-xs font-medium\">\n                      {{ comp.masteryLevel }}\n                    </Badge>\n                  </TableCell>\n\n                  <!-- Dual Multi-Bar Progress -->\n                  <TableCell class=\"py-3.5\">\n                    <div class=\"space-y-1.5\">\n                      <!-- Candidate Bar -->\n                      <div class=\"space-y-1\">\n                        <div class=\"flex items-center justify-between gap-x-2 text-xs\">\n                          <span class=\"text-muted-foreground font-medium\">Elena:</span>\n                          <span class=\"text-foreground font-bold tabular-nums\">{{ comp.userScore }}%</span>\n                        </div>\n                        <Progress\n                          :model-value=\"comp.userScore\"\n                          class=\"[&_[data-slot=progress-indicator]]:bg-success h-1.5 w-full\"\n                        />\n                      </div>\n\n                      <!-- Industry Benchmark Bar -->\n                      <div class=\"space-y-1\">\n                        <div class=\"flex items-center justify-between gap-x-2 text-xs\">\n                          <span class=\"text-muted-foreground\">Benchmark:</span>\n                          <span class=\"text-muted-foreground font-medium tabular-nums\">{{ comp.benchmarkScore }}%</span>\n                        </div>\n                        <Progress\n                          :model-value=\"comp.benchmarkScore\"\n                          class=\"bg-muted-foreground/15 [&_[data-slot=progress-indicator]]:bg-muted-foreground/60 h-1 w-full\"\n                        />\n                      </div>\n                    </div>\n                  </TableCell>\n\n                  <!-- Delta Lead Badge -->\n                  <TableCell class=\"py-3.5 text-right\">\n                    <div class=\"flex flex-col items-end gap-0.5\">\n                      <Badge variant=\"outline\" class=\"text-success text-success font-semibold tabular-nums\">\n                        {{ comp.deltaLabel }}\n                      </Badge>\n                      <span class=\"text-muted-foreground text-xs tabular-nums\">{{ comp.percentile }}</span>\n                    </div>\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n            </Table>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Recommended Next Courses & Skill Gaps Card (3 targeted modules) -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"pb-4\">\n        <div class=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between\">\n          <div class=\"space-y-0.5\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <GraduationCap class=\"text-primary size-5\" />\n              <CardTitle class=\"text-base font-semibold\">\n                Recommended Next Courses & Personalized Learning Pathways\n              </CardTitle>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Targeted modules calibrated to close identified skill gaps and elevate proficiency into the Top 1% Staff\n              Master tier.\n            </CardDescription>\n          </div>\n          <Badge variant=\"secondary\" class=\"w-fit text-xs font-normal\"> 3 High-Impact Pathways </Badge>\n        </div>\n      </CardHeader>\n      <CardContent>\n        <div class=\"grid grid-cols-1 gap-4 lg:grid-cols-3\">\n          <div\n            v-for=\"course in learningCourses\"\n            :key=\"course.id\"\n            class=\"bg-muted/30 border-border hover:border-border/80 flex flex-col justify-between space-y-4 rounded-lg border p-4.5 transition-colors\"\n          >\n            <div class=\"space-y-3\">\n              <!-- Gap Identifier Strip -->\n              <div class=\"flex items-center justify-between gap-2\">\n                <Badge\n                  :variant=\"course.priorityVariant === 'warning' ? 'warning' : 'outline'\"\n                  class=\"text-xs font-normal\"\n                >\n                  Gap Target: {{ course.gapTarget }}\n                </Badge>\n                <span class=\"text-muted-foreground text-xs font-medium tabular-nums\">\n                  {{ course.currentScore }} → <strong class=\"text-foreground\">{{ course.targetScore }}</strong>\n                </span>\n              </div>\n\n              <!-- Course Title & Meta -->\n              <div class=\"space-y-1\">\n                <h3 class=\"text-foreground text-sm leading-snug font-semibold\">{{ course.title }}</h3>\n                <p class=\"text-muted-foreground text-xs\">{{ course.provider }} · {{ course.duration }}</p>\n              </div>\n\n              <Separator />\n\n              <!-- Actionable Syllabus Highlights -->\n              <div class=\"space-y-2\">\n                <span class=\"text-muted-foreground text-xs font-medium\">Core Learning Objectives:</span>\n                <ul class=\"text-muted-foreground space-y-1.5 text-xs\">\n                  <li v-for=\"(item, idx) in course.syllabus\" :key=\"idx\" class=\"flex items-start gap-1.5\">\n                    <CheckCircle2 class=\"text-primary mt-0.5 size-3.5 shrink-0\" />\n                    <span class=\"leading-relaxed\">{{ item }}</span>\n                  </li>\n                </ul>\n              </div>\n            </div>\n\n            <!-- Enrollment Action Button -->\n            <div class=\"border-border/60 border-t pt-3\">\n              <Button\n                :variant=\"course.priorityVariant === 'warning' ? 'default' : 'outline'\"\n                size=\"sm\"\n                class=\"w-full gap-2 shadow-xs\"\n              >\n                <Play class=\"size-3.5\" />\n                <span>{{ course.buttonText }}</span>\n              </Button>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/SkillAssessmentRadar.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/progress.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Developer skill proficiency scorecard and radar matrix: domain percentile rankings, dual candidate vs industry benchmark progress bars, competency breakdown, radar telemetry polygon, and personalized learning pathways.",
  "categories": [
    "hr",
    "dashboard",
    "education",
    "analytics",
    "app"
  ]
}