frame-bold-signal

Agent Skills › nexu-io/html-video › frame-bold-signal

frame-bold-signal

GitHub

用于创建高冲击力的章节分隔或标题卡。包含暗底渐变、大号章节号入场、橙色焦点卡片滑动及标题上升动画。严格遵循配色与内容纪律，支持无障碍模式，适用于演示文稿中的关键信息展示。

templates/frame-bold-signal/SKILL.md nexu-io/html-video

Trigger Scenarios

需要醒目的章节或段落分隔符制作具有视觉冲击力的大标题启动画面展示核心主张或重要数据的高亮卡片

Install

npx skills add nexu-io/html-video --skill frame-bold-signal -g -y

More Options

Non-standard path

npx skills add https://github.com/nexu-io/html-video/tree/main/templates/frame-bold-signal -g -y

Use without installing

npx skills use nexu-io/html-video@frame-bold-signal

指定 Agent (Claude Code)

npx skills add nexu-io/html-video --skill frame-bold-signal -a claude-code -g -y

安装 repo 全部 skill

npx skills add nexu-io/html-video --all -g -y

预览 repo 内 skill

npx skills add nexu-io/html-video --list

SKILL.md

Frontmatter

{
    "od": {
        "mode": "video",
        "preview": {
            "type": "html",
            "entry": "index.html",
            "reload": "debounce-100"
        },
        "surface": "video",
        "featured": 0,
        "scenario": "video",
        "upstream": "https:\/\/github.com\/zarazhangrui\/frontend-slides",
        "design_system": {
            "requires": false
        },
        "example_prompt": "Use the Bold Signal Frame template to turn my section into a bold colored-card divider — a big section number, a nav breadcrumb, and a vibrant orange card sliding in from the right with the title rising. Preserve the template's visual signature, use real content, and avoid lorem ipsum or placeholder images.",
        "example_prompt_i18n": {
            "zh-CN": "用「大胆信号卡帧」模板把我的章节做成一段大胆色卡分隔:大编号 + 导航面包屑 + 鲜橙卡片从右滑入 + 标题升起。保持模板的视觉签名,使用真实内容,避免 lorem ipsum 和占位图片。"
        }
    },
    "name": "frame-bold-signal",
    "tags": [
        "bold",
        "card",
        "dark",
        "orange",
        "section",
        "signal",
        "frame"
    ],
    "emoji": "🔶",
    "en_name": "Bold Signal Frame",
    "zh_name": "大胆信号卡帧",
    "category": "video",
    "featured": 0,
    "scenario": "video",
    "example_id": "sample-frame-bold-signal",
    "aspect_hint": "1920×1080 (16:9)",
    "description": "Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising.",
    "recommended": 6,
    "example_desc": "章节分隔 \/ 大胆陈述 — 橙卡从右滑入 + 标题升起",
    "example_name": "大胆信号帧 · 01\/04",
    "en_description": "Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising.",
    "example_format": "markdown",
    "zh_description": "大胆信号卡帧:暗渐变底 + 大编号 + 导航面包屑 + 橙色卡片滑入 + 标题升起, 高冲击力",
    "example_tagline": "暗渐变底 + 橙色焦点卡 + 大编号",
    "example_source_url": "https:\/\/github.com\/zarazhangrui\/frontend-slides",
    "example_source_label": "frontend-slides · Bold Signal (MIT)"
}

【模板: 大胆信号卡帧 (Bold Signal)】【意图】章节/段落分隔 / 大胆 launch 陈述 / 高冲击标题卡。视觉提炼自 frontend-slides 的 Bold Signal 预设 (MIT, © Zara Zhang)。

【画布】1920×1080, 暗底 #1a1a1a + 135° 渐变 (#1a1a1a → #2d2d2d → #1a1a1a)。

【字体】display Archivo Black (900); body Space Grotesk 400/500/700。

【主结构 (时间轴, 默认 4s)】

0.2s 左上巨大 section number (Archivo Black 96px, 如 01/04, 斜杠后半 opacity 0.3) 从上方 rollIn。
0.4s 起 右上 nav breadcrumb 错峰淡入: active 项 #FF5722 橙 opacity 1, 其余白 opacity 0.35。
0.6s 橙色焦点卡 (#FF5722, 圆角 36px 仅左侧, 占右 ~1180px) 从 translateX(110%) 滑入, 带橙色柔影。
1.15s 卡内 label (uppercase, letter-spacing 4px) fadeUp。
1.3s 卡内大标题 (Archivo Black 130px, 深色 #1a1a1a on 橙) fadeUp。
1.6s 左下 footer (橙色 tick 短条 + system 标签) 淡入。