CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

frame-liquid-bg-hero

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

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

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

92%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 an exemplary lean, high-density design spec: concrete values for every visual decision, explicit prohibitions, graceful-degradation guidance, and clearly scoped choice points. The only real gap is that the mid- and high-tier fluid implementations (canvas noise, WebGL shader) are described but not accompanied by any starter code, which keeps actionability just short of full marks.

DimensionReasoningScore

Conciseness

The body is a lean ~35-line spec where every line is a directive or constraint — palette hex codes, "5-7vw", "mix-blend-mode: difference", "backdrop-filter: blur(80px)", "周期 8-14s, 错峰" — with zero padding and no explanation of concepts Claude already knows. It clearly matches the 'lean and efficient; assumes Claude's competence' anchor rather than 4, which requires noticeable over-explanation.

5 / 5

Actionability

Guidance is highly concrete for an instruction-only skill: exact hex palettes ("#a78bfa + #7c5cff + #1e1b4b"), named fonts ("Source Serif Pro / Inter Tight / Manrope Black"), specific CSS techniques, and explicit fallbacks ("prefers-reduced-motion 时降回静态截图"). It stops short of 5 because key mechanisms are only gestured at — "80 行 inline JS ... 画 metaballs 或 simplex noise field" and "shader 写 domain-warp noise" promise code that is never provided, leaving minor gaps for the mid/high-tier implementations.

4 / 5

Workflow Clarity

This is a single-purpose generation skill (produce one single-file HTML frame) and the single action is unambiguous: intent, canvas choice, background implementation tiers, text layer, palette, and hard constraints ("严禁外链图片", "单文件 HTML") are laid out in a coherent build order with every decision point explicitly scoped ("二选一", "4 选 1, 不要彩虹", "按用户偏好选"). The simple-skill exception applies — nothing here is a destructive or batch operation requiring validation checkpoints.

5 / 5

Progressive Disclosure

No bundle files exist (no references/, scripts/, or assets/ directories) and the body is under 50 lines with well-labeled sections (意图/画布/流体背景/顶层文字层/调色/设计细节), so nothing needs to be split out. Per the rubric's own guideline, a short skill with no need for external references and well-organized sections scores 5; the only external pointer is a CDN URL, which is a dependency, not a buried reference.

5 / 5

Total

19

/

20

Passed

Description

61%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 concise and concrete about what the skill produces, with a clear niche and reasonably natural trigger vocabulary. Its main weakness is the absence of an explicit 'Use when...' trigger clause and of any action verbs, leaving both completeness and specificity in the middle of the scale.

Suggestions

Add an explicit trigger clause, e.g. 'Use when creating a liquid/fluid animated hero background, video intro frame, or quote poster.'

Lead with action verbs (e.g. 'Creates a WebGL-style fluid displacement background...') to strengthen the capability statement.

Include common synonyms users would say — 'liquid background', 'animated background', 'title card' — alongside the current trigger terms.

DimensionReasoningScore

Specificity

The description names concrete artifacts — "WebGL-style fluid displacement background with a quote overlay" and targets "video intros, landing heroes, or posters" — but contains no action verbs at all; it describes a deliverable rather than listing specific actions, matching the 'names domain and 1-2 concrete actions but not comprehensive' anchor. It does not reach 4 because no specific actions (create/generate/apply) are stated.

3 / 5

Completeness

The 'what' is clear ("WebGL-style fluid displacement background with a quote overlay"), but the 'when' is only weakly implied by "suited to video intros, landing heroes, or posters" — there is no explicit "Use when..." trigger clause, which caps completeness at 3 per the judging guidelines. Not 2 because the 'when' is not absent: the suited-to list does communicate use contexts.

3 / 5

Trigger Term Quality

Terms like "fluid displacement background", "quote overlay", "video intros", "landing heroes", and "posters" are natural phrases a user would say, giving good keyword coverage. Not 5 because common synonyms like "liquid background", "animated background", or "title card" are missing from the description itself ("liquid" only appears in the tags).

4 / 5

Distinctiveness Conflict Risk

"WebGL-style fluid displacement background with a quote overlay" carves a clear niche (animated liquid/fluid hero backgrounds) with distinct triggers like "fluid", "hero", and "video intro". Not 5 because it could still mildly overlap with generic background/hero/landing-page template skills.

4 / 5

Total

14

/

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

nexu-io/open-design

Path

skills/frame-liquid-bg-hero/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.