ui-selector-pro

系统性地进行UI库的选型、评估与对比。在有可用真实数据与评分逻辑时，优先复用这些数据与逻辑，并输出可落地的技术决策，同时附上风险说明。

SKILL.md

--- frontmatter

name: ui-selector-pro
description: Performs systematic UI library selection, evaluation, and comparison. Reuses real data and scoring logic from app when available, and outputs implementable technical decisions with risk explanations.

UI Selector Pro

Goal: combine repository methodology docs with real data in app/src/data/uiLibraries.ts into repeatable selection capability.

When To Use

•Users need recommendations for UI component libraries, CSS frameworks, or headless solutions.
•Users need quantified multi-option evaluation (accessibility, performance, customization, DX, ecosystem, enterprise readiness).
•Users need migration suggestions, comparison tables, or POC evaluation framework.

Data and Implementation Sources (SSOT)

•Data: app/src/data/uiLibraries.ts

•If missing, fallback to data/uiLibraries.seed.json.

•Recommendation logic reference: app/src/components/RecommendationPanel.tsx
•Evaluation logic reference: app/src/components/EvaluationPanel.tsx
•Workflow/template supplements:

•../../ui-selector-skill.md
•../../ui-evaluation-flow.md
•../../ui-selector-cheatsheet.md
•../../ui-selector-prompts.md
•../../UI-Design-AI-Skill.md

Workflow

•Clarify inputs

•Minimum required: framework + projectType.
•Optional: priority[], teamSize, designStyle, migration context.

•Run deterministic computation first

•Script execution is mandatory before contextual judgment:

bash

node skills/ui-selector-pro/scripts/ui_library_engine.mjs recommend \
  --framework react \
  --project-type saas-modern \
  --priority performance \
  --priority accessibility \
  --team-size medium \
  --design-style modern \
  --format json

bash

node skills/ui-selector-pro/scripts/ui_library_engine.mjs evaluate \
  --libraries shadcn-ui,mantine,chakra-ui \
  --format json

•Apply context adjustments

•Adjust with team experience, migration cost, and legacy constraints.
•Explicitly separate deterministic output from context-based adjustment.

•Produce decision output

•Top 3 recommendations (with reasons and risks)
•Dimension score summary
•Primary + fallback + rejection reasons
•Implementation suggestions (POC scope, phased migration, rollback points)

Output Contract

Output in this order:

•Input assumptions and constraints
•Recommendation results (Top 3)
•Dimension-evaluation summary
•Risks and migration suggestions
•Final decision recommendation

Rules

•If user input is ambiguous, ask for framework/projectType first.
•If user specifies libraries, prioritize evaluate + compare path.
•Every conclusion must separate:
•deterministic script result
•context-based human judgment
•If docs conflict with app data, trust app/src/data/uiLibraries.ts.

Collaboration

•For ADR/review materials/migration roadmap, pair with $ui-selector-playbook.
•After selection, handoff to $ui-codegen-master for implementation.