Build or modify frontend interfaces using repository-native components while preserving accessibility, responsive behavior, state handling, and visual verification.
SkillScore26Maintained
Automatic
◆Frontend / UI pack
Last verified 9/1/2026
What it changes
Passed 3 of 11 test cases with the skill, and 2 of 11 without it.
Without skill17%
With skill26%
Checks it passed that the model alone missed
Reuses existing component patterns in the repository.
Explicitly identifies remaining unverified test steps.
Preserves established design system styling conventions.
and 4 more in the full report
6 fixed0 passed either way13 still failing4 broke
Pass-rate lift
+9 pp
Tokens
-21%
Agent turns
0%
Response time
-24%
Model gemini-3.6-flashMeasured 9/1/2026v16 of 23 cases passed with skill · 11 comparable
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 6 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 6
Prompt
After updating the Hedera Custom Fees Schedule table component styling, which command step failure requires explicit blocker reporting if `npm run test:component` cannot execute?
What was checked, without and with the skill
Checked
Without skill
With skill
Reports exact command execution blockers when component tests fail.
Passed
Passed
Identifies visual inspection steps as remaining unverified.
Missed
Passed
case-19 · gemini-3.6-flash · 9/1/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md26 lines2 files
Build Frontend
Domain contract
Preserve the project’s framework, styling system, and component conventions.
Do not invent API response fields or silently change backend contracts.
Do not replace an established design system with custom one-off styling.
Define loading, empty, error, success, and disabled states that the changed
flow can reach.
Keep semantic HTML, keyboard navigation, focus behavior, labels, and contrast in scope.
Avoid speculative shared abstractions for a single component.
Treat screenshots and mockups as visual references, not proof of interaction behavior.
Do not claim visual verification unless the UI was rendered or inspected.
Execute and verify
Read references/verification.md for UI, accessibility, responsive, and browser verification. Load it when the task changes rendered behavior or interaction.
Reuse existing components and tokens, implement the smallest coherent change,
and prove behavior at the lowest useful layer. Prefer:
component test → feature test → type/lint → build → visual/interaction check
If a command cannot run, report the exact blocker and what remains unverified.