Communitygithub.com

dbillion/hermes-skills-public

Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, docs, benchmark, telemetry, transcribe, auth, tts, and remove-background. Also use when diagnosing build or render failures. validate, inspect, and layout are deprecated aliases; use check. Covers local, HeyGen-hosted cloud, AWS Lambda, and Google Cloud Run rendering.

Was ist hermes-skills-public?

hermes-skills-public is a Claude Code agent skill that use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, docs, benchmark, telemetry, transcribe, auth, tts, and remove-background. Also use when diagnosing build or render failures. validate, inspect, and layout are deprecated aliases; use check. Covers local, HeyGen-hosted cloud, AWS Lambda, and Google Cloud Run rendering.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/dbillion/hermes-skills-public/tree/HEAD/skills-external/hyperframes-cli

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

HyperFrames CLI

Run commands as npx hyperframes ... unless project instructions provide a wrapper. Obey the wrapper when present. The CLI requires Node.js 22 or newer and FFmpeg.

Development loop

  1. Scaffold: npx hyperframes init <project> or capture a site. In non-TTY mode, pass --non-interactive --example=<name>.
  2. Author: write the composition using /hyperframes-core.
  3. Get fast feedback while editing: run npx hyperframes lint after the first HTML pass and after structural changes.
  4. Run the final gate: run npx hyperframes check; it reruns lint before opening the browser. Do not prepend a redundant standalone lint invocation. Add --snapshots for annotated overview frames and finding crops.
  5. Inspect sub-compositions: when index.html mounts data-composition-src, capture midpoint snapshots and inspect each mounted scene.
  6. Open the final Studio preview: run npx hyperframes preview, hand the timeline project URL to the user, and ask whether to revise or render.
  7. Render only after approval: use draft quality for iteration and high quality for delivery.
  8. Verify the output: confirm the file exists, is non-empty, and has a plausible duration.
# Fast iteration check; repeat while authoring as needed.
npx hyperframes lint

# Required final gate; includes lint.
npx hyperframes check
npx hyperframes preview
npx hyperframes render --quality high --output out.mp4
test -s out.mp4
ffprobe -v error -show_format out.mp4

check runs lint first, then uses one browser session and one seek pass to audit runtime errors, failed requests, layout, *.motion.json assertions, and WCAG contrast. Persistent findings gate the exit code; transient entrance or exit findings are informational. Use --strict to gate warnings. validate, inspect, and layout remain aliases for compatibility but must not appear in new instructions or scripts.

Two different preview surfaces

Do not confuse these states:

SurfaceWhen it may openPurpose
Storyboard boardBefore composition checks, only when storyboard: yesReview plan cards and wireframe sketches. Open ?view=storyboard#project/<name>.
Final composition previewAfter check passesReview the assembled timeline before render. Open #project/<name>.

The early board is not approval of the final video. Rendering always requires the final approval defined by hyperframes-core/references/review-loop.md.

Sub-composition smoke test

Static audits cannot catch every mount failure. When the project uses sub-compositions, capture at least one visible midpoint for each host slot:

npx hyperframes snapshot --at <t1>,<t2>,<t3>

Treat tiny unstyled content, canvas-sized icons, missing hero elements, or timeline-registration timeouts as render-blocking mount defects. See hyperframes-core/references/sub-compositions.md for the corresponding fixes.

Agent conventions

  • Prefer --json for agent and CI calls. Server-mode render, preview, and play do not provide ordinary JSON output; preview --selection --json and preview --context --json are query-mode exceptions.

  • doctor --json always exits zero. Gate on its payload:

    npx hyperframes doctor --json | jq -e '.ok' >/dev/null
    
  • Non-TTY mode is automatic. init requires --example there; use --non-interactive to force deterministic behavior on a TTY.

  • Use one HYPERFRAMES_RUN_ID for all commands in the same verification loop.

  • Use --strict, --strict-all, and --strict-variables when the corresponding warnings, variables, or CI conditions must gate the render.

  • JSON paths redact the home directory as $HOME; do not try to reverse the redaction.

  • Never render merely because checks pass. Pause at the final preview and wait for approval.

Studio-directed edits

When the user refers to “this element” or the current selection, query Studio instead of guessing:

npx hyperframes preview --context --json --context-fields selection

