Use when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.
SkillScore59Maintained
Automatic
◆Frontend / UI pack
Last verified 8/9/2026
What it changes
Passed 11 of 19 test cases with the skill, and 8 of 19 without it.
Without skill41%
With skill59%
Checks it passed that the model alone missed
Rejects placing web authentication login logic into cloud functions.
Passes the canonical full EnvId into the cloudbase init configuration object.
Configures auth.anonymousAuthProvider to authenticate guest users via the Web SDK.
and 3 more in the full report
4 fixed9 passed either way9 still failing0 broke
Pass-rate lift
+18 pp
Tokens
+157%
Agent turns
0%
Response time
-14%
Model gemini-3.6-flashMeasured 8/9/2026v213 of 22 cases passed with skill · 19 comparable
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 4 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 4
Prompt
We need to implement WeChat Official Account JSAPI Payment and Native QR Code Payment handling for our Web client app on CloudBase. Which reference skill should be consulted for these payment contract details?
What was checked, without and with the skill
Checked
Without skill
With skill
Routes to cloudbase-wechat-integration for WeChat payment contract implementation details.
Missed
Passed
case-19 · gemini-3.6-flash · 8/9/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md199 linessingle file
Sibling skills (local only)
Sibling CloudBase skills ship beside this skill. Use local relative paths such as ../auth-tool-cloudbase/SKILL.md.
If a referenced sibling skill file is missing from this environment, ask the user to install the full CloudBase plugin (or the missing skill). Do not HTTP-fetch remote skill or protocol markdown into the agent context.
Cross-cutting protocols (required before code changes or deployments):
The request is to implement, integrate, debug, build, deploy, or validate a Web frontend or static site.
The design direction is already decided, or the user is asking for engineering execution rather than visual exploration.
The work involves React, Vue, Vite, routing, browser-based verification, or CloudBase Web integration.
Read before writing code if
The task includes project structure, framework conventions, build config, deployment, routing, or frontend test and validation flows.
The request includes UI implementation but the visual direction is already fixed; otherwise read ui-design first.
⚠️ Any task involving interface styling, layout, color scheme, or font selection — before writing the first line of CSS/Tailwind, you MUST load the ui-design skill and output a Design Specification. Skipping this step causes frontend styling to degrade to generic AI template defaults. The ui-design skill must be loaded before any visual implementation begins, not retroactively after the user complains about the appearance.
Then also read
General React / Vue / Vite guidance -> frameworks.md
Browser flow checks or page validation -> browser-testing.md
Login flow -> ../auth-tool-cloudbase/SKILL.md, then ../auth-web-cloudbase/SKILL.md
Official Account JSAPI Pay, Native QR-code Pay, or WeChat OAuth on CloudBase -> ../cloudbase-wechat-integration/SKILL.md (official docs: https://docs.cloudbase.net/integration/introduce/index.md)
CloudBase database work -> matching database skill
Do NOT use for
Visual direction setting, prototype-first design work, or pure aesthetic exploration.
Mini programs, native Apps, or backend-only services.
WeChat payment or Official Account OAuth contract details; use cloudbase-wechat-integration after identifying the Web surface.