スキル website-to-hyperframes

📦

website-to-hyperframes

Name: website-to-hyperframes
Author: heygen-com

コンテンツリビジョン r1 高リスク 🔑 環境変数⚙️ 外部コマンド📁 ファイルシステムへのアクセス🌐 ネットワークアクセス

WebサイトからHyperFrames動画を作成

チームには、既存のWebサイトを洗練された動画コンセプトへすばやく変換する方法が必要です。このスキルは、Claude、Codex、またはClaude Codeに対して、キャプチャ、デザイン分析、スクリプト作成、ストーリーボード作成、コンポジション、検証、納品までをガイドします。

対応: Claude Codex Code(CC)

⚠️ 38 不十分

インストール前に停止して確認を求めてください。

計画を確認し、ファイルを変更する前にユーザーの明示的な同意を得てください。

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。

エージェントリクエスト

Review the Skillstore skill "website-to-hyperframes" from https://skillstore.io/skills/heygen-com-website-to-hyperframes.md and its manifest at https://skillstore.io/api/skills/heygen-com-website-to-hyperframes/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.

エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。

エージェントが読めるリソース

AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

Markdown詳細 GET /skills/heygen-com-website-to-hyperframes.md 署名済み manifest GET /api/skills/heygen-com-website-to-hyperframes/manifest 署名済み lockfile GET /api/skills/heygen-com-website-to-hyperframes/lockfile

テストする

「website-to-hyperframes」を使用しています。 SaaSランディングページをキャプチャして、25秒のローンチ動画を作成してください。

期待される結果:

色、フォント、セクション、主要アセット、視覚的な雰囲気を含むサイト概要。
動画用に生成されたデザイン、スクリプト、ストーリーボードのドキュメント。
レビュー用の検証済みHyperFrames Studio preview URL。

「website-to-hyperframes」を使用しています。マーケティングホームページから短いソーシャル広告を作成してください。

期待される結果:

ビートタイミング付きの簡潔な広告スクリプト。
キャプチャしたスクリーンショット、ロゴ、タイポグラフィを使用したコンポジション。
最終引き渡し前に各主要シーンを示すsnapshotチェック。

セキュリティ監査

高リスク

v6 • 2026/7/9 バージョン別レポートを開く

The skill performs a legitimate website-to-video workflow, but it requires external CLI execution, website capture, local artifact creation, and optional API key handling. Most static shell and reconnaissance hits are markdown false positives, while capture artifacts, repo-root .env guidance, relative asset paths, and npm validation commands remain real risks that require user awareness.

スキャンされたファイル

1,500

解析済み行数

レビュー項目

誤検知を無視

確認済みのセキュリティ上の懸念 (5)

高

references/step-1-capture.md:19

Environment file access

**Optional:** Set `GEMINI_API_KEY` (or `GOOGLE_API_KEY`) in a `.env` file at the repo root for riche

The skill instructs users to place Gemini or Google API keys in a repo-root .env file. This is a real secret-handling risk if the repository is shared, committed, or later read by agents.

高

references/step-1-capture.md:13

Screen capture upload

Keeping the capture artifacts (`screenshots/`, `assets/`, `extracted/`, `AGENTS.md`, `CLAUDE.md`) in

The workflow captures website screenshots and assets and later uses those artifacts to build video output. This is legitimate for the skill but can expose private or copyrighted page content if used on sensitive URLs.

高

references/step-1-capture.md:29

Screen capture upload

