CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

figma

Bring Figma into a HyperFrames video - rendered assets, brand tokens, components, storyboard frames as reconstructed motion (frames read as states, not slides), shaders and connector-assisted motion. Use when the person pastes a figma.com link or asks to use a Figma design, frame, logo or brand.

Quality

89%

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

SKILL.md
Quality
Evals
Security

Quality

Content

88%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.

An exemplary dense, operational skill body: exact commands, named library functions, explicit validation thresholds with feedback loops, and no padding or concept explanations. The remaining gaps are small — a few connector-mediated steps cannot be made executable, and progressive disclosure relies on one script plus an out-of-bundle relative path.

DimensionReasoningScore

Conciseness

The body never explains what Figma is or how the tooling works conceptually; every sentence carries operational load (e.g. 'Every import happens at build time and freezes a local file with its source recorded under `.media/`, so renders never call Figma and re-running a command re-imports only what changed'). At ~51 lines covering six workflows, every token earns its place.

5 / 5

Actionability

The main flows are copy-paste ready — `npx hyperframes figma asset '<url or fileKey:nodeId>' [more refs] --format svg|png --scale 2 --description "<what it is>"`, `motionContextToDocs(raw, { selectorFor, repeat })`, `node <SKILL_DIR>/scripts/verify-motion.mjs --reference <export.mp4> --render <render.mp4> --crop WxH+X+Y` — but the connector-based fetch ('Fetch motion context for the parent frame in one recursive request') and the shader native-export step have no executable command, leaving minor gaps versus the fully-executable anchor 5.

4 / 5

Workflow Clarity

The motion pipeline is a numbered sequence with an explicit validation gate and feedback loop ('fails under 15 dB ... A fail means fix the translation, not the threshold') plus a fallback for untranslatable tracks, and the component flow has error recovery ('an unknown token stays a literal marked `data-figma-unresolved`: import that library's tokens and re-import') alongside a hero-drift pixel check and a 401/403/429 error-remediation table. This matches the anchor-5 validate→fix→retry pattern; the storyboard section's lack of a verify step is the only gap, and it has explicit failure-mode and fallback rules instead.

5 / 5

Progressive Disclosure

Good structure: six clearly headed sections, and the one bundle reference (`scripts/verify-motion.mjs`) is real, one level deep, and invoked with its exact CLI. However the body also leans on an external conditional path (`../hyperframes/references/plugin-installation.md`) outside the skill's own bundle, and the dense storyboard/motion detail is all inlined with no further splitting — minor organization gaps versus the cleanly-split anchor 5.

4 / 5

Total

18

/

20

Passed

Description

87%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 description that explicitly covers both what the skill does and when to use it, with a clear niche and natural trigger phrasing in third person. Its only weaknesses are a noun-list style that names capability areas rather than actions, and a couple of missing natural synonyms like 'prototype'.

DimensionReasoningScore

Specificity

The description lists several concrete capability areas — 'rendered assets, brand tokens, components, storyboard frames as reconstructed motion (frames read as states, not slides), shaders and connector-assisted motion' — but delivers them as a noun list carried by a single verb ('Bring'), unlike the multi-verb anchor-5 examples, and 'shaders' slightly over-claims what the body handles via fallback-only native export. It sits noticeably above the anchor-4 midpoint but not fully at anchor 5.

4 / 5

Completeness

Both halves are explicit: the 'what' is concrete ('Bring Figma into a HyperFrames video - rendered assets, brand tokens, components, storyboard frames as reconstructed motion... shaders') and the 'when' gives concrete trigger phrases ('Use when the person pastes a figma.com link or asks to use a Figma design, frame, logo or brand'). This matches the anchor-5 example pattern exactly.

5 / 5

Trigger Term Quality

'Use when the person pastes a figma.com link or asks to use a Figma design, frame, logo or brand' gives good natural coverage (figma.com link, design, frame, logo, brand), but misses common Figma synonyms a user would naturally say such as 'prototype' or 'mockup'. Not a 3 — the terms present are natural and specific, not generic.

4 / 5

Distinctiveness Conflict Risk

A clear niche — importing from Figma into a HyperFrames video — with a distinct, unambiguous trigger ('pastes a figma.com link'). Virtually no other skill would trigger on these phrases; minimal conflict risk.

5 / 5

Total

18

/

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

relative_links

Relative link issues: 1 suspicious

Warning

Total

15

/

16

Passed

Repository

heygen-com/hyperframes

Path

skills/figma/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.