CtrlK
BlogDocsLog inGet started
Tessl Logo

frame-liquid-bg-hero

WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.

66

Quality

80%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./skills/frame-liquid-bg-hero/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

86%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 tight, highly actionable spec for a single-file HTML hero with concrete techniques, palettes, and constraints, well-organized into clear sections. Its only real gap is the lack of an explicit end-of-workflow verification step.

Suggestions

Add a short final verification step, e.g., '打开 index.html 验证: 16:9 与 9:16 双向、prefers-reduced-motion 降级、无外链图片'.

Provide one minimal copy-paste code skeleton for the default CSS radial-gradient implementation to push actionability to 5.

Mark the default canvas orientation explicitly (currently '二选一') so the single-action path is unambiguous.

DimensionReasoningScore

Conciseness

The body is a lean spec (terse imperative lines, exact hex codes, font names, blend modes) with no concept explanations Claude already knows; every line is actionable constraint or spec, so it earns a 5 rather than a 4 which would require over-explanation to trim.

5 / 5

Actionability

It gives concrete, specific guidance (radial-gradient + @keyframes + mix-blend-mode, exact palettes, font stacks, vw sizing) but is a spec rather than copy-paste-ready code, leaving minor gaps versus a 5.

4 / 5

Workflow Clarity

As a single-purpose skill under 50 lines it is well-organized with explicit defaults ('默认推荐', '按用户偏好选') and a degradation path, but there is no explicit verification checkpoint (e.g., open in browser, confirm prefers-reduced-motion), a minor gap keeping it below 5.

4 / 5

Progressive Disclosure

No bundle files exist and the body makes no file references; for a sub-50-line skill with no need for external references, the well-organized section headers (模板/意图/画布/流体背景/顶层文字层/调色/设计细节) satisfy the simple-skill exception for a 5.

5 / 5

Total

18

/

20

Passed

Description

73%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 concrete and well-targeted to a distinct niche, clearly pairing a 'what' with usable trigger scenarios. Its main weakness is the absence of an explicit 'Use when...' framing and a single composite action rather than a list of capabilities.

Suggestions

Add an explicit trigger clause, e.g. 'Use when creating video intros, landing heroes, or poster backgrounds that need a fluid animated look.'

List the concrete actions the skill performs (e.g., 'renders a fluid displacement background, overlays a quote, degrades to CSS/canvas for single-file output') to lift specificity.

Include a couple of synonyms such as 'hero section' or 'title card' to broaden natural trigger coverage.

DimensionReasoningScore

Specificity

Quotes "WebGL-style fluid displacement background with a quote overlay" name the domain and a concrete composite action, but it describes one combined output rather than listing several distinct actions, so it is not comprehensive enough for a 4.

3 / 5

Completeness

It states both what ("fluid displacement background with a quote overlay") and when ("suited to video intros, landing heroes, or posters"), but the when is phrased as 'suited to' rather than an explicit 'Use when...' clause, so it could be more direct.

4 / 5

Trigger Term Quality

"video intros, landing heroes, or posters" are natural terms users would actually say; coverage is good though a few synonyms (e.g., 'hero section', 'title card') are missing.

4 / 5

Distinctiveness Conflict Risk

"WebGL-style fluid displacement background with a quote overlay" is a clear niche with concrete, distinct triggers (video intros / landing heroes / posters), giving minimal overlap with other skills.

5 / 5

Total

16

/

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.

Validation15 / 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
nexu-io/open-design
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.