CtrlK
BlogDocsLog inGet started
Tessl Logo

build-polished-visual-frontends

构建、重做、诊断或提升最终由浏览器消费的高完成度视觉前端。用于 HTML/CSS/JS/TS、React/Vue/Svelte/Astro、SVG/Canvas/WebGL 或 web-to-print 的网站、产品界面、数据故事、图解、地图、仿真与游戏;负责真实标杆、表达强度、成熟框架与设计系统、专业 Web 引擎、代表画面和最终像素质量,并与一份主要领域 Skill 组合。不用于纯后端、原生应用或仅以网页作为临时查看器的非 Web 母版。

65

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

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.

The content is a sophisticated, well-sequenced workflow with strong actionability and excellent validation checkpoints, and it uses one-level-deep references effectively. Its main weakness is length and repetition, which hurts token efficiency.

Suggestions

De-duplicate rules that recur across sections: state each prohibition once in its home section and reference it from §8 completion conditions instead of restating it.

Move the long contract YAML schemas (e.g. MASTER-VISUAL-CONTRACT, DETAIL-CONTRACT) into a reference file and keep only the field list inline, reducing SKILL.md length while preserving actionability.

Consolidate the repeated image-provenance and anti-fabrication rules into a single authoritative block in §3, then point other sections to it.

DimensionReasoningScore

Conciseness

The body assumes Claude's intelligence (no basic-concept padding), but at ~590 lines it is noticeably long with repetition — the §8 completion conditions restate rules already detailed in earlier sections, and several prohibitions (e.g. 禁止用生成图像冒充产品截图) recur across sections, so it could be tightened.

3 / 5

Actionability

Provides concrete executable artifacts — copy-paste YAML contract schemas (VISUAL-THESIS, MASTER-VISUAL-CONTRACT, decision card), specific npm packages, tool commands (visual-web-info --json, git clone --depth 1), a worked example, and five defined rework tests — but this is mixed with abstract principle statements, leaving minor gaps.

4 / 5

Workflow Clarity

A clear §1–§8 sequence with explicit gated checkpoints ("不得…前", "通过后…才能"), feedback loops (failure stops implementation and preserves the raw error), and a final completion checklist — matching the anchor for clear sequence with explicit validation and error-recovery loops.

5 / 5

Progressive Disclosure

References are well-signaled and one level deep ("按需读取[…](references/…)" to aesthetic-routing, tool-install, stack-routing, design-system-routing, assets-and-imagegen, decision-traces, template-pool/POOL.md, all verified real files), but the SKILL.md itself inlines substantial detail (long contract schemas, rework tests) that keeps it from being a lean overview.

4 / 5

Total

16

/

20

Passed

Description

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

The description is strong: it states concrete capabilities, gives explicit trigger guidance via the "用于…" clause, and sharply delimits scope with exclusions. The only mild weakness is that the core verbs are slightly abstract and a few common synonyms are absent.

Suggestions

Consider adding the everyday synonyms users actually say (e.g. dashboard, landing page, 落地页, 网页) alongside the tech-stack terms to broaden trigger coverage.

Tighten the action verbs toward more concrete operations (e.g. 'designs and ships pixel-polished browser UIs') so the capability reads as specific actions rather than abstract verbs.

DimensionReasoningScore

Specificity

Names four concrete actions ("构建、重做、诊断或提升") plus a comprehensive list of domains and responsibilities (HTML/CSS/JS/TS, React/Vue/Svelte/Astro, SVG/Canvas/WebGL, web-to-print, 真实标杆, 专业 Web 引擎, 最终像素质量), but the verbs are slightly more abstract than fully concrete actions like extract/fill/merge.

4 / 5

Completeness

Explicitly answers what (build/redo/diagnose/elevate high-polish browser frontends) and when via the "用于…" clause listing concrete triggers, plus explicit "不用于…" exclusions — a clear equivalent of a 'Use when…' clause with concrete trigger phrases.

5 / 5

Trigger Term Quality

Includes many natural terms a user would say (React, Vue, Svelte, Astro, 网站, 产品界面, 数据故事, 图解, 地图, 仿真, 游戏) and explicit exclusions; a few common synonyms (e.g. dashboard, landing page) are not surfaced verbatim, keeping it just below comprehensive.

4 / 5

Distinctiveness Conflict Risk

Scoped to a clear niche (browser-consumed high-polish visual frontends combined with a domain Skill) with explicit exclusions (not pure backend, not native apps, not non-web master formats), giving minimal conflict risk.

5 / 5

Total

18

/

20

Passed

Validation

81%

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

Validation — 13 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (595 lines); consider splitting into references/ and linking

Warning

relative_links

Relative link issues: 1 deeper-than-1-level

Warning

referenced_paths_exist

Referenced path issues: 2 deeper-than-1-level

Warning

Total

13

/

16

Passed

Repository
EverMind-AI/Raven
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.