mcpbeat Sign in

Frame Glitch Title Agent Skill

Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.

933 tokens
context cost
SKILL.md, read when the skill is used
3
files
plus fonts, images or templates
0
copies elsewhere
how many repositories repackaged it
83 386
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/nexu-io/open-design --skill frame-glitch-title

What comes with it

5 160 bytes besides the instruction
example.html
example.md

The instruction itself

as written by the author

【模板: 故障艺术标题帧 (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。

Other skills for the same job

different authors, same section of the catalogue
Canvas Design
by anthropics
vendor ×16

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

3k tokens
Algorithmic Art
by anthropics
vendor ×14

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.

4.9k tokens scripts
Image Enhancer
by frostant
×6

Improves the quality of images, especially screenshots, by enhancing resolution, sharpness, and clarity. Perfect for preparing images for presentations, documentation, or social media posts.

635 tokens
JSON Canvas
by ZhanlinCui
×4

Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections. Use when working with .canvas files, creating visual canvases, mind maps, flowcharts, or when the user mentions Canvas files in Obsidian.

3.5k tokens
X Article Publisher
by ZhanlinCui
×4

Publish Markdown articles to X (Twitter) Articles editor with proper formatting. Use when user wants to publish a Markdown file/URL to X Articles, or mentions "publish to X", "post article to Twitter", "X article", or wants help with X Premium article publishing. Handles cover image upload and converts Markdown to rich text automatically.

3.1k tokens scripts zh
Video Downloader
by CommandCodeAI
×4

Downloads videos from YouTube and other platforms for offline viewing, editing, or archival. Handles various formats and quality options.

671 tokens
High End Visual Design
by lornshrimp
×3

Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.

2.6k tokens
Histolab
by christophacham
×3

Lightweight WSI tile extraction and preprocessing. Use for basic slide processing tissue detection, tile extraction, stain normalization for H&E images. Best for simple pipelines, dataset preparation, quick tile-based analysis. For advanced spatial proteomics, multiplexed imaging, or deep learning pipelines use pathml.

5.2k tokens

How to use it

Copy the folder

Take nexu-io/frame-glitch-title from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.