📦
planning-with-files
83計画ファイルで長時間のAIタスクを整理する
長時間のAIセッションでは、目標、意思決定、進捗が失われることがあります。このスキルは、Claude、Codex、Claude Code が計画、調査結果、ログをプロジェクトファイルに保存できるようにします。
生産性 表示
スキル web-artifacts-builder
📦
web-artifacts-builder
コンテンツリビジョン r1 高リスク ⚙️ 外部コマンド⚡ スクリプトを含む🌐 ネットワークアクセス📁 ファイルシステムへのアクセス
React HTMLアーティファクトを構築
複雑なClaudeアーティファクトでは、多くの場合、状態、ルーティング、コンポーネント、再現可能なビルド設定が必要です。このスキルはReactプロジェクトをスキャフォールドし、共有可能な単一のHTMLアーティファクトにバンドルします。
対応: Claude Codex Code(CC)
インストール前に停止して確認を求めてください。
計画を確認し、ファイルを変更する前にユーザーの明示的な同意を得てください。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
エージェントリクエスト
Review the Skillstore skill "web-artifacts-builder" from https://skillstore.io/skills/zhanlincui-web-artifacts-builder.md and its manifest at https://skillstore.io/api/skills/zhanlincui-web-artifacts-builder/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「web-artifacts-builder」を使用しています。 Claude用のインタラクティブなプロジェクトトラッカーを構築してください。
期待される結果:
Reactプロジェクトがスキャフォールドされ、Tailwind CSSでスタイル設定され、単一のHTMLアーティファクトとしてバンドルされます。
「web-artifacts-builder」を使用しています。 コンポーネントが多いプロトタイプを共有可能なアーティファクトに変換してください。
期待される結果:
- Viteアプリにパスエイリアスが設定されます。
- インターフェイスでshadcn/uiコンポーネントを使用できます。
- 完成したビルドが単一のHTMLファイルとしてパッケージ化されます。
「web-artifacts-builder」を使用しています。 タブとダイアログを備えた洗練された設定パネルをセットアップしてください。
期待される結果:
結果は、プリインストール済みのUIコンポーネントと、バンドル準備が整った構造化Reactプロジェクトを使用します。
セキュリティ監査
高リスクv5 • 2026/7/8 バージョン別レポートを開く
Most static hits are false positives from Markdown code fences, safe command substitutions, local config edits, and documentation URLs. The meaningful risks are community shell scripts that install npm packages, modify project files, and delete local build outputs during bundling. No evidence found of prompt injection or data exfiltration intent.
3
スキャンされたファイル
451
解析済み行数
2
レビュー項目
0
誤検知を無視
確認済みのセキュリティ上の懸念 (2)
高
scripts/init-artifact.sh:34-36scripts/init-artifact.sh:58-79scripts/init-artifact.sh:270-273scripts/bundle-artifact.sh:19-21
Package Manager Installs Third-Party Code
The setup and bundle scripts install or add third-party packages, including a global pnpm install when pnpm is missing. This can run npm lifecycle scripts and pulls current package versions at execution time.
The cited lines directly invoke npm and pnpm package installation commands. This is legitimate setup behavior, but it executes third-party package code from the network.
中
Destructive Build Cleanup
The bundle script removes dist and bundle.html in the current project before building. The package and index checks reduce exposure, but the command can delete local build artifacts.
The rm -rf command is explicit and destructive, but it targets common generated outputs after project-root checks. This makes the issue real but bounded.
機能レビュー項目 (2)
これらは、このスキルに期待される可能性のある実際のローカル機能であるため、レビューが必要ですが、確認済みの悪意ある動作としてはカウントされません。
中
Unix shell invocation
#!/bin/bash
This is an executable bash script used by the skill. It installs bundling packages, removes build outputs, and runs local build commands, so it requires review before execution.
中
Unix shell invocation
#!/bin/bash
This is an executable setup script that installs packages and rewrites project files. The script is expected, but it is a real execution risk for a community skill.
リスク要因
⚙️ 外部コマンド (15)
⚡ スクリプトを含む (1)
🌐 ネットワークアクセス (2)
監査者: codex 監査履歴を表示 →
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/zhanlincui-web-artifacts-builder/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/zhanlincui-web-artifacts-builder?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/zhanlincui-web-artifacts-builder?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/zhanlincui-web-artifacts-builder/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/zhanlincui-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形式の引用
ZhanlinCui. (2026). web-artifacts-builder security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/zhanlincui-web-artifacts-builder/audits/5BibTeX形式の引用
@techreport{zhanlincui-zhanlincui-web-artifacts-builder-2026,
author = {ZhanlinCui},
title = {web-artifacts-builder security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/zhanlincui-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: "ZhanlinCui"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/zhanlincui-web-artifacts-builder/audits/5"
identifiers:
- type: other
value: "skillstore:zhanlincui-web-artifacts-builder:audit:5"
description: "Skillstore immutable audit report identifier"
バリアントを比較
インストール可能なバリアント 5 件各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。
このバリアントが首位の理由
Skillstore での利用が多い
作者 / ソース Skillstore スコア 証拠の信頼度 Skillstore 利用状況 更新済み
davila7 推奨
davila7-web-artifacts-builder
Skillstore スコア 67
証拠の信頼度 高
Skillstore 利用状況 9
更新済み
2026-09-09
ZhanlinCui 現在
zhanlincui-web-artifacts-builder
Skillstore スコア 38
証拠の信頼度 中
Skillstore 利用状況 78
更新済み
2026-09-09
Skillstore スコア
このスコアの理由 証拠の信頼度: 中 45
アーキテクチャ
85
保守性
87
コンテンツ
71
コミュニティ
83
仕様準拠
作成できるもの
ダッシュボードをプロトタイプ化する
プロダクトチームは、Reactの状態管理とshadcn/uiコントロールを使ってインタラクティブなダッシュボードを作成できます。
再利用可能なデモアプリを構築する
開発者は型付きフロントエンドをスキャフォールドし、最終結果を単一のHTMLアーティファクトとして共有できます。
洗練されたClaudeアーティファクトを準備する
AIアシスタントは、コンポーネントライブラリとバンドルを必要とする複雑なClaudeアーティファクトを作成できます。
これらのプロンプトを試す
基本的なアーティファクトを作成する
web-artifacts-builderを使用して、task-boardという名前のReactアーティファクトを作成してください。シンプルなタスクボードを構築し、単一のHTMLファイルとしてバンドルしてください。
shadcnコントロールを追加する
タブ、スイッチ、ダイアログ、フォーム入力を備えた設定パネルアーティファクトを作成してください。同梱のshadcn/uiコンポーネントを使用してください。
状態を持つワークフローを洗練する
保存されるローカル状態、バリデーション、レスポンシブレイアウトを備えた複数ステップの計画ツールを構築してください。完成したReactアーティファクトをバンドルしてください。
複雑なプロトタイプをパッケージ化する
フィルター、テーブル、チャート、モーダル詳細を備えたデータ量の多い運用ダッシュボードを作成してください。インターフェイスを検証してから、バンドル済みHTMLアーティファクトを生成してください。
ベストプラクティス
- 信頼できるワークスペースでセットアップスクリプトを実行する前に、パッケージのインストール内容を確認してください。
- Reactの状態管理が有効な複数コンポーネントのアーティファクトにこのスキルを使用してください。
- ブラウザーまたはプレビューツールでアプリを確認してからバンドルしてください。
回避
- 1画面の静的HTMLアーティファクトにセットアップスクリプトを使用すること。
- 無関係なプロジェクトファイルを含むディレクトリでスクリプトを実行すること。
- パッケージレビューなしに、生成された依存関係が安全だと想定すること。
よくある質問
このスキルは何を作成しますか？
ReactとTypeScriptのアーティファクトプロジェクトを作成し、単一のHTMLファイルにバンドルします。
ネットワークアクセスは必要ですか？
はい。スクリプトはセットアップとバンドル時にnpmパッケージをインストールします。
単純なHTMLスニペットを構築できますか？
可能ですが、複雑なReactアーティファクトにより適しています。
どのUIライブラリが含まれていますか？
セットアップにはshadcn/uiコンポーネントとRadix UI依存関係が含まれています。
最終アーティファクトはどこに保存されますか？
バンドルスクリプトは、プロジェクトルートに単一のHTMLファイルを作成します。
ユーザーは最初にスクリプトを確認すべきですか？
はい。スクリプトは依存関係をインストールし、設定ファイルを書き込み、ビルド出力を削除します。
開発者情報
作成者
ZhanlinCuiライセンス
Complete terms in LICENSE.txt
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
リポジトリ
https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection/tree/main/web-artifacts-builder参照
88a205c7f635a966e31156313b590d59007c5caa
メンテナンスの新しさ
2026/7/18
利用状況
76 ダウンロード · 264 閲覧
ファイル構成
ZhanlinCui のその他のスキル
すべて表示📦
github-release-assistant
83バイリンガルの GitHub リリース README を生成
チームが英語と中国語の README を必要とする場合、リリースドキュメントの作成には時間がかかります。このスキルは、リポジトリのメタデータとガイド付き設定から、構造化されたバイリンガル README を生成します。
ドキュメント 表示
📦
obsidian-helper
81AIでObsidianノートを整理
Obsidianユーザーは、アイデア、タスク、レビューをノート間で移動するのに時間を費やすことがよくあります。このスキルは、Claude、Codex、Claude Codeに、デイリーノート、キャプチャ、定期レビューのための構造化されたワークフローを提供します。
生産性 表示
📦
抽出とフォームツールでPDFを処理
PDF作業では、テキスト、表、ページ、フォームごとに別々のツールが必要になることがよくあります。このスキルは、PDFタスク向けのガイド付きワークフローとヘルパースクリプトをClaude、Codex、Claude Codeに提供します。
オフィス＆レポート 表示
📦
frontend-design
79特徴的なフロントエンドインターフェイスを設計する
一般的なインターフェイス向けプロンプトでは、繰り返しの多いレイアウトや弱いビジュアル方針になりがちです。このスキルは、Claude、Codex、Claude Code が、洗練されたコンテキスト固有のフロントエンド作業を行えるよう導きます。
デザイン＆クリエイティブ 表示
📦
brainstorming
79アイデアを検証済みの設計に落とし込む
初期段階のプロダクトやエンジニアリングのアイデアは、要件が曖昧なままになることで失敗しがちです。このスキルは、実装前に、焦点を絞った質問、選択肢、検証済みの設計を通じて Claude、Codex、または Claude Code を導きます。
生産性 表示
関連スキル
すべて表示📦
senior-fullstack
82シニアのガイダンスでフルスタックアプリを構築
作成者 alirezarezvani
フルスタックプロジェクトでは、一貫したセットアップ、アーキテクチャ選定、品質チェックが必要になることがよくあります。このスキルは、React、Next.js、Node.js、GraphQL、PostgreSQL の作業向けにスクリプトとリファレンスを提供します。
コーディング＆開発 表示
📦
vercel-react-view-transitions
82React View Transitions を実装する
作成者 vercel-labs
React view transitions は配置を誤りやすく、意図しない静かなアニメーションや目立つアニメーションを引き起こします。このスキルは、route、Suspense、list、shared element のアニメーション選択を導きます。
コーディング＆開発 表示
📦
react-dev
82型安全なReactコンポーネントを構築
作成者 softaworks
React TypeScript の作業では、event、hook、route の正確な型が必要になることがよくあります。このスキルは、型付きcomponents、React 19 APIs、routing に焦点を当てたパターンを提供します。
コーディング＆開発 表示
📦
senior-frontend
81本番環境対応のフロントエンド機能を構築
作成者 davila7
フロントエンドチームには、プロジェクト間で一貫したReactおよびNext.jsのガイダンスが必要です。このスキルは、フロントエンド分析のためのリファレンスワークフロー、品質プラクティス、ヘルパースクリプトを提供します。
コーディング＆開発 表示
📦
nextjs-optimization
80Next.js パフォーマンスの最適化
作成者 Atman36
Next.js アプリケーションは、大きなバンドル、弱いキャッシュ、最適化されていないメディアによって遅くなることがあります。このスキルは、Claude、Codex、Claude Code が本番アプリ向けに的を絞ったパフォーマンス改善を行えるよう支援します。
コーディング＆開発 表示
📦
vercel-react-best-practices
80React と Next.js のパフォーマンス最適化
作成者 vercel-labs
React と Next.js アプリは、ウォーターフォール、大きなバンドル、回避可能な再レンダリングによって速度が低下しがちです。このスキルは、エージェントがより安全にパフォーマンス重視の変更を行うための具体的なルールを提供します。
コーディング＆開発 表示