CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

web-development

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.

64

Quality

80%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./plugin/cloudbase/skills/web-development/SKILL.md

The canonical home for this skill is web-development in TencentCloudBase/CloudBase-AI-Toolkit

SKILL.md
Quality
Evals
Security

Quality

Content

73%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-structured engineering skill with genuinely non-obvious project policy, exact commands and MCP tool calls, and an unusually strong validation culture (two-layer self-verify gate with explicit error paths). Its weaknesses are duplication — the 404/History-mode rule and two workflow sections are each stated twice, roughly doubling token cost — and a truncated final code snippet plus references that don't resolve in this partial bundle.

Suggestions

Merge 'How to use this skill' and 'Core workflow' (they cover the same four points: choose path, follow conventions, browser-validate, CloudBase-as-branch) and deduplicate the 404/History-mode rule, which is written out twice at full length — state it once in 'Static hosting defaults' and link from 'Common mistakes'.

Complete the truncated CloudBase quick-start snippet — `const auth = app.auth` is cut off mid-statement; finish it with the real call (e.g. `app.auth()` with persistence config) or drop the line.

Ship the referenced bundle files (`frameworks.md`, `browser-testing.md`, and the cross-cutting protocol files) alongside SKILL.md, or inline the minimal needed content, since in this environment every 'Then also read' pointer dead-ends.

DimensionReasoningScore

Conciseness

The body is dense with genuinely non-obvious, project-specific policy (the History-mode 404 gotcha, manageApps vs manageHosting deployment-path distinction, EnvId alias rule), but it is noticeably duplicated: the History-mode 404 warning is stated twice at full length ("Common mistakes" and "Static hosting defaults"), the "Do NOT use for" list appears in both the Activation Contract and "When to use this skill", and "How to use this skill" and "Core workflow" cover the same four points (choose path, follow conventions, browser-validate, CloudBase-as-branch) twice. It is not 2 because there is no conceptual padding — nothing explains what React or a frontend is — and every section carries project-specific rules Claude could not infer. It is not 4 because the duplication and the somewhat over-elaborated TypeScript rules are real token waste that could be cut roughly in third without losing information.

3 / 5

Actionability

Mostly executable: exact commands (`tsc --noEmit`, `npm install @cloudbase/js-sdk`, `npm run build`), exact files to inspect (`src/lib/backend.*`, `src/lib/auth.*`, route guards), a CDN URL, and copy-paste MCP tool calls (manageHosting setWebsiteDocument / queryHosting websiteConfig) cover the common deploy and validation cases. It is not 5 because the one JS example ends with a truncated line — `const auth = app.auth` (no call, no completion) — and because the primary guidance pointers (`frameworks.md`, `browser-testing.md`, sibling skill paths) resolve to files that are not present in this bundle, so an agent following them hits dead ends (the skill does at least instruct asking the user to install missing siblings). It is above 3 because the inline guidance is concrete and executable, not pseudocode or vague direction.

4 / 5

Workflow Clarity

The "Self-verify before claiming done" section is a full validation checklist with explicit sequencing: static/build layer first (`tsc --noEmit`, eslint, build, unit tests), then runtime/browser layer (agent-browser: route loads, fixed interaction behaves, no new console errors, no adjacent regressions), with an explicit gate ("Only after both layers pass may you say the task is done") and an error-recovery path ("If either layer cannot be executed locally... say so explicitly and list exactly which step is still unverified"). The debugging path also encodes a loop (reproduce → narrow → patch). It is not 4 because the anchor-4 weakness ('minor validation gaps') does not apply — validation is present at every risky stage including deployment (referenced deployment-gate protocol) and results recording (route, action, expected, actual).

5 / 5

Progressive Disclosure

The body acts as an overview with clearly signaled, one-level-deep references using a consistent arrow convention ("General React / Vue / Vite guidance -> `frameworks.md`", "Browser flow checks -> `browser-testing.md`", sibling SKILL.md and protocol paths), and it gracefully handles missing siblings ("If a referenced sibling skill file is missing from this environment, ask the user to install the full CloudBase plugin"). It is not 5 because, against the actual bundle structure, the referenced files (`frameworks.md`, `browser-testing.md`, the sibling skills and protocols) do not exist in this environment, so navigation dead-ends, and some content that would more naturally live in a reference file (the full TypeScript constitution, the detailed static-hosting deployment rules) is inlined in SKILL.md. It is not 3 because references are clearly signaled and never nested more than one level — the 200-line inline blocks that plague the anchor-3 example are absent, and the SKILL.md remains a navigable overview.

4 / 5

Total

16

/

20

Passed

Description

80%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: explicit, highly specific use-when triggers with a full set of concrete engineering verbs and named technologies. Its only real weakness is that the "what" is folded into the when-clause rather than stated declaratively, and a few natural synonyms (SPA, website, static site) are absent.

DimensionReasoningScore

Specificity

The description lists six concrete engineering actions ("implement, integrate, debug, build, deploy, or validate") against a named domain ("Web frontend"), with named technologies (React, Vue, Vite, CloudBase Web integration) — comprehensive coverage of the frontend engineering lifecycle. It is not above 5 because anchor 5 is the top; it clearly matches that anchor rather than anchor 4, whose weakness ('minor gaps in coverage') does not apply — build, debug, deploy, and validate are all explicitly covered.

5 / 5

Completeness

The "when" is explicit and specific ("Use when users need to... after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration"), and the "what" is present via the verb list ("implement, integrate, debug, build, deploy, or validate a Web frontend"). It is not 5 because the "what" is only embedded inside the when-clause rather than stated as a standalone declarative capability sentence, as in the anchor-5 example ("Extract text and tables from PDF files, fill forms, merge documents. Use when..."); a strict reader gets the skill's triggers but not an independent statement of what the skill itself provides. It is not 3 because both elements are explicitly stated with concrete trigger phrases, not merely implied.

4 / 5

Trigger Term Quality

Natural terms users would actually say are present: "React", "Vue", "Vite", "Web frontend", "browser flows", "build", "deploy", "debug", "CloudBase Web integration". It is not 5 because common variations are missing — "SPA" / "single-page app", "website", "static site", "routing", and the bare "frontend" (only "Web frontend" appears) — so a few natural phrasings would not lexically match. It is above 3 because the coverage goes well beyond a couple of generic keywords and includes the specific framework names users invoke.

4 / 5

Distinctiveness Conflict Risk

The qualifier "after the product direction is already clear" plus the specific stack triggers (React, Vue, Vite, CloudBase Web integration) carve out a clear engineering-execution niche distinct from design-exploration skills. It is not 5 because the broad "Web frontend" territory genuinely overlaps with closely related skills in the same plugin family (ui-design for styling, auth-web-cloudbase, cloudbase-wechat-integration, cloudbase-platform deployment) — a generic "fix my React page's styling" request could plausibly match more than one skill. It is well above 3 because the when-qualifier and named frameworks make wrong-skill triggering unlikely.

4 / 5

Total

17

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository

TencentCloudBase/CloudBase-AI-Toolkit

Path

plugin/cloudbase/skills/web-development/SKILL.md

Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.