1. **View the scroll screenshots** — viewport-sized captures covering the full page height (the numb

高

references/step-6-build.md:174

Screen capture upload

- **No iframes for captured content.** Iframes do not seek deterministically with the timeline — the

高

references/step-6-build.md:176

Screen capture upload

- **Never stack two transform tweens on the same element.** A common failure: a `y` entrance plus a

機能レビュー項目 (15)

これらは、このスキルに期待される可能性のある実際のローカル機能であるため、レビューが必要ですが、確認済みの悪意ある動作としてはカウントされません。

高

references/step-1-capture.md:19

Generic API/secret keys

**Optional:** Set `GEMINI_API_KEY` (or `GOOGLE_API_KEY`) in a `.env` file at the repo root for riche

The skill instructs users to place Gemini or Google API keys in a repo-root .env file. This is a real secret-handling risk if the repository is shared, committed, or later read by agents.

高

references/step-6-build.md:24

Path traversal sequence

- Logo: <img src="../capture/assets/favicon.svg"> (top-left, 40x40px)

The instructions intentionally reference files outside the composition directory via ../capture/assets paths. This is expected for HyperFrames assets but still expands file access beyond the current folder.

高

references/step-6-build.md:25

Path traversal sequence

- Hero image: <img src="../capture/assets/hero-bg.png"> (full-bleed background)

高

references/step-6-build.md:26

Path traversal sequence

- Noise texture: ../capture/assets/noise.png (full-frame overlay, 3% opacity)

高

references/step-6-build.md:29

Path traversal sequence

@font-face { font-family: 'BrandFont'; src: url('../capture/assets/fonts/BrandFont-Regular.woff2');

高

references/step-6-build.md:36

Path traversal sequence

After each sub-agent finishes, verify the composition references `../capture/assets/` — if it used i

高

references/step-6-build.md:99

Path traversal sequence

5. Check for the inline anti-pattern: if the HTML contains `<svg xmlns=` or `data:image/` but no `..

高

references/step-6-build.md:100

Path traversal sequence

6. Check fonts: if the HTML uses `fonts.googleapis.com` but there are captured fonts in `capture/ass

高

references/techniques.md:161

Path traversal sequence

src="../capture/assets/lottie/animation-0.json"

高

references/techniques.md:182

Path traversal sequence

path: "../capture/assets/lottie/animation-0.json",

高

references/techniques.md:196

Path traversal sequence

src="../capture/assets/videos/clip.mp4"

高

references/techniques.md:255

Path traversal sequence

Replace this placeholder with an @font-face pointing to ../capture/assets/fonts/. */

高

references/techniques.md:258

Path traversal sequence

src: url("../capture/assets/fonts/Fraunces-Variable.woff2") format("woff2");

中

SKILL.md:91

Ruby/shell backtick execution

**Gate:** `npx hyperframes lint` and `npx hyperframes validate` pass with zero errors, and the final

The skill requires running npx hyperframes lint and validate. These are expected project commands, but they execute local npm tooling and should be reviewed before marketplace installation.

低

references/step-7-validate.md:13

Python HTTP libraries

`validate` loads the composition in headless Chrome and catches runtime JS errors, missing assets, a

The validate step loads compositions in headless Chrome and checks failed network requests. This is a legitimate local validation path, but it can trigger outbound requests embedded in captured pages or compositions.

リスク要因

🔑 環境変数 (1)

references/step-1-capture.md:19

⚙️ 外部コマンド (18)

references/step-2-design.md:18-19 references/step-2-design.md:19-20 references/step-2-design.md:20-21 references/step-2-design.md:88-89 references/step-2-design.md:89-90 references/step-2-design.md:90-91 references/step-2-design.md:91-92 references/step-2-design.md:92 references/step-6-build.md:33-34 references/techniques.md:358-365 SKILL.md:37 SKILL.md:47 SKILL.md:57 SKILL.md:67 SKILL.md:73 SKILL.md:87 SKILL.md:88 SKILL.md:91

📁 ファイルシステムへのアクセス (12)

references/step-6-build.md:24 references/step-6-build.md:25 references/step-6-build.md:26 references/step-6-build.md:29 references/step-6-build.md:36 references/step-6-build.md:99 references/step-6-build.md:100 references/techniques.md:161 references/techniques.md:182 references/techniques.md:196 references/techniques.md:255 references/techniques.md:258

🌐 ネットワークアクセス (8)

references/step-7-validate.md:13 references/step-7-validate.md:80 references/step-7-validate.md:88 references/techniques.md:158 references/techniques.md:287 SKILL.md:13 SKILL.md:15 SKILL.md:87

検出されたパターン

Screen capture upload×4

監査者: claude 監査履歴を表示 →

このレポートを共有・引用

バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。

バージョン別レポートを開く

レポートリンクをコピー

https://skillstore.io/skills/heygen-com-website-to-hyperframes/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/heygen-com-website-to-hyperframes/security.svg)](https://skillstore.io/skills/heygen-com-website-to-hyperframes?utm_source=security_passport_badge)

HTMLバッジ

<a href="https://skillstore.io/skills/heygen-com-website-to-hyperframes?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/heygen-com-website-to-hyperframes/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/heygen-com-website-to-hyperframes.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

学術引用 (APA · BibTeX · CFF)

APA形式の引用

heygen-com. (2026). website-to-hyperframes security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/heygen-com-website-to-hyperframes/audits/6

BibTeX形式の引用

@techreport{heygen-com-heygen-com-website-to-hyperframes-2026,
  author = {heygen-com},
  title = {website-to-hyperframes security audit report (audit version 6)},
  institution = {Skillstore},
  year = {2026},
  number = {6},
  url = {https://skillstore.io/skills/heygen-com-website-to-hyperframes/audits/6},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "website-to-hyperframes security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
  - name: "heygen-com"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/heygen-com-website-to-hyperframes/audits/6"
identifiers:
  - type: other
    value: "skillstore:heygen-com-website-to-hyperframes:audit:6"
    description: "Skillstore immutable audit report identifier"

Skillstore スコア

このスコアの理由証拠の信頼度: 高

アーキテクチャ

保守性

コンテンツ

コミュニティ

仕様準拠

作成できるもの

プロダクトローンチ動画

キャプチャしたブランドアセット、ナレーション、アニメーションシーンを使って、プロダクトWebサイトを短いローンチ動画に変換します。

Webサイトベースのソーシャル広告

ソーシャルメディアでのテスト用に、ランディングページから簡潔な縦長または正方形の広告を作成します。

プロダクトツアーのドラフト

Webサイトのスクリーンショット、表示テキスト、アセットを使用して、HyperFramesでガイド付きプロダクトツアーのドラフトを作成します。

これらのプロンプトを試す

シンプルなWebサイト動画を作成

この公開Webサイトをキャプチャし、20秒のHyperFramesプロダクト動画を作成してください: [URL]。サイトの色、フォント、メインのヒーローアセットを使用してください。

ランディングページからソーシャル広告を作成

[URL]を15秒の縦型ソーシャル広告に変換してください。主要な価値提案を強調し、速くても読みやすいモーションを使い、preview URLの段階で止めてください。

ナレーション付きプロダクトツアーを構築

[URL]から45秒のナレーション付きプロダクトツアーを作成してください。スクリプトを書き、ビートタイミングを生成し、HyperFramesコンポジションを構築し、それらを検証して、Studio previewを見せてください。

洗練されたローンチリールを作成

[URL]をキャプチャし、技術系バイヤー向けのシネマティックなローンチリールを制作してください。キャプチャしたアセットを使い、キネティックタイポグラフィを含め、snapshotで各ビートを検証し、私がpreviewを承認した後にのみレンダリングしてください。

ベストプラクティス

公開済みまたは許可されたWebサイトのみを使用し、出力を共有する前にキャプチャされたアーティファクトを確認してください。
MP4レンダリングを依頼する前に、ローカルのStudio previewを承認してください。
キャプチャアセットと生成ファイルを分離しておくため、各動画プロジェクトは専用ディレクトリに保管してください。

回避

明示的な許可なしに、非公開ダッシュボード、認証済みページ、顧客データをキャプチャしないでください。
ファイルパスで十分な場合は、生のSVG、画像、フォントファイルの内容をプロンプトに貼り付けないでください。
snapshotとStudio previewを確認する前に、最終MP4ファイルをレンダリングしないでください。

よくある質問

このスキルにAPIキーは必要ですか?

基本的なキャプチャにAPIキーは必要ありません。任意のGeminiまたはGoogleキーで画像説明を改善できますが、安全に取り扱う必要があります。

どのWebサイトでも使用できますか?

公開済みまたは許可されたWebサイトを対象としています。ログイン、ペイウォール、法的制限の背後にあるサイトには、明示的な許可と慎重な取り扱いが必要です。

MP4を自動的に作成しますか?

いいえ。このワークフローはまずローカルのHyperFrames Studio previewを提供し、ユーザーが明示的に依頼した場合にのみMP4をレンダリングします。

どのようなファイルが作成されますか?

プロジェクトディレクトリ内に、キャプチャアーティファクト、デザインメモ、スクリプト、ストーリーボード、コンポジション、snapshot、任意のレンダリングファイルを作成します。

Claude Codeでこのスキルを使用できますか?

はい。HyperFramesツールが利用可能な場合、このスキルはClaude、Codex、Claude Codeと互換性があります。

公開前に何を確認すべきですか?

公開前に、キャプチャされたスクリーンショット、抽出テキスト、参照アセット、previewシーン、生成されたナレーションの正確性と権利処理を確認する必要があります。

開発者情報

作成者

heygen-com

ライセンス

MIT

Skillstore リビジョン

バージョンに関する注意

作者はバージョンを宣言していません。

リポジトリ

https://github.com/heygen-com/hyperframes/tree/main/skills/website-to-hyperframes/

参照

1ffa7643651792ccb4bd3b15d924d2c97edff755

メンテナンスの新しさ

2026/7/18

利用状況

14 ダウンロード · 78 閲覧

ファイル構成

📁 references/

📄 step-1-capture.md

📄 step-2-design.md

📄 step-3-script.md

📄 step-4-storyboard.md

📄 step-5-vo.md

📄 step-6-build.md

📄 step-7-validate.md

📄 techniques.md

📄 SKILL.md