{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "skill-assessment-radar", "title": "Skill Assessment Radar", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/skill-assessment-radar/SkillAssessmentRadar.tsx", "content": "import * as React from 'react'\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-react'\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\nexport interface SkillAssessmentRadarProps extends React.HTMLAttributes {}\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: React.ComponentType<{ className?: string }>\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' as const },\n { index: 1, x: 286, y: 104, anchor: 'start' as const },\n { index: 2, x: 286, y: 224, anchor: 'start' as const },\n { index: 3, x: 180, y: 294, anchor: 'middle' as const },\n { index: 4, x: 74, y: 224, anchor: 'end' as const },\n { index: 5, x: 74, y: 104, anchor: 'end' as const },\n]\n\nexport function SkillAssessmentRadar({ className, ...props }: SkillAssessmentRadarProps) {\n return (\n
\n {/* Header: Profile Summary, Assessment Date, Overall Score & PDF Download */}\n \n \n
\n {/* Candidate Identity & Proctor Info */}\n
\n \n \n ER\n \n
\n
\n

Elena Rostova

\n \n Senior Frontend Engineer\n \n
\n

\n Platform Architecture · Design Systems & Headless UI Specialization\n

\n
\n \n \n Verified on Aug 21, 2026\n \n \n \n Proctored Evaluation ID:{' '}\n #UIP-8849-FE\n \n
\n
\n
\n\n {/* Overall Proficiency Badge & PDF Download */}\n
\n
\n \n \n Level 4 - Expert · 88 / 100\n \n \n Top 4% Global Engineering Percentile (n = 14,820)\n \n
\n\n
\n \n \n \n \n
\n
\n
\n \n \n\n {/* 4 Domain Benchmark Cards */}\n
\n {domainBenchmarks.map((domain) => {\n const Icon = domain.icon\n return (\n \n \n
\n
\n \n \n
\n {domain.title}\n
\n \n {domain.percentile}\n \n
\n \n \n
\n
\n
\n \n {domain.score}%\n \n Proficiency\n
\n
\n \n {domain.delta}\n
\n
\n \n
\n\n
\n
\n Senior Cohort Benchmark:\n {domain.benchmarkScore}%\n
\n

\n {domain.description}\n

\n
\n \n \n )\n })}\n
\n\n {/* Skill Radar Chart & Telemetry Synthesis Strip */}\n
\n {/* Radar Spider Graphic Card (7 Cols) */}\n \n \n
\n
\n Proficiency Radar Telemetry\n \n Multi-axis radial polygon comparing candidate proficiency against senior baseline across 6 dimensions.\n \n
\n \n \n 6 Axis Calibration\n \n
\n \n \n {/* SVG Spider Radar Chart */}\n
\n \n \n {/* Candidate Gradient Fill */}\n \n \n \n \n \n\n {/* Concentric Background Grid Rings */}\n {gridRings.map((ring) => (\n \n ))}\n\n {/* Radial Spoke Lines */}\n {radarAxes.map((_, index) => (\n \n ))}\n\n {/* Ring Percentage Label (Vertical Center Axis) */}\n {[0.4, 0.8].map((ring) => (\n \n {ring * 100}%\n \n ))}\n\n {/* Industry Benchmark Polygon (Dashed Gray) */}\n \n\n {/* Candidate Polygon (Emerald Filled) */}\n \n\n {/* Candidate Vertex Marker Points */}\n {candidateScores.map((score, index) => (\n \n ))}\n\n {/* Outer Axis Labels */}\n {axisLabels.map((label) => (\n \n {radarAxes[label.index].shortLabel}{' '}\n \n ({radarAxes[label.index].userScore}%)\n \n \n ))}\n \n
\n\n {/* Radar Chart Legend */}\n
\n
\n \n Candidate Score: Elena Rostova (88.8% Avg)\n
\n
\n \n Industry Senior Cohort Baseline (67.0% Avg)\n
\n
\n \n \n\n {/* Percentile & Assessment Calibration Summary (5 Cols) */}\n \n \n
\n Percentile & Calibration Report\n \n \n Staff Ready\n \n
\n \n Synthesized assessment diagnostic based on 12 proctored test suites and coding scenarios.\n \n \n \n {/* Summary Key Data Points */}\n
\n
\n
\n \n Highest Skill Domain:\n
\n Web Accessibility (95%) · Top 2%\n
\n\n
\n
\n \n Primary Growth Delta:\n
\n Micro-Frontends (78%) · Top 21%\n
\n\n
\n
\n \n Proctor Verification Integrity:\n
\n 99.4% Full Trust\n
\n
\n\n {/* Percentile Distribution Meter */}\n
\n
\n Global Percentile Placement\n 96th Percentile\n
\n
\n {/* Tier 1: Proficient (0-50%) */}\n
\n {/* Tier 2: Advanced (50-80%) */}\n
\n {/* Tier 3: Expert (80-100%) */}\n
\n {/* Marker for Elena (96%) */}\n \n
\n
\n 50th (Mid)\n 80th (Senior)\n 96th (Elena)\n 99th (Staff)\n
\n
\n\n {/* Assessment Transcript Metadata */}\n
\n Elena demonstrated outstanding mastery in accessibility tree construction, OKLCH theme token isolation,\n and deterministic state management. Enrolling in the Micro-Frontend pathway will bridge remaining\n Staff-level requirements.\n
\n \n \n
\n\n {/* Competency Breakdown Multi-Bar Matrix */}\n \n \n
\n
\n Competency Breakdown Multi-Bar Matrix\n \n Direct comparison of candidate skill scores against industry senior baseline with mastery\n classifications.\n \n
\n \n 6 Technical Competencies Evaluated\n \n
\n \n \n {/* Table for Desktop & Tablet, Structured Cards for Mobile */}\n
\n \n \n \n Competency & Technical Scope\n Mastery Level\n Candidate vs Industry Benchmark\n Score Delta\n \n \n \n {competencyBreakdown.map((comp) => (\n \n {/* Competency Name & Scope */}\n \n
\n

{comp.name}

\n

{comp.description}

\n
\n \n\n {/* Mastery Badge */}\n \n \n {comp.masteryLevel}\n \n \n\n {/* Dual Multi-Bar Progress */}\n \n
\n {/* Candidate Bar */}\n
\n
\n Elena:\n {comp.userScore}%\n
\n \n
\n\n {/* Industry Benchmark Bar */}\n
\n
\n Benchmark:\n \n {comp.benchmarkScore}%\n \n
\n \n
\n
\n \n\n {/* Delta Lead Badge */}\n \n
\n \n {comp.deltaLabel}\n \n {comp.percentile}\n
\n \n \n ))}\n \n
\n
\n \n \n\n {/* Recommended Next Courses & Skill Gaps Card (3 targeted modules) */}\n \n \n
\n
\n
\n \n \n Recommended Next Courses & Personalized Learning Pathways\n \n
\n \n Targeted modules calibrated to close identified skill gaps and elevate proficiency into the Top 1% Staff\n Master tier.\n \n
\n \n 3 High-Impact Pathways\n \n
\n \n \n
\n {learningCourses.map((course) => (\n \n
\n {/* Gap Identifier Strip */}\n
\n \n Gap Target: {course.gapTarget}\n \n \n {course.currentScore} → {course.targetScore}\n \n
\n\n {/* Course Title & Meta */}\n
\n

{course.title}

\n

\n {course.provider} · {course.duration}\n

\n
\n\n \n\n {/* Actionable Syllabus Highlights */}\n
\n Core Learning Objectives:\n
    \n {course.syllabus.map((item, idx) => (\n
  • \n \n {item}\n
    • \n ))}\n
\n
\n
\n\n {/* Enrollment Action Button */}\n
\n \n \n {course.buttonText}\n \n
\n
\n ))}\n
\n \n \n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/SkillAssessmentRadar.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/avatar.json", "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/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" ] }