hyperframes-slide

HyperFrames Slide Deck

Role

This skill is the top-level assembly skillfor 1920×1080 HyperFrames slide decks.

• It oversees the overall deck structure, slide type selection, data-skill values, and timeline flow.
• For the detailed HTML/CSS/GSAP implementation of individual slides, the subordinate hyperframes-slide-work-* skill is the source of truth.
• hyperframes-overviewis merely a static review page generator. Slide type and layout decisions are made first in this skill.
• Instagram/SNS card news is not the target of this skill. For card news, use hyperframes-card-news.

Subordinate Slide Skill Structure

When creating or modifying slides, choose a type from the table below and apply the corresponding subordinate skill together.

data-skill	Subordinate Skill	Purpose
title	hyperframes-slide-work-title	Opening/section/closing with only a title + optional subtext
title-bullets	hyperframes-slide-work-title-bullets	Large title + key bullet explanations
title-image	hyperframes-slide-work-title-image	Large title + representative image/screenshot
title-tags	hyperframes-slide-work-title-tags	Large title + keyword tag group
split	hyperframes-slide-work-split	Split image/chart and description left-right or top-bottom
stat	hyperframes-slide-work-stat	Emphasize large numbers/KPIs/metrics
steps	hyperframes-slide-work-steps	Sequential process with 3 or more steps
compare	hyperframes-slide-work-compare	Compare 2–4 items side by side
evolution-flow	hyperframes-slide-work-evolution-flow	Existing state → improved state, before/after flow
quote	hyperframes-slide-work-quote	Emphasize a key sentence/quote at a large size
kindergarten-notice	hyperframes-slide-work-kindergarten-notice	Kindergarten·daycare parent notice/play record style

Do not create arbitrary types. If a new type is needed, first create a hyperframes-slide-work-<type> subordinate skill and register it in this table.

Default Canvas and Common Rules

• Canvas: 1920×1080, 16:9.
• Root: <div id="root" data-composition-id="main" data-start="0" data-duration="..." data-width="1920" data-height="1080">.
• 각 visible slide는 class="scene clip"and has data-start, data-duration, data-track-index.
• The default slide duration is 6 seconds. If there is a lot to read, increase it to 7–8 seconds.
• The default font prioritizes Paperlogy:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/subsets/Paperlogy-dynamic-subset.css">
  

  html, body { font-family: "Paperlogy", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; }
  

• The GSAP timeline must be created as paused and registered in window.__timelines["main"].
• Use only deterministic logic. Date.now(), Math.random(), runtime fetch is prohibited.

Work Order

1. Classify Request Intent

   • If it is a 16:9 presentation/explanation slide, use this skill.
   • If it is Instagram/SNS card news, switch to hyperframes-card-news.
   • Even if only an overview is requested, slide type decisions are based on this skill.

2. Select Slide Type

   • Choose one of the data-skill from the table above according to the message purpose.
   • Read the subordinate hyperframes-slide-work-* skill for the selected type and follow its structure, CSS, and GSAP patterns.

3. index.html Modification

   • For new slides, use the id="s-N" rule.
   • data-startaligns with the previous slide's end time.
   • Root data-durationis updated to match the total length.
   • Add the child skill's GSAP entrance pattern to the timeline.

4. overview.html sync

   • If the user is viewing the overview or needs to review the slide content, hyperframes-overview와 hyperframes-overview-editis used together.
   • Add the same slide as a static DOM and data-slide="N" + data-skill="<type>"is attached.
   • Update the overview's total slide count, footer N / total, and left thumbnail sync structure.

5. Validation

   • If you modified the HTML composition, run npx hyperframes lint topics/<주제>.
   • Errors must always be fixed. Warnings related to seek/visibility must also be resolved before rendering.
   • Video rendering is executed only when the user explicitly requests it, per project rules.

Type selection criteria

• A single title is the entire message → title
• Organize the key points as text → title-bullets
• A representative image/screenshot is the focus → title-image
• Compress into a bundle of keywords → title-tags
• Both visual materials and explanations are needed → split
• The number itself is the message → stat
• There is a sequence of 3 or more steps → steps
• Compare multiple options or items side by side → compare
• The change between the previous state and the later state is the key → evolution-flow
• You want to keep one sentence on screen for a long time → quote
• It is in the tone of a daycare/kindergarten parent guide → kindergarten-notice

hyperframes-overviewRelationship with

hyperframes-overviewhandles only the following.

• index.html's slides into overview.htmlfor static review
• Provides left thumbnails, right details, Aim, and Edit UI
• Provides live/static serving flow

The slide type table, child skill selection, and data-skill allowlist are handled by this hyperframes-slide skill. When creating or updating an overview, follow this skill's type decisions first.