Ready to supercharge your AI agents?

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

Get Started Free →

Frame Glitch Title · nexu-io | DecimalAI

nexu-io/frame-glitch-title

NewSkillScoreMaintained

数字故障 / 像散偏移 / 数据腐败标题, 适合视频转场 / cyberpunk hero

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-glitch-title/SKILL.md

decimalai skills pull nexu-io-frame-glitch-title --out .claude/skills/

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

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

Raw file: /s/nexu-io-frame-glitch-title/SKILL.md ↗ · machine-readable summary at /s/nexu-io-frame-glitch-title.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

No measurable change+29% tokens0% turns23% of whole cases pass with skill (5/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-04	✗→✓	▲ Improved	20%	0%
case-11	✗→✓	▲ Improved	39%	0%
case-14	✗→✓	▲ Improved	11%	0%
case-07	✓→✗	▼ Worse	67%	0%
case-21	✓→✗	▼ Worse	69%	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-glitch-title/SKILL.md

View on GitHub ↗

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

Skill contents

SKILL.md

【模板: 故障艺术标题帧 (Glitch Title)】【意图】单帧 hero / 视频转场 / cyberpunk 风格标题。Inspired by hyperframes glitch。

【画布】1920×1080, 背景 #070708 近黑或 CRT 暗灰 #0d0e10; 加 56px 网格 (透明 5%) + scanlines 横线 (透明 8%, 2px 间隔)。

【主标题】

居中, 6-9vw, weight 800/900, 字体 Space Grotesk Bold / Inter Tight Black / JetBrains Mono Bold。
颜色: 主层 #f5f5f7; 后面套 2 层伪影:
cyan #00f0ff translate(-3px, 1px)。
magenta #ff2bd6 translate(3px, -1px)。
整层加 clip-path 切片 5-8 段, 每段 @keyframes 随机 translateX -10px → 10px, 持续 80-160ms, 错峰播放, 营造 "data corruption" 像散。
每隔 1.5s 触发一次"重故障" — 整个标题被 horizontal smear 1 frame, 用 filter: url(#displacementFilter) 或简单 CSS 平移。

【附加层】

顶部一行 caption (uppercase mono, 11px, opacity 0.6): >> SIGNAL_LOST · CH-04 · 14:32:08。
标题下面 1 行副标 (24-28px, mono, opacity 0.7), 偶发被 ̶▒̶ 字符替换 (假乱码)。
角落随机点缀 █▓▒░ ASCII 噪点 chunks。
底部 timecode (mono, opacity 0.4)。
整画面叠 noise grain 层 background-image: url("data:image/svg+xml,...turbulence..."), opacity 6%, mix-blend-mode overlay。

【SVG 滤镜 (可选)】

定义 <filter id="rgbShift"> 用 feColorMatrix + feOffset + feMerge 把 R/G/B 三通道偏移; 整层 filter: url(#rgbShift) 在故障瞬间应用。

【设计细节】

颜色仅用: 黑 / 白 / cyan / magenta / 一点 amber 警告色; 严禁全彩虹。
字体: 西文 Space Grotesk 或 JetBrains Mono Bold; 中文 Noto Sans Mono CJK SC 或 Noto Sans SC Bold。
严禁 lorem ipsum; 必须用用户的标题 + 副标。
动效用 @keyframes, 可被 prefers-reduced-motion 关闭 (退回静态 chromatic split)。
单文件 HTML。

Illustrative Want to see what nexu-io/frame-glitch-title 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

0%

23% vs 23%

Agent turns

0%

1.0 vs 1.0

Tokens

+29%

6,733.82 vs 5,239.55

fail → pass · 3pass → pass · 2fail → fail · 14pass → 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-04 I'm creating a standalone HTML cyberpunk title card with the text 'GHOST NODE' using a 1080p canvas. I usually default to standard 40px blue gridlines over a pure pitch-black #000000 canvas. Produce a full single-file HTML layout with dark CRT aesthetic, grid lines, and scanlines.	fail→pass	24,948	27,394	+10%	1	1	0%	5,753	6,885	+20%	0	0	—
case-05 I need an HTML hero title frame for 'SYNTH WAVE'. For chromatic text shadow splits, I usually use neon red (#ff0000) and bright lime green (#00ff00) on Orbitron font. Create a dark single-file HTML glitch title layout with proper RGB offset styling.	fail→fail	20,321	25,224	+24%	1	1	0%	4,751	6,486	+37%	0	0	—
case-18 Provide an HTML hero glitch title card for 'VOID MATRIX'. I usually set headline size to 40px with normal weight. Create the title frame using large viewport-scaled heavy typography.	fail→fail	20,867	25,019	+20%	1	1	0%	4,919	6,847	+39%	0	0	—
case-02 Can you build a standalone HTML page for a sci-fi glitch title card? The title is 'VOID SHIFT' and the subtitle is 'REALITY FRACTURE DETECTED'. I want a dark CRT-style canvas with grid lines, RGB channel splitting on the main text, periodic horizontal slice distortions, and random ASCII noise elements around the edges.	fail→fail	31,101	27,925	-10%	1	1	0%	6,212	6,881	+11%	0	0	—
case-03 Create a single HTML document generating a high-impact glitch art hero frame for my stream transition. Main headline: 'CYBERSPACE 2099', secondary tag: 'UNAUTHORIZED ACCESS'. Please include digital noise overlays, animated horizontal text slice jumps, chromatic color separation shadows, a dark background with scanlines, and corner timecode metadata.	fail→fail	27,766	24,412	-12%	1	1	0%	6,210	6,880	+11%	0	0	—
case-01 I need a single-file HTML layout for a cyberpunk style video intro frame. The main text should say 'NEURAL OVERDRIVE' with a corrupted data glitch effect and chromatic color splits. Add a subtitle underneath that says 'SYSTEM ARCHITECTURE V2.0', along with subtle retro CRT scanlines, technical header/timecode metadata around the borders, and a dark background texture.	fail→fail	27,689	26,137	-6%	1	1	0%	6,219	6,887	+11%	0	0	—
case-06 Generate a cyberpunk html title card for 'DATA VAULT'. I usually leave the top metadata header blank or put 'SYSTEM ONLINE v1.0'. Generate the single-file HTML title frame complete with standard technical header indicators, title, and bottom metadata.	fail→fail	23,459	27,681	+18%	1	1	0%	5,506	6,861	+25%	0	0	—
case-07 Build an HTML glitch animation title frame reading 'QUANTUM CORE'. I usually rely solely on continuous keyframe animations without accessibility media queries. Make sure the title frame accounts for motion sensitivity accessibility.	pass→fail	18,518	28,951	+56%	1	1	0%	4,093	6,848	+67%	0	0	—
case-08 Create a cyberpunk title frame HTML page for 'NEXUS STREAM'. I normally use an external PNG image file for film grain noise or a canvas 2D particle loop. Implement a lightweight SVG turbulence texture overlay in a single HTML file.	fail→fail	26,696	24,789	-7%	1	1	0%	6,188	6,858	+11%	0	0	—
case-09 Provide a single-file HTML title frame for 'SECTOR 7' with the subtitle 'PERIMETER BREACH'. I usually use simple opacity blinking for subtitle glitches. Enhance the subtitle with visual data corruption symbols.	fail→fail	28,759	26,979	-6%	1	1	0%	6,185	6,854	+11%	0	0	—
case-10 Design an HTML cyberpunk hero title card for 'HYPER DRIVE'. I usually put generic FontAwesome icons in the canvas corners. Include retro terminal character density chunks in the canvas corners instead.	fail→fail	28,411	26,388	-7%	1	1	0%	6,178	6,847	+11%	0	0	—
case-11 Generate an HTML title frame for 'NEON HORIZON'. I'm thinking of adding a full rainbow gradient (#ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff) to give it a vibrant synthwave look. Build the title card keeping strictly to cyberpunk frame color guidelines.	fail→pass	21,976	25,569	+16%	1	1	0%	4,965	6,894	+39%	0	0	—
case-12 Construct an HTML frame for 'CORE DUMP'. For periodic heavy distortion, I usually apply CSS scale transforms every 3 seconds. Implement a periodic horizontal distortion effect using SVG displacement filters.	fail→fail	24,271	29,162	+20%	1	1	0%	5,620	6,847	+22%	0	0	—
case-13 I need an HTML title frame for a Chinese cyberpunk video title: '赛博朋克 2077'. I usually use standard 'SimSun' or 'Microsoft YaHei'. Generate the HTML title frame specifying appropriate heavy monospace Chinese typography.	fail→fail	19,078	26,774	+40%	1	1	0%	4,177	6,860	+64%	0	0	—
case-14 Create a single-file HTML glitch frame for 'NET RUNNER'. I usually animate letter-spacing to create a glitch look. Implement slice jitter using clip-path segments and rapid keyframe translations.	fail→pass	28,238	26,797	-5%	1	1	0%	6,181	6,849	+11%	0	0	—
case-15 Design an HTML CRT title screen for 'GRID LOCK'. I usually use a 10px thick black overlay bar moving top to bottom for scanlines. Implement subtle retro scanline lines across the canvas.	fail→fail	26,834	27,479	+2%	1	1	0%	6,182	6,851	+11%	0	0	—
case-16 Generate an HTML glitch title layout for 'ZERO DAY'. I usually default to 'Orbitron' or 'Roboto' for sci-fi titles. Build the title card using recommended robust modern geometric or monospace headline fonts.	pass→pass	24,533	28,197	+15%	1	1	0%	5,317	6,853	+29%	0	0	—
case-17 Build a single HTML intro frame for 'TERMINAL SPEED'. I usually put a copyright footer at the bottom. Implement a low-opacity monospace timecode display at the bottom of the canvas instead.	fail→fail	25,372	26,489	+4%	1	1	0%	5,269	6,849	+30%	0	0	—
case-19 Create a single HTML document for a glitch frame with title 'SHADOW RUN'. I normally offset RGB split layers by 20px horizontally for an exaggerated dynamic blur. Apply precise pixel offset translations for the cyan and magenta pseudo-layers.	fail→fail	26,934	27,150	+1%	1	1	0%	6,189	6,858	+11%	0	0	—
case-20 I am building a web app and need a standalone CSS keyframe animation for a smooth, continuous glowing button pulse effect on a CTA button labeled 'SUBMIT'. Can you write the CSS for a pulsing glow button?	pass→pass	11,627	16,998	+46%	1	1	0%	2,747	4,473	+63%	0	0	—
case-21 Write an HTML and JavaScript snippet to render an interactive HTML5 Canvas 2D starfield particle background with customizable speed and star density.	pass→fail	17,231	28,486	+65%	1	1	0%	4,045	6,837	+69%	0	0	—
case-22 How do I optimize web font loading using font-display: swap in CSS and preloading web font files in HTML head for faster FCP?	pass→fail	12,456	27,248	+119%	1	1	0%	2,364	6,839	+189%	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 0 percentage points is the difference between those two pass rates over the 22 comparable cases. 4 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: 22.7%
Pass rate with the skill: 22.7%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 4
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-04

Prompt

I'm creating a standalone HTML cyberpunk title card with the text 'GHOST NODE' using a 1080p canvas. I usually default to standard 40px blue gridlines over a pure pitch-black #000000 canvas. Produce a full single-file HTML layout with dark CRT aesthetic, grid lines, and scanlines.

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 signalsno signals yet

BenchmarkRun a verified benchmark with positive lift

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+41% tokens

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

No signals yet — run a benchmark or collect evaluated traces to earn a score.

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

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