{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "skill-assessment-radar", "title": "Skill Assessment Radar", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/skill-assessment-radar/skill-assessment-radar.component.ts", "content": "// Developer skill proficiency scorecard and radar matrix: domain percentile rankings,\n// dual candidate vs industry benchmark progress bars, competency breakdown, radar\n// telemetry polygon, and personalized learning pathways. Port of the Vue/React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport {\n Award,\n CheckCircle2,\n Code2,\n Compass,\n Eye,\n FileDown,\n GraduationCap,\n Layers,\n LucideAngularModule,\n Play,\n Share2,\n ShieldCheck,\n Target,\n TrendingUp,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent, UiAvatarImageComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\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 // eslint-disable-next-line @typescript-eslint/no-explicit-any\n icon: any\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\nconst radarCenter = { x: 180, y: 160 }\nconst radarRadius = 105\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\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-skill-assessment-radar, [ui-skill-assessment-radar]',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiAvatarImageComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiProgressComponent,\n UiSeparatorComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n
\n
\n
\n
\n \n \n ER\n \n
\n
\n

Elena Rostova

\n Senior Frontend Engineer\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
\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
\n @for (domain of domains; track domain.id) {\n
\n
\n
\n
\n \n \n
\n

{{ domain.title }}

\n
\n {{ domain.percentile }}\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 Senior Cohort Benchmark:\n {{ domain.benchmarkScore }}%\n
\n

{{ domain.description }}

\n
\n
\n
\n }\n
\n\n \n
\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
\n \n \n \n \n \n \n \n @for (ring of gridRings; track ring) {\n \n }\n @for (axis of axes; track axis.label; let i = $index) {\n \n }\n 40%\n 80%\n \n \n @for (score of candidateScores; track $index; let i = $index) {\n \n }\n @for (label of labels; track label.index) {\n \n {{ axes[label.index]!.shortLabel }}\n \n ({{ axes[label.index]!.userScore }}%)\n \n \n }\n \n
\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
\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
\n \n
\n \n Highest Skill Domain:\n
\n Web Accessibility (95%) · Top 2%\n
\n \n
\n \n Primary Growth Delta:\n
\n Micro-Frontends (78%) · Top 21%\n
\n \n
\n \n Proctor Verification Integrity:\n
\n 99.4% Full Trust\n
\n
\n
\n
\n Global Percentile Placement\n 96th Percentile\n
\n
\n
\n
\n
\n
\n
\n
\n 50th (Mid)\n 80th (Senior)\n 96th (Elena)\n 99th (Staff)\n
\n \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 \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
\n
\n \n \n \n \n \n \n \n \n \n \n @for (comp of competencies; track comp.id) {\n \n \n \n \n \n \n }\n \n
Competency & Technical ScopeMastery LevelCandidate vs Industry BenchmarkScore Delta
\n
\n

{{ comp.name }}

\n

{{ comp.description }}

\n
\n 		\n \n {{ comp.masteryLevel }}\n \n \n
\n
\n
\n Elena:\n {{ comp.userScore }}%\n
\n \n
\n
\n
\n Benchmark:\n {{ comp.benchmarkScore }}%\n
\n \n
\n
\n 		\n
\n \n {{ comp.deltaLabel }}\n \n {{ comp.percentile }}\n
\n
\n
\n
\n
\n
\n\n \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 3 High-Impact Pathways\n
\n
\n
\n
\n @for (course of courses; track course.id) {\n \n
\n
\n \n Gap Target: {{ course.gapTarget }}\n \n \n {{ course.currentScore }} → {{ course.targetScore }}\n \n
\n
\n

{{ course.title }}

\n

{{ course.provider }} · {{ course.duration }}

\n
\n \n
\n Core Learning Objectives:\n
    \n @for (item of course.syllabus; track $index) {\n
  • \n \n {{ item }}\n
    • \n }\n
\n
\n
\n
\n \n \n {{ course.buttonText }}\n \n
\n
\n }\n
\n
\n \n \n `,\n})\nexport class UiSkillAssessmentRadarComponent {\n protected readonly Award = Award\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Compass = Compass\n protected readonly FileDown = FileDown\n protected readonly GraduationCap = GraduationCap\n protected readonly Play = Play\n protected readonly Share2 = Share2\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Target = Target\n protected readonly TrendingUp = TrendingUp\n\n @Input('class') className?: string\n\n readonly domains = domainBenchmarks\n readonly competencies = competencyBreakdown\n readonly courses = learningCourses\n readonly axes = radarAxes\n readonly labels = axisLabels\n readonly gridRings = [0.2, 0.4, 0.6, 0.8, 1.0]\n readonly center = radarCenter\n readonly candidateScores = radarAxes.map((a) => a.userScore)\n readonly benchmarkScores = radarAxes.map((a) => a.benchmarkScore)\n readonly candidatePolygon = this.polygonString(this.candidateScores)\n readonly benchmarkPolygon = this.polygonString(this.benchmarkScores)\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n axisPoint(index: number, score: number, maxScore = 100): { x: number; y: number } {\n const total = this.axes.length\n const angle = -Math.PI / 2 + (index * 2 * Math.PI) / total\n const ratio = Math.min(1, Math.max(0, score / maxScore))\n const r = radarRadius * ratio\n return { x: this.center.x + r * Math.cos(angle), y: this.center.y + r * Math.sin(angle) }\n }\n\n polygonString(scores: number[]): string {\n return scores\n .map((score, index) => {\n const pt = this.axisPoint(index, score)\n return `${pt.x.toFixed(1)},${pt.y.toFixed(1)}`\n })\n .join(' ')\n }\n\n ringPolygon(ringRatio: number): string {\n return this.axes\n .map((_, index) => {\n const pt = this.axisPoint(index, ringRatio * 100)\n return `${pt.x.toFixed(1)},${pt.y.toFixed(1)}`\n })\n .join(' ')\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/skill-assessment-radar/skill-assessment-radar.component.ts" }, { "path": "packages/registry-angular/blocks/skill-assessment-radar/index.ts", "content": "export { UiSkillAssessmentRadarComponent } from './skill-assessment-radar.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/skill-assessment-radar/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/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" ] }