web-artifacts-builder
React HTMLアーティファクトを構築
複雑なClaudeアーティファクトでは、多くの場合React、styled components、再現可能なバンドル手順が必要です。このスキルはViteプロジェクトを作成し、それを共有可能な1つのHTMLアーティファクトにバンドルします。
インストール前に停止して確認を求めてください。
計画を確認し、ファイルを変更する前にユーザーの明示的な同意を得てください。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "web-artifacts-builder" from https://skillstore.io/skills/sickn33-web-artifacts-builder.md and its manifest at https://skillstore.io/api/skills/sickn33-web-artifacts-builder/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「web-artifacts-builder」を使用しています。 タブ、カード、フィルター、テーブルを備えたReactダッシュボードアーティファクトを作成してください。
期待される結果:
Tailwind CSS、shadcn/uiコンポーネント、バンドル準備済みのダッシュボードインターフェースを含むVite Reactプロジェクトが初期化されます。
「web-artifacts-builder」を使用しています。 完成したアーティファクトをClaudeで共有できるようにパッケージ化してください。
期待される結果:
プロジェクトはParcelでビルドされ、アセットはインライン化され、単一のbundle.htmlファイルが生成されます。
「web-artifacts-builder」を使用しています。 shadcn/uiのダイアログとフォームを使って、洗練されたプロトタイプを作成してください。
期待される結果:
生成されたアプリには、設定済みの依存関係、コンポーネントインポート、要求されたワークフロー向けの構造化されたReactインターフェースが含まれます。
セキュリティ監査
中リスクMost static findings are false positives caused by markdown backticks, local config edits, schema metadata, or benign shell substitutions. Two shell-script execution findings are confirmed because the skill asks users to run community bash automation, and one semantic finding covers remote package installation risk. No prompt injection or data exfiltration intent was found in the reviewed files.
確認済みのセキュリティ上の懸念 (1)
機能レビュー項目 (2)
これらは、このスキルに期待される可能性のある実際のローカル機能であるため、レビューが必要ですが、確認済みの悪意ある動作としてはカウントされません。
リスク要因
⚙️ 外部コマンド (15)
⚡ スクリプトを含む (1)
🌐 ネットワークアクセス (2)
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/sickn33-web-artifacts-builder/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/sickn33-web-artifacts-builder?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/sickn33-web-artifacts-builder?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-web-artifacts-builder/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/sickn33-web-artifacts-builder.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形式の引用
sickn33. (2026). web-artifacts-builder security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-web-artifacts-builder/audits/5BibTeX形式の引用
@techreport{sickn33-sickn33-web-artifacts-builder-2026,
author = {sickn33},
title = {web-artifacts-builder security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/sickn33-web-artifacts-builder/audits/5},
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: "web-artifacts-builder security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "sickn33"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/sickn33-web-artifacts-builder/audits/5"
identifiers:
- type: other
value: "skillstore:sickn33-web-artifacts-builder:audit:5"
description: "Skillstore immutable audit report identifier"
バリアントを比較
インストール可能なバリアント 5 件各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。
このバリアントが首位の理由
davila7-web-artifacts-builder
2026-09-09
sickn33-web-artifacts-builder
2026-09-09
zhanlincui-web-artifacts-builder
2026-09-09
Skillstore スコア
このスコアの理由 証拠の信頼度: 中作成できるもの
リッチなClaudeアーティファクトをプロトタイプする
状態、コンポーネント、スタイリング、単一HTML配布形式を備えたインタラクティブなアーティファクトを作成します。
コンポーネントデモを構築する
Tailwind CSS、shadcn/uiコンポーネント、Radix依存関係がすでに含まれたReactプロジェクトを開始します。
社内ツールをパッケージ化する
小さなReactインターフェースを、会話内でレビューまたは共有できる1つのHTMLファイルに変換します。
これらのプロンプトを試す
このスキルを使用して、dashboard-demoという名前のReactアーティファクトを初期化してください。最初のバージョンはシンプルにし、ローカル開発に対応できる状態にしてください。
shadcn/uiのボタン、タブ、カード、フォームコントロールを使用するマルチパネルReactアーティファクトを作成してください。デザインはコンパクトでプロフェッショナルにしてください。
Reactアーティファクトが完成したら、バンドルワークフローを実行し、レビュー用の単一HTMLアーティファクトを準備してください。
再利用可能なコンポーネント、レスポンシブ状態、明確な操作フローを備えた複雑なReactアーティファクトを構築してください。提示する前に、バンドルされたHTMLを検証してください。
ベストプラクティス
- アーティファクトにReactの状態管理、再利用可能なコンポーネント、洗練されたコンポーネントライブラリが必要な場合に、このスキルを使用してください。
- 機密性の高いワークスペースでスクリプトを実行する前に、パッケージのインストール内容と生成ファイルを確認してください。
- 最終アーティファクトとして共有する前に、バンドルされたHTMLをブラウザでテストしてください。
回避
- 単純なHTMLファイル1つで記述できる小さな静的ページには、このワークフローを使用しないでください。
- distまたはbundle.htmlに重要な無関係の作業が含まれているリポジトリでは、スクリプトを実行しないでください。
- 視覚的および機能的なレビューなしに、バンドルされたファイルが本番環境で使用可能だと想定しないでください。
よくある質問
このスキルは何を作成しますか？
shadcn/uiコンポーネントをサポートしていますか？
どのツールでこのスキルを使用できますか？
インターネットアクセスは必要ですか？
単純なHTMLアーティファクトに役立ちますか？
実行前に何を確認すべきですか？
開発者情報
作成者
sickn33ライセンス
Complete terms in LICENSE.txt
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
b959ebfd1043a07c0c4378ab94ca4342cb0259f5
メンテナンスの新しさ
2026/7/18
利用状況
6 ダウンロード · 201 閲覧
ファイル構成