CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-dev

Full-stack frontend development combining premium UI design, cinematic animations, AI-generated media assets, persuasive copywriting, and visual art. Builds complete, visually striking web pages with real media, advanced motion, and compelling copy. Use when: building landing pages, marketing sites, product pages, dashboards, generating media assets (image/video/audio/music), writing conversion copy, creating generative art, or implementing cinematic scroll animations.

76

Quality

96%

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

100%

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 dense, table-driven, executable reference that assumes Claude's competence, sequences a multi-phase workflow with explicit validation gates, and pushes detail to real, one-level-deep bundle files. It exemplifies lean, actionable, well-structured skill content.

DimensionReasoningScore

Conciseness

Dense, table-driven content with no concept-overexplaining (no 'what is a PDF' equivalents), assumes Claude's competence, and every section earns its tokens with concrete config values, rules, and shortcuts — matches the lean-and-efficient anchor.

3 / 3

Actionability

Provides fully executable guidance: real script paths with sync/async patterns, exact install commands, specific spring configs, preset shortcut specs, and 'NEVER/ALWAYS' directives tied to concrete values — copy-paste ready rather than descriptive.

3 / 3

Workflow Clarity

A 6-phase workflow with explicit validation checkpoints ('confirm before generating', 'do NOT proceed to Phase 5 until all assets are saved locally', Quality Gates checklist with grep-based placeholder verification and a STOP directive) and clear error-recovery feedback loops — matches the clear-sequence-with-explicit-validation anchor.

3 / 3

Progressive Disclosure

SKILL.md is a well-organized overview with one-level-deep, clearly signaled references to real bundle files (e.g. 'See references/motion-recipes.md for full code'), and detail is appropriately split across verified references/ and scripts/ files with no deep nesting.

3 / 3

Total

12

/

12

Passed

Description

92%

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 and explicit, naming concrete capabilities and providing a clear 'Use when' trigger list with natural terms. Its only weakness is the breadth of scope, which raises mild conflict risk against generic frontend-development skills.

Suggestions

Tighten the trigger clause to name the differentiating capabilities more sharply (e.g. AI-generated media assets and generative art) so it is less likely to compete with a plain web-building skill.

Consider framing the niche around the orchestration of the 5 specialized capabilities rather than broad 'frontend development' to reduce overlap with general coding skills.

DimensionReasoningScore

Specificity

Lists multiple concrete actions: 'premium UI design, cinematic animations, AI-generated media assets, persuasive copywriting, and visual art' and 'Builds complete, visually striking web pages with real media, advanced motion, and compelling copy' — matches the multiple-specific-concrete-actions anchor.

3 / 3

Completeness

Explicitly answers both what it does ('Builds complete... web pages with real media, advanced motion, and compelling copy') and when to use it via an explicit 'Use when:' trigger clause — matches the level-3 anchor exactly.

3 / 3

Trigger Term Quality

Covers natural terms users would actually say — 'landing pages, marketing sites, product pages, dashboards, generating media assets (image/video/audio/music), writing conversion copy, creating generative art, or implementing cinematic scroll animations' — broad and natural coverage.

3 / 3

Distinctiveness Conflict Risk

The niche ('frontend development', 'building landing pages, marketing sites, product pages, dashboards') is broad and could overlap with general web/frontend skills; while the media-generation and generative-art angle adds distinctiveness, the wide scope keeps it at 'somewhat specific but could overlap' rather than a clearly bounded single-purpose niche.

2 / 3

Total

11

/

12

Passed

Validation

87%

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

Validation14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

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

Warning

metadata_field

'metadata' should map string keys to string values

Warning

Total

14

/

16

Passed

Repository
UnicomAI/wanwu
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.