This skill checks HTML presentation/video output. It is not a theme, template, or layout authority. The content plan comes from / ; visual skin comes from ; this file enforces minimum quality.

An optional frontend-quality review may be used before this check as an aesthetic reference layer. It can improve composition, typography hierarchy, spatial rhythm, visual focus, and anti-generic aesthetics. It cannot override this contract.

If contains text that conflicts with , fix . Do not treat HTML as the text source.

Every visible text element must use with a minimum of 18px.

Recommended video floor:

Line-height:

Single-line labels of three characters or fewer are exempt.

Use for padding, margins, and gaps. Avoid fixed pixel spacing except for unavoidable SVG geometry or hairlines.

Minimums:

Avoid squeezing content into the center. For dense slides, use the full slide area and sequence information through animation.

Breathing room is a quality requirement, not decoration. If the slide feels crowded, remove secondary labels or split the visual into clearer states before reducing font size, narrowing gaps, or pushing elements into the subtitle area.

Avoid low-opacity chrome text such as .

Gray is not a decoration. Every muted or gray element must have a stated meaning: background context, previous state, external input, inactive option, secondary evidence, or de-emphasized but still readable material.

Rules:

The browser viewport is the video stage. Do not create a decorative dark frame around the slide.

Allowed:

Forbidden:

When an aesthetic review is used, treat it as an advisor, not as a new design system.

Allowed:

Forbidden:

All component styles, SVG strokes/fills, subtitles, and tool configuration must use normalized local tokens from .

Allowed hardcoded color values:

Forbidden:

Required token intent:

:root {
  --bg: ...;
  --text: ...;
  --muted: ...;
  --accent: ...;
  --accent-2: ...;
  --rule: ...;
  --panel: ...;
  --subtitle-bg: ...;
  --subtitle-text: ...;
  --chrome-text: ...;
}

Default stack:

This skill does not bundle runtime libraries. GSAP is the only default animation timeline tool, but it must be installed or fetched as a local dependency by the user's agent. Load it locally:

<script src="gsap.min.js"></script>

Rules:

Animation must implement the slide's field as a cognitive sequence.

Required:

Forbidden:

Screen text is the visual skeleton. Subtitles are the spoken/readable layer.

Rules:

Never place "remark text" on a slide. A remark is any on-screen sentence that explains, labels, or restates what the visual or a provided asset already expresses. Examples that fail: a caption next to a QR code saying "扫描关注", a note under a WeChat graphic saying "课程更新的固定入口", a label over an obvious diagram saying "这是架构图". If the meaning is already carried by the image, geometry, or the subtitle layer, the overlay text is redundant and must be removed.

Apply three tests before adding any non-core text:

Provided assets (QR codes, promotion graphics, screenshots, logos) are complete visual statements. Do not attach explanatory labels, captions, or duplicative search hints beside them; the asset carries that information. Do not compensate for a busy slide by adding a text footnote; remove the noise instead.

All screen text must pass the same typography and composition standards as the core slide: sizing, theme tokens, intentional placement, and a defined relationship to the layout. A single un-designed sentence in a corner reads as a leftover and fails the slide.

In the final still-frame review, flag any text element that appears to be a remark, footnote, or caption rather than a designed part of the visual. Fix the slide, not the screenshot.

In non-audio review mode, subtitles may be split by punctuation and displayed by estimated duration. Estimate each subtitle segment from its own visible length, not by dividing the slide duration equally across all segments. For Chinese teaching narration, use a recorded project rate when available; otherwise default to about 5 visible characters per second, with small punctuation pauses and min/max clamps for readability. In video/preview mode after TTS, subtitles must first be recalibrated against the measured audio duration of each slide; if word-level or sentence-level timestamps are later generated, use them to refine the schedule.

Audio preview mode must be usable as a checkpoint, not only as a hidden recording path. If is present, provide an explicit start control so the browser has a user gesture before audio playback. Preview mode may add this control, audio wiring, and timing logic, but it must not alter the static slide layout used for visual review.

Before TTS, provide a local subtitle-and-slide preview that does not read or play audio. A mode such as should use , estimated speaking rate, natural text segmentation, estimated slide duration, and a short inter-slide pause so the user can approve subtitle wording, visual matching, and rough rhythm before any remote or expensive TTS call.

After TTS exists, preview timing must use the measured audio files. Slide advance should listen for the audio event and then hold a small pause before entering the next slide, with the measured duration only as a fallback. Subtitle segments may still be split from before real word-level timestamps exist, but their display schedule must be scaled to the measured duration of the current slide rather than a fixed global character-speed estimate.

Every slide needs a page number such as .

If Decisions specify a non-empty fixed brand mark, show it as global slide chrome rather than as slide content. If is empty or , do not render a footer mark.

A slide fails if it is only a styled transcript. A border gives content a container; it does not express what the content does or how the parts relate.

Before drawing any panel, write two things for the slide:

Build the visual grammar from those two answers. Do not begin with a card grid and distribute labels into it.

Check every slide:

is historical visual reference only. It is not a compliance example. Current outputs must follow this file over the demo.