スキル snapdom
📦

snapdom

コンテンツリビジョン r1 中リスク ⚙️ 外部コマンド🌐 ネットワークアクセス

DOM要素を画像としてキャプチャ

フロントエンドチームは、ブラウザ自動化スタックなしで、スタイル適用済みコンポーネントの正確なスクリーンショットを必要とすることがよくあります。このスキルでは、snapDOMを使用してDOM要素をSVG、PNG、JPG、WebP、Canvas、またはBlob出力としてエクスポートする方法を示します。

対応: Claude Codex Code(CC)
📊 67 十分

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

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

エージェントリクエスト
Review the Skillstore skill "snapdom" from https://skillstore.io/skills/2025emma-snapdom.md and its manifest at https://skillstore.io/api/skills/2025emma-snapdom/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

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

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

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

Markdown詳細 GET /skills/2025emma-snapdom.md 署名済み manifest GET /api/skills/2025emma-snapdom/manifest 署名済み lockfile GET /api/skills/2025emma-snapdom/lockfile

テストする

「snapdom」を使用しています。 製品ページ用に、スタイル適用済みチャートの鮮明な画像が必要です。

期待される結果:

チャートはスケーラブルなベクター出力の恩恵を受けるため、まずSVG exportを使用してください。font embeddingを有効にし、スタイルの読み込み完了を待ってから、対象ブラウザ全体で結果をテストします。

「snapdom」を使用しています。 キャプチャに、最終画像には表示すべきでないボタンが含まれています。

期待される結果:

controlsまたはdata attributes用のexclusion selectorを使用してください。重要なコンテンツがキャプチャから削除されないように、selectorは狭く保ちます。

「snapdom」を使用しています。 画像が別ドメインから読み込まれているため失敗します。

期待される結果:

可能な場合はsame-origin assetsを優先してください。proxyを使用する場合は、信頼できるproxyを選び、機密性の高いページリソースを第三者経由で送信しないでください。

セキュリティ監査

中リスク
v9 • 2026/7/9 バージョン別レポートを開く

Most static findings are false positives caused by markdown code fences, inline option names, documented setup commands, and public resource links. No prompt injection, covert upload behavior, or hidden command execution was found. The only substantive risk is privacy exposure when users route captured page resources through a CORS proxy.

3
スキャンされたファイル
337
解析済み行数
0
レビュー項目
0
誤検知を無視

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

中
SKILL.md:17-18SKILL.md:44-45SKILL.md:111SKILL.md:127SKILL.md:159-164SKILL.md:266-268
CORS proxy guidance may expose captured resources
The skill recommends proxy fallback for CORS-blocked assets, including useProxy examples and troubleshooting guidance. A third-party proxy can receive resource URLs or asset contents from pages being captured, so users need explicit privacy and trust warnings.
The documentation repeatedly promotes proxy fallback for blocked resources. The risk depends on user configuration, but the privacy impact is clear enough to document.

リスク要因

⚙️ 外部コマンド (49)
SKILL.md:53-57 SKILL.md:57-60 SKILL.md:60-64 SKILL.md:64-67 SKILL.md:67-69 SKILL.md:69-74 SKILL.md:74-87 SKILL.md:87-90 SKILL.md:90-94 SKILL.md:94-97 SKILL.md:97-101 SKILL.md:101-104 SKILL.md:104-117 SKILL.md:117-123 SKILL.md:123-124 SKILL.md:124-125 SKILL.md:125-126 SKILL.md:126-127 SKILL.md:127-128 SKILL.md:128-129 SKILL.md:129-130 SKILL.md:130-135 SKILL.md:135-140 SKILL.md:140-143 SKILL.md:143-148 SKILL.md:148-151 SKILL.md:151-157 SKILL.md:157-160 SKILL.md:160-165 SKILL.md:165-168 SKILL.md:168-182 SKILL.md:182-197 SKILL.md:197-201 SKILL.md:201-204 SKILL.md:204-206 SKILL.md:206-209 SKILL.md:209-211 SKILL.md:211-230 SKILL.md:230-231 SKILL.md:231-232 SKILL.md:232-247 SKILL.md:247 SKILL.md:248-249 SKILL.md:249-251 SKILL.md:251-259 SKILL.md:259-262 SKILL.md:262-267 SKILL.md:267-272 SKILL.md:272-273
🌐 ネットワークアクセス (8)
SKILL.md:62 SKILL.md:68 SKILL.md:163 SKILL.md:198 SKILL.md:223 SKILL.md:224 SKILL.md:225 SKILL.md:243
監査者: claude 監査履歴を表示 →
このレポートを共有・引用

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

バージョン別レポートを開く
セキュリティ評価

