New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Key Layout

by notivn in notivn/AIEV

Main key / related key layout on the video - the MAIN KEY (topic/hook) sits in a band at the TOP of the video, the RELATED KEYS in a band at the BOTTOM (above the caption area), timed to whatever is…

MITAuto-check passedMedia & Creative

Install Key Layout

skills CLI
$ npx skills add notivn/AIEV --skill key-layout -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install notivn/AIEV key-layout --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/notivn/AIEV.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/key-layout .claude/skills/key-layout && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
key-layout
GitHub stars
126
Token cost
~1.4k tokens
SKILL.md length
836 words
Files
1
Skills in repo
14
Repo updated
First seen
Licence
MIT

At a glance

Main key / related key layout on the video - the MAIN KEY (topic/hook) sits in a band at the TOP of the video, the RELATED KEYS in a band at the BOTTOM (above the caption area), timed to whatever is…

  • Works in 4 steps: Frame at ~1s: the main key has entered,… → A frame in the middle of each related… → A frame during a punch-in zoom: both… → …
  • Tasks that involve Video production
  • SKILL.md covers ⚖️ STYLE DESIGN - PRECEDENCE…, Choosing the keys (when the…, Band positions (9:16 -… and Typography & style, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Key Layout is an agent skill from notivn/AIEV. Main key / related key layout on the video - the MAIN KEY (topic/hook) sits in a band at the TOP of the video, the RELATED KEYS in a band at the BOTTOM (above the caption area), timed to whatever is being said. Read this when the brief enables "Bố cục Key" (keyLayoutEnabled) or the edit prompt contains the section "Bố cục Key: BẬT".

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Media & Creative, covering Video production and Motion graphics. The repository describes itself as: Automatic AI video editing. Claude directs HyperFrames (HTML + GSAP motion graphics) and Remotion (timeline assembly) to turn raw footage into a finished MP4 - transcript… The licence is MIT.

When your agent uses it

  • Tasks that involve Video production
  • Tasks that involve Motion graphics

Example prompts

  • “Bố cục Key”
  • “Bố cục Key: BẬT”
  • “/key-layout”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Frame at ~1s: the main key has entered, sits in the top band, does not cover the face, and its Vietnamese diacritics are complete (zoom 3×).
  2. A frame in the middle of each related key: correct bottom band, not covering the captions, not spilling into the safe zone.
  3. A frame during a punch-in zoom: both bands STAY PUT (they must not zoom along).
  4. The brightest frame of the footage: the keys are still clearly readable (scrim/shadow is sufficient).

What it can do on your machine

Read from SKILL.md and the folder at commit 1a4c2b0. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Key Layout loads about 1.4k tokens when it runs. Until then it costs about 86 tokens; SKILL.md has 836 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~86
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from notivn/AIEV at commit 1a4c2b0, republished under its MIT licence (© notivn). 836 words, ~1,424 tokens.

Download SKILL.mdSave it as .claude/skills/key-layout/SKILL.md (or your agent's skills folder).
name
key-layout
description
Main key / related key layout on the video - the MAIN KEY (topic/hook) sits in a band at the TOP of the video, the RELATED KEYS in a band at the BOTTOM (above the caption area), timed to whatever is being said. Read this when the brief enables "Bố cục Key" (keyLayoutEnabled) or the edit prompt contains the section "Bố cục Key: BẬT".

Goal: a viewer scrolling past instantly knows what the video is about (main key, always on top) and which point is being made right now (related key, changes with the content, at the bottom).

⚖️ STYLE DESIGN - PRECEDENCE RULE

If the edit prompt has a "STYLE DESIGN (BẮT BUỘC TUÂN THỦ 100%)" section -> the key colors/fonts/tone come ENTIRELY from that style. If it does not -> use the default branding of the format skill in use.

Choosing the keys (when the user does not specify them)

  • MAIN KEY: ONE phrase of 2–6 words summarizing the topic/hook of the whole video (e.g. "MCP chính thức của TikTok", "Review iPhone 17 Pro"). Take it from the transcript - prefer a phrase that is repeated often or sits in the hook sentence. Do NOT use a whole long sentence; no trailing punctuation.
  • RELATED KEYS: 3–6 phrases of 1–4 words, each one a SINGLE point made in the video (a feature, a number, a proper noun, a process step). Each key is pinned to the timestamp where that point is mentioned (from the transcript's word timestamps). If the user supplies a list -> use ALL of it, in the order the content mentions them.

Band positions (9:16 - 1080×1920; other ratios convert by %)

Bandy rangeNotes
MAIN KEY (top)~96–345px (5–18% of height)Horizontally centered; AVOID covering the face (faces usually start ~20%)
RELATED KEYS (bottom)~1290–1490px (67–78%)ABOVE the caption area (captions sit at bottom: ~372px = y>=1548)
  • 16:9 (1920×1080): main key at y ~54–190px; related keys at y ~700–840px, captions at the very bottom.
  • The TikTok safe zone still applies: bottom 15% + right 12% - the bottom band must not spill into those two areas.
  • Both bands are STATIC layers relative to the camera: do NOT put them inside the zoomed wrapper (#face-wrapper) - just like captions, otherwise the keys drift/get clipped on punch-in.

Typography & style

  • Main key: the style's heading font, weight 800, size ~64–88px (at 1080w), 1 line (if too long, reduce the size; do not wrap to 2 lines unless <=2 words per line). Primary color or a primary→secondary gradient (background-clip:text - you MUST include the Vietnamese diacritics fix, production-verified in the noti-tiktok-vn skill: line-height: 1.0 + padding-top: 0.5em + padding-bottom: 0.14em).
  • Related keys: pill/chip - font size ~38–48px weight 700, padding 14px 28px, 999px radius, glass background (rgba of the style background + blur) or a soft accent background, text in the style's text/accent color.
  • Readable over any footage: behind the main key band add a soft scrim (background: linear-gradient(180deg, rgba(0,0,0,0.45), transparent) covering ~0–20% of the top of the video, color taken from the style's background) or a strong text-shadow - verify with a snapshot on the BRIGHTEST frame.
Show full SKILL.md (389 more words)Show less

Timing & animation (GSAP - deterministic, no setTimeout/random)

  • Main key: enters ONCE at ~0.3–0.8s (reveal y 30→0 + opacity, power3.out 0.5s), then STAYS PUT for the whole video (a very subtle glow/breathing scale of ±1.5% with a cycle >=3s is allowed). For a long video split into chapters, the main key may change once per chapter.
  • Related keys: each key enters exactly when its point starts being said (per the word timestamps), holds 2.5–4s then exits. Enter: y 24→0 + opacity 0→1, 0.35s power3.out; exit: opacity→0 + y→-12, 0.3s. Only 1 key visible at a time (up to 2 if two points run together); keys are >=1s apart.
  • A related key appearing SHOULD line up with a light accent SFX (pop.mp3/ting, volume 0.4) if the brief enables SFX.

Working with the other layers

  • Main key ↔ kinetic typography: when a scene has a large kinetic title in the top area (e.g. the hook scene), HIDE the main key during that scene (avoid two large texts on top of each other) - the main key returns from the next scene.
  • Related keys ↔ captions: two separate layers that must never overlap (the bottom band sits ABOVE the captions).
  • Related keys ↔ spec cards/stat callouts: while a card occupies the bottom band, DELAY the key until the card exits.

Verify (mandatory before reporting done)

Extract frames with ffmpeg and Read each image:

  1. Frame at ~1s: the main key has entered, sits in the top band, does not cover the face, and its Vietnamese diacritics are complete (zoom 3×).
  2. A frame in the middle of each related key: correct bottom band, not covering the captions, not spilling into the safe zone.
  3. A frame during a punch-in zoom: both bands STAY PUT (they must not zoom along).
  4. The brightest frame of the footage: the keys are still clearly readable (scrim/shadow is sufficient).

Known issues

  • Vietnamese gradient text losing its diacritics -> apply the line-height: 1.0 + padding-top: 0.5em + padding-bottom: 0.14em fix (verified, see noti-tiktok-vn).
  • Putting a band inside #face-wrapper -> the key scales with the zoom and drifts out of place. The band must be a sibling.
  • The main key covering the hook title in the opening scene -> hide the main key in scenes with a large kinetic title.
  • Too many related keys flashing in a row -> viewers get tired; keep the pace at >=1 key per 4s, each key >=2.5s.

© notivn, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/key-layout of notivn/AIEV.

Open the folder on GitHubat commit 1a4c2b0

Compare with similar skills

Key Layout next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Key Layout compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Key Layout this skillnotivn/AIEV126—~1.4kAutomated safety check: PassMIT
HyperFrames Animationheygen-com/hyperframes58k3 repos~2.1kAutomated safety check: PassApache-2.0
Stitch to Remotion Walkthrough Videosgoogle-labs-code/stitch-skills8.4k6 repos~3.2kAutomated safety check: NotesApache-2.0
Faceless Explainer Videoheygen-com/hyperframes58k3 repos~7.5kAutomated safety check: NotesApache-2.0
Video ShotcraftVincentwei1021/video-shotcraft10k—~2.6kAutomated safety check: PassApache-2.0
Figma to HyperFramesheygen-com/hyperframes58k3 repos~4.5kAutomated safety check: NotesApache-2.0

Similar skills

  • HyperFrames Animation

    heygen-com/hyperframes

    Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.

    58k GitHub starsUsed in 3 repos~2.1k tokens
    Media & CreativeAuto-check passed

  • Stitch to Remotion Walkthrough Videos

    google-labs-code/stitch-skills

    Official

    Builds walkthrough videos from Stitch design projects using Remotion, with transitions, zoom effects and text overlays on each screen.

    8.4k GitHub starsUsed in 6 repos~3.2k tokens
    Media & CreativeAuto-check: notes

  • Faceless Explainer Video

    heygen-com/hyperframes

    Turns an article, notes or a topic brief into an explainer video whose visuals are invented per scene, built frame by frame in HyperFrames with no footage.

    58k GitHub starsUsed in 3 repos~7.5k tokens
    Media & CreativeAuto-check: notes

  • Video Shotcraft

    Vincentwei1021/video-shotcraft

    Makes cinematic product videos with Remotion from shot recipe cards, a ready template, real page screenshots, camera moves and sound design, or builds a single animated shot.

    10k GitHub stars~2.6k tokensUpdated 2 days ago
    Media & CreativeAuto-check passed

  • Figma to HyperFrames

    heygen-com/hyperframes

    Imports Figma assets, brand tokens, components and motion into a HyperFrames video composition, using the Figma REST API with a connector or native export for shaders.

    58k GitHub starsUsed in 3 repos~4.5k tokens
    Media & CreativeAuto-check: notes

  • HyperFrames Video Entry Point

    heygen-com/hyperframes

    Entry point for making, editing and rendering videos from HTML compositions with HyperFrames, routing each request to the right workflow.

    58k GitHub starsUsed in 3 repos~5.2k tokens
    Media & CreativeAuto-check passed

More from notivn/AIEV

All 14 skills in this repo

  • Background Music

    notivn/AIEV

    Pick background music from the assets/music/ library and configure auto-ducking (music dips automatically under speech) via meta.json audio.music for the Remotion assembly layer.

    126 GitHub stars~1.1k tokensUpdated 8 days ago
    Auto-check passed

  • Color Grading

    notivn/AIEV

    Color grading video in the AI Edit Video system - delog/tonemap HDR-HLG-log footage, apply the color preset the user approved in the UI, and the visual verification workflow.

    126 GitHub stars~932 tokensUpdated 8 days ago
    Auto-check passed

  • Noti Tiktok Full Text

    notivn/AIEV

    Build a Vietnamese vertical TikTok explainer in the "MỔ XẺ PAPER AI" (AI paper dissection) format with HyperFrames (HTML/CSS/GSAP → MP4), Noti.vn style.

    126 GitHub stars~4.8k tokensUpdated 8 days ago
    Auto-check passed

  • Skill Authoring

    notivn/AIEV

    The standard for writing new skills for the AI Edit Video system - file structure, frontmatter, tone of voice, and how to accumulate production lessons into skills.

    126 GitHub stars~925 tokensUpdated 8 days ago
    Auto-check passed

  • Noti Tiktok Vn

    notivn/AIEV

    Edit a Vietnamese vertical TikTok video (9:16) with HyperFrames following the Noti.vn/GĐT standard - talking-head + kinetic typography + karaoke captions + zoom/punch-in camera + timestamp-synced…

    126 GitHub stars~5.4k tokensUpdated 8 days ago
    Auto-check passed

  • Noti Youtube Edit

    notivn/AIEV

    Build a Vietnamese landscape 16:9 YouTube video (1920×1080) with HyperFrames (HTML/CSS/GSAP → MP4), keeping the Noti.vn/GĐT branding inherited from noti-tiktok-vn.

    126 GitHub stars~5.6k tokensUpdated 8 days ago
    Auto-check passed

Categories

Questions about Key Layout

What does Key Layout do?

Main key / related key layout on the video - the MAIN KEY (topic/hook) sits in a band at the TOP of the video, the RELATED KEYS in a band at the BOTTOM (above the caption area), timed to whatever is…. Key Layout is an agent skill from notivn/AIEV. Main key / related key layout on the video - the MAIN KEY (topic/hook) sits in a band at the TOP of the video, the RELATED KEYS in a band at the BOTTOM (above the caption area), timed to whatever is being said.

When should I use Key Layout?

Key Layout fits situations like: tasks that involve Video production; tasks that involve Motion graphics.

How do I install Key Layout in Claude Code?

Run `npx skills add notivn/AIEV --skill key-layout -a claude-code`. Or copy the skill folder (.claude/skills/key-layout in notivn/AIEV) into .claude/skills/key-layout in your project. Claude Code loads it when a task matches its description.

How do I install Key Layout in Codex?

Run `npx skills add notivn/AIEV --skill key-layout -a codex`. Or copy the skill folder (.claude/skills/key-layout in notivn/AIEV) into .agents/skills/key-layout in your project. Codex loads it when a task matches its description.

Can I use Key Layout in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add notivn/AIEV --skill key-layout -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/key-layout, .gemini/skills/key-layout, .github/skills/key-layout and .opencode/skills/key-layout in your project.

What does Key Layout need to run?

SKILL.md names no scripts, command-line tools or credentials: Key Layout is instructions for the agent only.

Does Key Layout access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Key Layout safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Key Layout use?

Key Layout is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Key Layout use?

About 1.4k tokens (SKILL.md is roughly 5.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Key Layout?

Skills that share tags, products or a category with Key Layout: HyperFrames Animation (heygen-com/hyperframes, 58k stars), Stitch to Remotion Walkthrough Videos (google-labs-code/stitch-skills, 8.4k stars), Faceless Explainer Video (heygen-com/hyperframes, 58k stars) and Video Shotcraft (Vincentwei1021/video-shotcraft, 10k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Key Layout?

notivn (a GitHub organization) maintains it in notivn/AIEV, which has 126 GitHub stars. The repository holds 14 skills in this directory. The repository was last updated on September 29, 2026.

Source: notivn/AIEV on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.