Route frontend work to the correct project UI, data-experience, motion, and polish skills. Use before designing or implementing a page, interaction, dashboard, mobile surface, or visual redesign so only compatible Profiles guide the work.
SkillScore91Maintained
Automatic
◆Frontend / UI pack
Last verified 9/26/2026
What it changes
Passed 19 of 21 test cases with the skill, and 9 of 21 without it.
Without skill41%
With skill91%
Checks it passed that the model alone missed
Classifies artifact type as design-system for token audits.
Determines all five required facts before profile selection.
Executes the `scripts/util-select-agent-profiles.sh` script.
and 11 more in the full report
11 fixed9 passed either way2 still failing0 broke
Pass-rate lift
+50 pp
Tokens
-29%
Agent turns
0%
Response time
-35%
Model gemini-3.6-flashMeasured 9/26/2026v3 · latest is v420 of 22 cases passed with skill · 21 comparable
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
A newer attempt on gemini-3.6-flash on 10/4/2026 did not produce a publishable comparison (not comparable). The snapshot above is the previously measured run.
See it in action
One of 11 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 11
Prompt
We need to create an interactive HTML mockup to explore click paths for an onboard wizard during project planning. What artifact category is inferred and what profile is assigned?
What was checked, without and with the skill
Checked
Without skill
With skill
Infers artifact type as prototype for clickable mockup deliverables.
Passed
Passed
Mandates `ui-prototype-html` profile for prototype deliverables.
Missed
Passed
case-17 · gemini-3.6-flash · 9/26/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md31 lines2 files
UI Experience Orchestrator
Do not equate more animation or more Skills with better user experience.
Required Facts
Determine surface, stack, motion, phase, and artifact before selecting a Profile:
surface: admin, data, brand, standard, or mobile
stack: react or other
motion: none, micro, rich, or advanced
phase: plan, build, or review
artifact: implementation, prototype, wireframe, or design-system
Run scripts/util-select-agent-profiles.sh with all five facts when available. Infer artifact from the requested deliverable: HTML mockup/clickable exploration means prototype, low-fidelity exploration means wireframe, token/component review means design-system, and changes to the real application mean implementation. If a fact cannot be derived, use the least invasive choice and state the assumption.
Precedence
Explicit user requirements and accessibility needs.
Existing AGENTS.md, docs/架构与设计/DESIGN.md, tokens, and component system.
For prototype, wireframe, or design-system artifacts: ui-prototype-html only.
For implementation: one primary UI Profile and one optional motion Profile.
ui-polish only after a running production implementation exists.
Experience Contract
Prioritize task completion, hierarchy, feedback, and recovery over decoration.
Treat loading, empty, error, success, disabled, permission, and stale-data states as behavior.
Use image_gen when the requested deliverable is a design image.
Use baoyu-design-prototyping for HTML design artifacts; never use its HTML or screenshots as formal raster assets or production implementation evidence.
Run the affected build and frontend experience gate before calling the UI complete.