CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-vue-development

编写 BK-CI 前端 Vue 页面和组件时使用,例如 Vue 组件开发、Vuex 状态管理、接口调用、样式约定和页面交互实现。当用户要改前端页面而不是后端服务时优先使用。

61

Quality

77%

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 ./ai/skills/frontend-vue-development/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

65%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.

The body is a well-organized, token-efficient routing/policy document: it frames scope, anti-scope, principles, and pitfalls cleanly and defers to sibling skills appropriately. Its core weakness is that it prescribes conventions without documenting them — there is no code, naming example, or API-call pattern that would let Claude actually follow the project's conventions rather than just knowing they exist.

Suggestions

Add concrete examples of the project's conventions in 快速指导/高信号规则: a short sample component structure, an example API-call-and-error-handling pattern, and the actual naming/ordering rules (e.g., component file naming, prop ordering) — even a 5-10 line snippet would lift actionability.

Include a brief verification step in the workflow (e.g., 'before finishing, confirm the page handles empty/loading/error/permission states') so the sequence has an explicit checkpoint.

Move or copy the detailed convention lists into a references/ file (e.g., CONVENTIONS.md) and link it one level deep, keeping SKILL.md as the lean overview.

DimensionReasoningScore

Conciseness

The ~40-line body is lean and assumes Claude's competence: it never explains what Vue or Vuex is, and every section (适用场景 / 不适用场景 / 快速指导 / 高信号规则 / 关键陷阱 / 延伸阅读) earns its place. This matches the anchor-5 pattern of every token earning its place; there is no padding or over-explanation to trim.

5 / 5

Actionability

The guidance is almost entirely abstract: "先保持组件职责单一" (keep components single-responsibility), "错误态和 loading 态必须一起设计" (design error and loading states together), "命名、缩进、组件顺序...要统一" (naming, indentation, component order must be consistent) — it mandates conventions without ever stating what those conventions ARE (no naming patterns, directory structure, example API-call form, or error-handling pattern). A few near-concrete items ("明确三件事:数据来源、交互状态、和谁通信") and the explicit sibling-skill pointers keep it above anchor 1's 'entirely vague', but the specific steps to execute are missing, which is anchor 2.

2 / 5

Workflow Clarity

The numbered 快速指导 provides a rough orientation sequence (scope check → component design → consistency → when to defer to api-interface-design / backend-microservice-development), so a sequence exists, but there are no validation checkpoints or feedback loops — e.g., no 'verify the component renders empty/loading/error states before finishing'. This matches anchor 3 (sequence present, checkpoints missing or implicit); it is not 4 because no checkpoint is stated anywhere, and not 2 because the decision flow for routing to sibling skills is coherent.

3 / 5

Progressive Disclosure

No bundle files exist (references/, scripts/, assets/ are absent), and the skill is under 50 lines with clear, well-organized sections; per the simple-skill guidance this warrants a 5. The 延伸阅读 section signals one-level-deep cross-references to sibling skills (api-interface-design, backend-microservice-development) clearly rather than burying them.

5 / 5

Total

15

/

20

Passed

Description

78%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 well-scoped, trigger-aware description for a project-specific frontend skill. It clearly separates what the skill covers from when to use it and from adjacent backend skills. Main gap is trigger breadth — a few more natural phrasings and file/tech synonyms would make it fully comprehensive.

DimensionReasoningScore

Specificity

The description names the domain (BK-CI 前端 Vue) and lists several concrete capabilities: "Vue 组件开发、Vuex 状态管理、接口调用、样式约定和页面交互实现" (Vue component development, Vuex state management, API calls, styling conventions, page interaction implementation). It falls between anchor 3 (1-2 actions) and anchor 5 (comprehensive coverage) — five action areas are named, but each is a category rather than a fully enumerated concrete action, so 4 fits best.

4 / 5

Completeness

Both 'what' (component development, Vuex, API calls, styling, interactions) and 'when' are explicitly present: "当用户要改前端页面而不是后端服务时优先使用" (prefer when the user wants to change frontend pages rather than backend services). The when-clause is explicit, so it clears the cap of 3, but it offers only one discriminator condition rather than the multiple concrete trigger phrases of the anchor-5 example, placing it at 4.

4 / 5

Trigger Term Quality

Natural trigger terms are present: "Vue 组件", "Vuex", "前端页面", "改前端页面", "后端服务" — phrases a user of this project would plausibly say. Not 5 because common variations are missing (e.g., .vue files, 路由/router, TypeScript, element-ui, specific page names); not 3 because coverage goes beyond a single keyword with several user-natural phrasings.

4 / 5

Distinctiveness Conflict Risk

The description carves a clear niche: BK-CI 前端 Vue pages/components, explicitly contrasted with backend services ("而不是后端服务") and implicitly with generic Vue tutorials. Sibling skills are referenced in the body, and the frontend/backend boundary gives it distinct triggers with minimal conflict risk, matching the anchor-5 example's clear-niche pattern.

5 / 5

Total

17

/

20

Passed

Validation

100%

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

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
TencentBlueKing/bk-ci
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.