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.

Quality

96%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

100%Weight 40%Scale 1-3

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The content is token-efficient, highly actionable, and well-structured: a tight directive-and-table body supported by clearly signaled one-level-deep references, with explicit workflow phases and validation checkpoints including a final Quality Gates checklist.

Dimension	Reasoning	Score
Conciseness	The body is composed of dense tables and imperative directives with no padding about concepts Claude already knows (no "what is CSS/PDF" explanations); its length reflects the breadth of five orchestrated capabilities rather than verbosity, and every section delivers high value per token.	3 / 3
Actionability	Provides copy-paste-ready, executable guidance throughout — `npm install` commands, exact cubic-bezier/Tailwind-class/spring-config values, and real script paths (`scripts/minimax_image.py`, verified present) — with full code recipes deferred to the verified `references/motion-recipes.md`.	3 / 3
Workflow Clarity	The six-phase workflow is clearly sequenced with explicit validation checkpoints ("do NOT proceed to Phase 5 until all assets are saved locally", "MUST confirm before generating") and a Phase 6 Quality Gates checklist including a grep-and-STOP feedback loop for placeholder URLs.	3 / 3
Progressive Disclosure	SKILL.md acts as an overview pointing to one-level-deep references that are clearly signaled via the Skill Structure tree, the §3.4 reference list, and inline cues ("See `references/motion-recipes.md` for full code"); verified reference files contain the actual content rather than further deferral.	3 / 3
	Total	12 / 12 Passed

Description

92%Weight 40%Scale 1-3

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 specific, trigger-rich, and fully answers both "what" and "when" with an explicit Use-when clause. Its main weakness is breadth: bundling five capabilities raises overlap/conflict risk with more specialized single-purpose skills.

Suggestions

Tighten the scope statement or add a disambiguating phrase (e.g. "end-to-end page builds that combine…") so it does not compete with standalone media-generation, copywriting, or generative-art skills.

Consider leading with the primary trigger ("building complete web pages/landing pages") before the secondary capabilities to sharpen distinctiveness.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions across frontend, media generation, copywriting, and art ("building landing pages, marketing sites, product pages, dashboards", "generating media assets (image/video/audio/music)", "creating generative art", "implementing cinematic scroll animations"), matching the anchor for listing several specific concrete actions rather than just naming a domain.	3 / 3
Completeness	Explicitly answers both what ("Builds complete, visually striking web pages with real media, advanced motion, and compelling copy") and when ("Use when: building landing pages… generating media assets…"), with an explicit "Use when" trigger clause.	3 / 3
Trigger Term Quality	Covers natural user-facing terms with good variation ("landing pages", "marketing sites", "product pages", "dashboards", "image/video/audio/music", "conversion copy", "generative art", "cinematic scroll animations") that a user would plausibly say when needing this skill.	3 / 3
Distinctiveness Conflict Risk	The skill deliberately bundles five distinct capabilities (UI, motion, AI media generation, copywriting, generative art), so narrower dedicated skills for media generation or generative art could overlap and trigger for the wrong skill; it is specific but not clearly conflict-free.	2 / 3
	Total	11 / 12 Passed

Validation

87%

Warnings & errors only

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

Validation — 14 / 16 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (571 lines); consider splitting into references/ and linking	Warning
metadata_field	'metadata' should map string keys to string values	Warning

	Total	14 / 16 Passed

Repository: MiniMax-AI/skills
Path: skills/frontend-dev/SKILL.md
Commit: 60aaae5

Reviewed: ~1 month ago

Table of Contents

Discovery Implementation Validation

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.