SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillshyperframes-overview

hyperframes-overview

Frontend & websites

View repository

Updated 10-15 20:10

About this skill

HyperFrames Overview

Skill structure

This skill is the parent skillof overview work.

Role Skill
Overview generation, thumbnails, detail preview, Aim, serving flow hyperframes-overview
Edit button, contentEditable, live save, patch parser hyperframes-overview-edit

Users usually request just "overview". The agent applies hyperframes-overviewfirst, and applies hyperframes-overview-edittogether as a required submodule.

hyperframes-overview-editThe case where you use it independently is when fixing a missing Edit feature in an existing overview, or when the user pastes a # Overview edits — ... patch.

When to use

  • When statically reviewing a composition with about 15 slides in one topic folder
  • When checking only the final state of slides without running timeline animations
  • When you want to quickly copy a CSS selector to request a fix for a specific element
  • npx hyperframes previewWhen you need a much lighter deck viewer instead of the scrub UI
  • When the user says "preview" but the intent to edit the studio timeline is not clear

16:9 slide type selection and the data-skill allowlist are handled by the hyperframes-slide parent skill. This skill is only responsible for generating the static review page. When creating or updating an overview, first confirm the slide type in hyperframes-slide, and here reflect that type value as data-slide/data-skill.

What gets created

topics/<주제>/overview.html — single file, no framework runtime required.

  • Left strip: thumbnails of all slides (scaled to 16:9 ratio). Click to jump to that slide.
  • Right detail: shows the currently selected slide scaled from 1920×1080 to fit the viewport.
  • Navigation: ←/→, ↑/↓, Space, number keys (1–9, 0=10), top buttons.
  • Aim inspector: top-right Aim button → hover element → click → a CSS selector in the form [data-slide="3"] > div.stat:nth-of-type(2) > div.num is copied to the clipboard.
  • Edit text editing (required submodule): top-right ✎ Edit button → edit directly with contentEditable → pressing Done saves immediately to index.html + overview.html on the live server, and on the static server copies an agent-readable patch to the clipboard. For detailed implementation, snippets, and parser rules, see the hyperframes-overview-edit skill. Insert the js-slide.htmlvariant for the 16:9 standard, and the js-card.html variant for the card news standard.