Use selection.target.hfId when available, otherwise its selector and source file. If the result reports no-selection, ask the user to click the element and rerun. Request only the context slices you need; use --context-detail full only for computed styles or editable text metadata. Full behavior and failure codes live in references/preview-render.md.

Render choices

NeedCommand
Fast local iterationnpx hyperframes render --quality draft
Final local deliverynpx hyperframes render --quality high --output out.mp4
Reproducible container rendernpx hyperframes render --docker --strict --output out.mp4
Local variable-driven batch rendernpx hyperframes render --batch rows.json --output "renders/{name}.mp4"
HeyGen-hosted zero-infrastructure rendernpx hyperframes cloud render
Self-managed distributed AWS rendernpx hyperframes lambda render <project> --width 1920 --height 1080 --wait
Self-managed distributed GCP rendernpx hyperframes cloudrun render <project> --width 1920 --height 1080 --wait

Use cloud rendering when the user wants hosted rendering without local Chrome, FFmpeg, or AWS. Use Lambda only when AWS ownership is a requirement. Use Cloud Run only when GCP ownership is a requirement. Read the matching reference before running any cloud path.

After verifying a successful render, send one feedback report unless telemetry is disabled or the user opted out:

npx hyperframes feedback --rating <0-10> --comment "<specific result or friction>"

Keep clean-run feedback concise. For any bug or friction, capture a reproduction packet before submitting; do not send only a symptom summary. Include the rerunnable command and working directory, expected versus actual behavior, exact error, whether output completed/fell back/failed, workaround, and repro-project status. If the issue did not reproduce again, say so and still include the last failing command and logs. Use --file-issue only with consent: it publishes a minimal reproduction to a public URL. The required packet format and privacy warning live in references/preview-render.md.

Read the matching reference before running a command

The following references and owning skills are mandatory command contracts, not optional background reading. Before running a command in the table, read its matching row.

NeedReference
init, capture, skillsreferences/init-and-scaffold.md
lint, check, motion sidecars, snapshotreferences/lint-validate-inspect.md
compare, grade-compare, variable-driven render --batchreferences/compare-and-batch.md
beats for an existing project's Studio beat gridreferences/beats.md
preview, play, render, publish, Studio context, feedbackreferences/preview-render.md
doctor, browser managementreferences/doctor-browser.md
auth, HeyGen-hosted cloud rendering, and template variablesreferences/cloud.md
AWS Lambda deployment and renderingreferences/lambda.md
Google Cloud Run deployment and renderingreferences/cloudrun.md
info, upgrade, compositions, docs, benchmark, telemetry, media preprocessingreferences/upgrade-info-misc.md

For composition variables, also read /hyperframes-core → references/variables-and-media.md. For hyperframes add and hyperframes catalog, use /hyperframes-registry. Before hyperframes present, read /slideshow; before hyperframes keyframes, read /hyperframes-keyframes. For TTS, transcription, captions, or background removal choices, use /media-use.

The specialized commands are deliberately documented by their owning workflows:

npx hyperframes present <project-dir> --port 3004 --no-open
npx hyperframes beats <project-dir> --json
npx hyperframes keyframes <project-dir> --json

present serves a navigable deck with presenter and audience synchronization. beats is the standalone Studio beat-grid utility defined in references/beats.md. keyframes surfaces seek-safe animation and motion-path diagnostics.

Individual skills in this repo

This repo contains 6 individual skills — each has its own dedicated page.

dbillion/hermes-skills-public

Edit an existing image based on a text prompt.

dbillion/hermes-skills-public

Add `flutter_localizations` and `intl` dependencies, enable "generate true" in `pubspec.yaml`, and create an `l10n.yaml` configuration file. Use when initializing localization support for a new Flutter project.

dbillion/hermes-skills-public

Expert in video composition, editing, and format conversion. Use when the user wants to generate high-quality video, overlay images on video, concatenate clips, create GIFs, or sync audio to video using mcp-avtool-go and mcp-veo-go.

dbillion/hermes-skills-public

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

dbillion/hermes-skills-public

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Also covers Tailwind projects and the STORYBOARD.md / SCRIPT.md plan formats. Read before writing composition HTML.

dbillion/hermes-skills-public

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

Verwandte Skills