Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Frame Logo Outro · nexu-io | DecimalAI

nexu-io/frame-logo-outro

SkillScore36Maintained

Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕

design-mediaby nexu-io

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/nexu-io-frame-logo-outro/SKILL.md

decimalai skills pull nexu-io-frame-logo-outro --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/nexu-io-frame-logo-outro/SKILL.md https://app.decimal.ai/s/nexu-io-frame-logo-outro/SKILL.md

Raw file: /s/nexu-io-frame-logo-outro/SKILL.md ↗ · machine-readable summary at /s/nexu-io-frame-logo-outro.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 47d ago

Yes — +9% lift · at higher cost+39% tokens0% turns36% of whole cases pass with skill (8/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-08	✗→✓	▲ Improved	12%	0%
case-09	✗→✓	▲ Improved	12%	0%
case-11	✗→✓	▲ Improved	219%	0%
case-17	✗→✓	▲ Improved	8%	0%
case-21	✗→✓	▲ Improved	9%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

nexu-io / html-anything

next/src/lib/templates/skills/frame-logo-outro/SKILL.md

View on GitHub ↗

License Apache-2.0Imported 8/3/2026Version v1

Skill contents

SKILL.md

【模板: Logo 收尾帧 (Logo Outro)】【意图】视频结尾的品牌 reveal 帧 —— logo 分块拼装 + glow bloom + tagline 上浮 + CTA。Inspired by hyperframes logo-outro。

【画布】1920×1080, 黑色 #08090c 或品牌深色背景; 加微妙 vignette radial-gradient(...) 让中心更亮。

【布局】

中心 Logo: 用 CSS / 内联 SVG 绘制; 由 4-8 个几何块 (圆 / 方 / 三角 / hairline) 组成。
入场动画: 每个块从屏幕外滑入 (±100px 不同方向) + scale 1.4→1.0 + opacity 0→1, 错峰 80ms; 总时长 1.2s。
入场完成后, 整个 logo 加 glow bloom: filter: drop-shadow(0 0 24px <accent>40); 同时一道 shimmer mask-image 横扫 logo (500ms)。
品牌名: logo 下方 6-8% 位置, 大字 (Inter Tight / SF Pro Display, 48-72px, weight 700, letter-spacing -0.02em), 入场: typewriter or fade-up after logo bloom (1.4s 开始)。
Tagline: 品牌名下方一行 (24-28px, weight 400, opacity 0.7), fade in (1.8s)。
底部 CTA + 元数据: 双行底部 row, 例如 htmlanything.dev · @htmlanything · 2026, 11px uppercase letter-spacing 0.16em, 颜色 opacity 0.4, hairline 分隔。

【调色 — 4 选 1, 不混用】

🌌 Midnight Indigo — bg #08090c, accent #7c5cff (霓虹紫蓝 glow)。
🌅 Solar Amber — bg #0e0a08, accent #ffb547 (暖琥珀)。
🌿 Forest Mint — bg #0a1410, accent #5fb38a (薄荷绿)。
⚪ Bone & Ink — bg #f1efea, accent #0a0a0b (无 neon, 走 editorial 风, glow 改成阴影)。

【设计细节】

绝不: 用外链 logo 图片; logo 必须用纯 CSS / 内联 SVG 几何绘制。
入场动画用 @keyframes + animation-delay; 可被 prefers-reduced-motion 关闭。
字体: 西文 Inter Tight / SF Pro Display / Manrope; 中文 Noto Sans SC weight 700。
必须用用户提供的品牌名 + tagline; 若没有, 跑 fallback "HTML Anything" / "Anything → beautiful HTML"。
单文件 HTML; 整个动画完成后 freeze (不要 loop, 这是视频结尾帧)。
顶部可选 5px ribbon (accent 色) 增加品牌识别。

Illustrative Want to see what nexu-io/frame-logo-outro would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/12/2026, 00:47 UTC · 22 cases

Lift

+9%

36% vs 27%

Agent turns

0%

1.0 vs 1.0

Tokens

+39%

6,793.64 vs 4,886.27

fail → pass · 5pass → pass · 3fail → fail · 11pass → fail · 3

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-10 Design a 1080p HTML video closing card for print publication 'Standard Review' with tagline 'Essays on Modern Culture'. I want a light off-white editorial paper aesthetic without neon lights or bright bloom filters.	fail→fail	23,885	30,581	+28%	1	1	0%	4,812	6,903	+43%	0	0	—
case-01 I need a single-file HTML animated video outro frame for my tech company 'Nexus Stream'. The screen should be 1920x1080 with a dark vignette background. Please draw a geometric brand logo using pure inline SVG or CSS shapes where individual pieces slide into place with a staggered animation, followed by a light glow and shimmer effect. Below the logo, display our brand name and tagline 'Real-time Analytics at Scale', then finish with a faint bottom row containing our website URL and copyright metadata. Ensure the animation freezes on the final frame without looping.	fail→fail	29,630	27,615	-7%	1	1	0%	6,257	6,973	+11%	0	0	—
case-02 Can you build a full-screen 1080p logo reveal card in HTML/CSS to put at the end of my video edits? It needs to assemble a multi-part geometric mark using inline SVG without external images. The logo elements should slide in from offset positions, trigger a bloom effect once joined, and then reveal the text 'Aura Design' and tagline 'Crafting Digital Motion'. Include a clean footer bar with uppercase social links separated by hairline dividers. It must be self-contained in one file and stop animating once completed.	fail→fail	28,100	26,410	-6%	1	1	0%	6,252	6,968	+11%	0	0	—
case-03 Create an end-card animation web page for a video outro using pure HTML and CSS. The canvas needs a dark styled background, featuring a center emblem made of geometric SVG blocks that animate into view piece by piece. After the logo forms and glows, transition in the brand title 'Kinetix Media', a supporting tagline below it, and a CTA footer at the bottom. Make sure it uses keyframe transitions, handles reduced motion preferences, and stays static on the final frame.	fail→fail	27,555	26,940	-2%	1	1	0%	6,237	6,952	+11%	0	0	—
case-04 How do I align items vertically centered inside a CSS flexbox navigation bar header for a responsive marketing site?	pass→pass	11,432	23,506	+106%	1	1	0%	2,292	6,167	+169%	0	0	—
case-05 How do I encode a WebM video file with an alpha transparency channel to MP4 using FFmpeg on the macOS command line?	pass→fail	13,471	25,225	+87%	1	1	0%	2,418	6,883	+185%	0	0	—
case-06 How do I write an HTML5 canvas script that creates an interactive particle starfield background that moves on mouse hover?	pass→fail	18,441	28,809	+56%	1	1	0%	3,981	6,880	+73%	0	0	—
case-07 Build a video end-frame HTML page for 'Vectra AI' with tagline 'Intelligence Unbound'. I want a dark neon purple-blue aesthetic background with glow bloom effects. Include full geometric inline SVG logo assembly.	fail→fail	26,461	29,198	+10%	1	1	0%	6,186	6,901	+12%	0	0	—
case-08 Create a 1920x1080 animated HTML end-card for 'Solstice Audio' with tagline 'Warm Analog Sound'. I want a rich warm amber dark theme background. Do not load external image files.	fail→pass	27,992	25,059	-10%	1	1	0%	6,188	6,903	+12%	0	0	—
case-09 Construct a single-page HTML video outro frame for 'EcoTrace' and tagline 'Carbon Footprint Tracking'. Use a dark mint green palette theme with central geometric vector logo reveal.	fail→pass	27,007	25,786	-5%	1	1	0%	6,177	6,893	+12%	0	0	—
case-11 I need an HTML video end card for 'Hyperion'. Should I load a high-res PNG logo file from my web server via an <img> tag to ensure clean rendering during the slide animation?	fail→pass	11,522	25,515	+121%	1	1	0%	2,060	6,568	+219%	0	0	—
case-12 Create an HTML end-screen card for 'Gridlock Security'. The logo consists of 6 distinct geometric polygon tiles. How should the animation timing be configured so the shapes assemble smoothly into place?	fail→fail	23,188	28,407	+23%	1	1	0%	5,218	6,896	+32%	0	0	—
case-13 Produce a single-file HTML video logo reveal for 'Lumina Dynamics'. After the center inline SVG icon pieces combine, add a light sweep mask effect across the mark before revealing the text.	fail→fail	30,581	27,063	-12%	1	1	0%	6,179	6,895	+12%	0	0	—
case-14 Build a web end-card for 'Aether' with tagline 'Elevate Your Digital Experience'. Configure the CSS animation schedule so the secondary tagline text enters after the brand title visual sweep finishes.	fail→fail	20,712	26,496	+28%	1	1	0%	4,521	6,896	+53%	0	0	—
case-15 Create an HTML video end-card for 'DevPulse' with website link 'devpulse.io' and copyright text in the footer. How should the bottom metadata strip be styled?	fail→fail	16,152	25,164	+56%	1	1	0%	3,600	6,367	+77%	0	0	—
case-16 I am recording an HTML web page using screen capture software to export as an MP4 video outro. I want the CSS animations to run once when the page loads and then remain frozen in their final visible positions indefinitely.	pass→pass	11,411	30,078	+164%	1	1	0%	2,002	6,900	+245%	0	0	—
case-17 Create a 1920x1080 animated HTML end-card for 'Apex Motion' with an accent color line along the top border of the frame to reinforce brand presence.	fail→pass	29,645	26,402	-11%	1	1	0%	6,180	6,667	+8%	0	0	—
case-18 Author a 1080p HTML closing video frame for Chinese brand '云舟科技' with tagline '连接未来 (Connecting the Future)'. Ensure proper font rendering for Simplified Chinese typography.	fail→fail	26,485	29,094	+10%	1	1	0%	6,181	6,897	+12%	0	0	—
case-19 Generate a single-file HTML video outro animation card, but I haven't decided on my company name or tagline yet. Produce the complete single-file animated page template.	pass→fail	25,931	25,759	-1%	1	1	0%	6,176	6,892	+12%	0	0	—
case-20 Construct a 1920x1080 HTML end-card template for 'Orbit Labs'. What CSS background technique should be applied to make the center of the viewport noticeably brighter than the edges?	pass→pass	22,270	24,787	+11%	1	1	0%	4,931	6,543	+33%	0	0	—
case-21 Generate an HTML end-screen video card for 'Synthetix'. After the central geometric icon completes its glow bloom, at what keyframe offset should the brand title text animation begin?	fail→pass	29,458	26,320	-11%	1	1	0%	6,107	6,629	+9%	0	0	—
case-22 Design an HTML logo outro end-frame for 'Nordic Minimal'. How should the primary brand name header text be styled for clean typographic kerning?	fail→fail	18,958	25,186	+33%	1	1	0%	3,543	6,887	+94%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +9 percentage points is the difference between those two pass rates over the 22 comparable cases. 3 cases got worse with the skill loaded, and they are included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 27.3%
Pass rate with the skill: 36.4%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 3
Skill version measured: v1
Run completed: 8/12/2026, 00:47 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-08

Prompt

Create a 1920x1080 animated HTML end-card for 'Solstice Audio' with tagline 'Warm Analog Sound'. I want a rich warm amber dark theme background. Do not load external image files.

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run36

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+113% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 47 days ago

Other measured skills in the registry, with their headline benchmark lift.