Required reference: when creating or modifying overview.html with this skill, you must hyperframes-overview-edit skillmust also be applied together. If the CSS block, Edit button, or JS block is missing, the user cannot edit the text. Whether anything is missing can be checked at once with grep -L "class=\"edit-btn\"" topics/*/overview.html .

Required rules for thumbnails and export

The left strip thumbnails must be kept. However, the thumbnails must not be a separate design but a scaled-down preview of the right detail slide DOM.

  • Create the thumbnails with scene.cloneNode(true) , and specify .thumb .scene { display: flex; transform: scale(...); } . It must use the same display model as the right .detail-frame .scene.active { display: flex; } so that the scaled-down thumbnails and the editing screen layout match.
  • Thumbnail labels (.thumb-label) are hidden by default so they do not cover the slide content, and are shown only on hover.
  • After Edit → Done, for the changed slide number, clone the latest right-side DOM again with syncThumbFromScene(n) to immediately update the left thumbnail.
  • PDF/print/export must be based not on the left strip but on the original slides inside the right #detail-frame . In @media print , .strip, .main-header, hide the Aim/Edit UI, and output the entire .detail-frame .scene in 1920×1080 page units.
  • This rule applies not only to the sample topic but to all newly generated 16:9 overview.html files.

File structure

.codex/skills/hyperframes-overview/
├── SKILL.md         (이 파일)
├── template.html    (재사용 가능한 베이스 템플릿)
└── serve.sh         (로컬 HTTP 서버 실행 스크립트 — CORS 회피용)

Creation procedure

1. Check prerequisites

  • The topic must have index.html, and each scene must have the <div id="sN" class="scene clip ..." data-start="..." data-duration="..." data-track-index="..."> structure.
  • If overview.htmlalready exists, check and overwrite. First check whether there are any parts manually edited by the user.

2. Load template

template.html. This template contains the following placeholder markers:

Marker Replacement content
{{TOPIC_ID}} 예: apple-history
{{TOPIC_BRAND}} 예: Apple · 1976 — 2026 (displayed at the bottom of each slide)
{{SLIDE_COUNT}} 예: 15
{{ACCENT_HEX}} UI highlight color (matching the topic's --accent, e.g. #0A84FF)
{{ACCENT_RGB}} RGB value of the same color, for shadow (e.g. 10, 132, 255)
{{SCENE_VARS}} topic index.html의 :root { ... } copy the block contents as is
{{SCENE_STYLES}} topic index.html's scene-related CSS (.scene, .eyebrow, .scene-title, .bullets, .stats, .flow, .quote-* , etc.) in full
{{SLIDES_HTML}} HTML with each scene converted (see rules below)

3. Scene conversion rules (index.html → overview.html)

각 씬 <div id="sN" class="scene clip [center|quote]" data-start="..." ...> to the following:

  1. clip remove class, remove timing attribute (data-start, data-duration, data-track-index, data-media-start 등).
  2. id remove — anchor the selector to [data-slide="N"].
  3. Instead, add data-slide="N"과 data-skill="<type>" . N starts from 1.
  4. Inside the scene, add the brand, slide-num footer element (immediately before the closing </div> ).
  5. If elements inside the scene had id references (#s1-b1 , etc.), they were probably GSAP targets rather than for CSS matching — since there is no animation in the overview, leaving them as is is fine , but removing them is recommended to simplify selectors.

4. data-skill classification

data-skill The value follows the sub-slide skill table of the parent skill hyperframes-slide .

  • Before creating a new overview: hyperframes-slideFirst, confirm each slide type in
  • When converting from existing index.html, infer from the DOM structure, but if the inference result is ambiguous, prioritize the type selection criteria of hyperframes-slide.
  • Do not create arbitrary types. If a new type is needed, first create a sub-skill under hyperframes-slide-work-<type> and register it in the hyperframes-slide table.

5. Footer element

Add as the last child of each slide:

<div class="brand">
  <span class="brand-dot"></span>
  <span class="brand-text">{{TOPIC_BRAND}}</span>
</div>
<div class="slide-num">
  <span class="skill">{{skill}}</span>N<span class="sep">/</span>{{SLIDE_COUNT}}
</div>

The styles for these two elements are already defined in the template's shared CSS, so they do not need to be in the topic CSS.

6. Cautions when porting styles

  • topic index.html's scene CSS is mostly copied as-is, but exclude the rule that applies the fixed 1920×1080 size to the body나 html selector — in overview, the body is the entire viewport, and the scene size should be set only in the .scene { width: 1920px; height: 1080px } rule.
  • .footer-brand If there is a topic-specific footer style such as .brand/.slide-num template style.

7. After generation

  • Deck without images: works even when opened directly in the browser via the file:///...topics/<주제>/overview.html path.
  • Deck with images: serve via an HTTP server by following the "Images & CORS handling" procedure below.
  • npx hyperframes lintdoes not inspect overview.html, so no separate lint is needed.

Images & CORS handling

file://When overview.html is opened via An overview containing images must be served in an HTTP context.

Rules to follow when inserting images

  1. Paths must be relative to the topic folder only — src="assets/hero.png" ✓ / src="/Users/..." ✗ / src="file:///..." ✗
  2. Download external URL images locally in advance — do not embed remote URLs directly into <img>; instead, download them into the assets/ folder and reference them by relative path: 
    curl -o topics/<주제>/assets/hero.jpg https://example.com/hero.jpg
  3. If canvas operations are needed, crossorigin="anonymous" — add only to <img>where pixel manipulation such as getImageData is planned. Not needed for <img>used for simple display: 
    <img src="assets/hero.png" alt="..." crossorigin="anonymous" />
  4. Google Fonts is already CORS-safe — template.html의 <link rel="preconnect" ... crossorigin>handles this.
  5. CSS background-image follows the same rules — use relative paths, avoid external URLs.

Run a local HTTP server (recommended)

Use this skill folder's serve.sh. If you pass a topic path, it starts a server with that folder as the root, and you can access it in the browser at http://localhost:8765/overview.html:

bash .codex/skills/hyperframes-overview/serve.sh topics/<주제>
# 또는 포트 지정
bash .codex/skills/hyperframes-overview/serve.sh topics/<주제> 9000

The server falls back in the order python3 → python → npx serve. Exit in the terminal with Ctrl+C.

Image addition checklist

When the user requests "put an image here", handle it in the following order:

  • Place the original file in topics/<주제>/assets/ (if it is an external URL, download it with curl)
  • For that slide's index.html과 overview.html Both sides에 <img src="assets/파일명" alt="설명" /> insert
  • Adjust CSS to match the slide layout (e.g., .split-image img { width: 100%; height: 100%; object-fit: contain; })
  • If an existing preview server is off, serve.shstart the HTTP server with — file://opening via may break images, so be sure to http://로 check
  • To the user http://localhost:8765/overview.html guide the path

Principles

  • Single-file completion: Use only the Google Fonts CDN, with no external JS/CSS. The structure works even offline.
  • No animation: All elements render in their final state. Animation-related properties such as GSAP, data-start, opacity: 0 are prohibited.
  • Separation of UI chrome and scene styles: UI chrome은 --ui-* variables, and scene styles use the topic's --accent/--text , etc. Make sure they are clearly distinguished so there are no name conflicts.
  • Selector anchoring: All selectors must start with [data-slide="N"]to be reproducible. idDo not rely on or nth-child.
  • Regenerable: Recreating the overview must produce the same result. If manual customization is needed, separate it into a separate file.