CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-design

创建具有高设计品质、可交付生产的前端界面。当用户要求构建 Web 组件、页面、海报或应用(如官网、落地页、仪表盘、React/Vue 组件、HTML/CSS 布局,或对任意 Web UI 进行样式/美化)时使用本技能。产出有创意、打磨到位且避免「AI 通用审美」的代码与界面设计。

61

Quality

72%

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

Quality

Content

61%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-organized, instruction-only design guide with concrete, actionable specifics (named fonts, contrast ratios, CSS features) and a coherent conceptual sequence. Its main weaknesses are mild verbosity from restating well-known design/accessibility concepts and the absence of explicit workflow checkpoints or illustrative code.

Suggestions

Trim explanations of concepts Claude already knows (e.g. the WCAG 可感知/可操作/可理解/健壮 breakdown and the general benefits of whitespace) to lift conciseness toward a 5.

Add one or two short, copy-pasteable code snippets (e.g. a CSS-variables theme block and a prefers-reduced-motion media query) to move actionability from mostly-executable to fully executable.

Make the design workflow explicit with numbered steps and a verification checkpoint (e.g. "4. 自检:对比度 ≥ 4.5:1?动效有 reduced-motion 分支?") to raise workflow_clarity above 3.

DimensionReasoningScore

Conciseness

The body is mostly efficient directive guidance, but re-explains concepts Claude already knows — e.g. "留白能引导视线、建立层次、减轻视觉疲劳" and the WCAG 可感知/可操作/可理解/健壮 principles — which is padding; not verbose enough for a 2, but not lean enough for a 4.

3 / 5

Actionability

For an instruction-only skill the guidance is concrete and specific: named fonts to avoid (Inter、Roboto、Arial、思源黑体、Space Grotesk), a numeric contrast target (≥ 4.5:1 WCAG AA), and specific CSS hooks (prefers-reduced-motion、:focus-visible、CSS 变量). It lacks complete code examples, keeping it below 5, but is clearly actionable rather than abstract.

4 / 5

Workflow Clarity

A loose sequence is present ("动手写代码前,先理解上下文并选定...美学方向" → then implement), but it has no explicit checkpoints or validation/feedback loops; this is a creative skill so the destructive-batch cap does not apply, yet checkpoints are still only implicit, matching a 3 rather than a 4.

3 / 5

Progressive Disclosure

Content is organized into clear topical sections (设计思维、前端美学指南 with subsections、禁忌、可访问性、总结) with no nested or buried references and no bundle files to mis-link; at ~88 lines it is slightly long for a single file, which keeps it just below a 5, but structure is good and placement is appropriate.

4 / 5

Total

14

/

20

Passed

Description

83%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, well-structured description that clearly states what the skill produces and when to invoke it, with natural Chinese trigger terms covering the common frontend-design request shapes. Minor room to add a few more action verbs and synonyms.

DimensionReasoningScore

Specificity

Names the domain and several concrete actions — "创建...前端界面", "构建 Web 组件、页面、海报或应用", "样式/美化", "产出...代码与界面设计" — with only minor coverage gaps (e.g. no explicit redesign/refactor verb). It sits below a 5, which would require a more exhaustive action list, but clearly above a 3.

4 / 5

Completeness

Explicitly answers both halves: the "what" ("创建具有高设计品质、可交付生产的前端界面...产出...代码与界面设计") and the "when" via an explicit trigger clause ("当用户要求构建...时使用本技能"). Both are concrete and explicit, matching the top anchor.

5 / 5

Trigger Term Quality

Includes natural user phrasings — "官网、落地页、仪表盘", "React/Vue 组件", "HTML/CSS 布局", "样式/美化" — that map well to what users actually say; a few common synonyms are missing, so not a 5, but coverage is clearly good rather than partial.

4 / 5

Distinctiveness Conflict Risk

The design-quality / avoid-"AI 通用审美" niche with distinct triggers (海报、落地页、美化) is mostly distinct from generic webdev skills, with only minor overlap risk; it is not a fully isolated niche (5) but is clearly more distinct than a 3.

4 / 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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
xstongxue/best-skills
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.