レポートリンクをコピー

https://skillstore.io/skills/2025emma-snapdom/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/2025emma-snapdom/security.svg)](https://skillstore.io/skills/2025emma-snapdom?utm_source=security_passport_badge)

HTMLバッジ

<a href="https://skillstore.io/skills/2025emma-snapdom?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/2025emma-snapdom/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/2025emma-snapdom.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形式の引用

2025Emma. (2026). snapdom security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/2025emma-snapdom/audits/9

BibTeX形式の引用

@techreport{2025emma-2025emma-snapdom-2026, author = {2025Emma}, title = {snapdom security audit report (audit version 9)}, institution = {Skillstore}, year = {2026}, number = {9}, url = {https://skillstore.io/skills/2025emma-snapdom/audits/9}, 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: "snapdom security audit report (audit version 9)" version: "unspecified" type: report authors: - name: "2025Emma" date-released: "2026-07-09" url: "https://skillstore.io/skills/2025emma-snapdom/audits/9" identifiers: - type: other value: "skillstore:2025emma-snapdom:audit:9" description: "Skillstore immutable audit report identifier"

Skillstore スコア

このスコアの理由 証拠の信頼度: 高
41
アーキテクチャ
85
保守性
85
コンテンツ
71
コミュニティ
91
仕様準拠

作成できるもの

コンポーネントプレビューをエクスポート

デザインレビューやドキュメント用に、スタイル適用済みUIコンポーネントから再利用可能な画像アセットを作成します。

ソーシャル画像を生成

カード、バナー、マーケティングプレビュー用に、固定サイズのDOMレイアウトをキャプチャします。

レンダリング品質を比較

ビジュアルエクスポートワークフローを構築する際に、SVG出力とラスター出力を評価します。

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

基本的なキャプチャから始める 
snapDOMでDOM要素をキャプチャし、PNGとしてエクスポートする最も簡単な方法を示してください。
出力サイズと品質を調整 
固定幅、固定高さ、高い画像品質を備えた高解像度エクスポート用にsnapDOM optionsを設定するのを手伝ってください。
欠落したフォントやリソースに対処 
snapDOMキャプチャでフォントと一部の画像が欠落しています。安全なトラブルシューティング手順を順を追って説明してください。
カスタムエクスポートフローを設計 
controlsを除外し、fontsを埋め込み、SVGとPNGをエクスポートし、PDF pluginの余地を残すsnapDOMワークフローを設計してください。

ベストプラクティス

  • キャプチャする前に、フォント、画像、CSSの読み込みが完了するのを待ちます。
  • スケーラブルな出力が必要なチャートやインターフェースプレビューにはSVGを使用します。
  • same-origin resource handlingが不可能な場合にのみ、信頼できるproxyを使用します。

回避

  • レビューなしに、共有可能な画像へ機密性の高いユーザーデータをキャプチャしないでください。
  • 信頼できないCORS proxy経由で非公開のページリソースを送信しないでください。
  • メモリ使用量をテストせずに、大きな要素へ非常に高いscale値を使用しないでください。

よくある質問

このスキルは何に役立ちますか？
snapDOMを使用してHTML要素をキャプチャし、画像形式またはcanvas dataとしてエクスポートするのに役立ちます。
どの画像形式が扱われていますか？
このスキルでは、SVG、PNG、JPG、WebP、Canvas、Blob出力を扱います。
スタイルとフォントを保持できますか？
はい。ガイダンスでは、埋め込みスタイル、pseudo-elements、shadows、任意のfont embeddingを扱います。
実行可能なスクリプトは含まれていますか？
いいえ。レビュー済みのスキルはドキュメントと例です。実行可能な自動化ファイルは含まれていません。
CORS proxyの使用は安全ですか？
信頼できるproxyであれば安全に使用できる場合がありますが、そのproxyにリソースURLやコンテンツが公開される可能性があります。
このスキルは誰が使うべきですか？
フロントエンド開発者、プロダクトエンジニア、QAチームが、DOMキャプチャと画像エクスポートのワークフローに使用できます。

開発者情報

作成者

2025Emma

ライセンス

MIT

Skillstore リビジョン

r1

バージョンに関する注意

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

リポジトリ

https://github.com/2025Emma/vibe-coding-cn/tree/main/i18n/zh/skills/snapdom

参照

7db9b9f06e0ab79c575b58bc48c4d8dc9849f424

メンテナンスの新しさ

2026/7/25

利用状況

20 ダウンロード · 283 閲覧

ファイル構成

📁 references/

📄 index.md

📄 other.md

📄 SKILL.md

2025Emma のその他のスキル

すべて表示

関連スキル

すべて表示