vercel-react-view-transitions
82React View Transitions を実装する
React view transitions は配置を誤りやすく、意図しない静かなアニメーションや目立つアニメーションを引き起こします。このスキルは、route、Suspense、list、shared element のアニメーション選択を導きます。
Electronデスクトップアプリを自動化する
Electronアプリのテストでは、手動クリック、スクリーンショット、繰り返しのセットアップが必要になることがよくあります。このスキルは、Claude、Codex、Claude Codeに、agent-browserをElectronアプリへ接続し、それらのワークフローを自動化する方法を示します。
この Skill を自動インストールしないでください。
基準ポリシーにより、インストール操作の前にオペレーターのレビューが必要です。
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "electron" from https://skillstore.io/skills/vercel-labs-electron.md and its manifest at https://skillstore.io/api/skills/vercel-labs-electron/manifest. Verify the artifact. Do not auto-install. Inspect the skill and report your findings, then wait for an operator or manual installation decision.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
「electron」を使用しています。 VS Codeに接続して現在のウィンドウを調査してください。
期待される結果:
アシスタントは選択されたCDPポートを通じてVS Codeを起動または接続し、利用可能なターゲットを一覧表示し、スナップショットを取得して、表示中のコントロールを要約します。
「electron」を使用しています。 Slackワークフローから証跡スクリーンショットを取得してください。
期待される結果:
アシスタントはSlackデスクトップアプリに接続し、要素参照を使って移動し、スクリーンショットを保存し、どのビューが取得されたかを記録します。
「electron」を使用しています。 失敗したElectron接続をトラブルシュートしてください。
期待される結果:
アシスタントは、アプリがリモートデバッグ付きで再起動されたかを確認し、ポートを検証し、起動を待機し、webview向けにタブ切り替えを提案します。
Most static Ruby backtick detections are markdown formatting or fixed command examples, but several command blocks intentionally expose and control Electron apps through CDP. The primary risk is sensitive desktop automation: the skill documents screenshots, text extraction, and app control while listing private communication tools and 1Password. The hardcoded URL findings are example output and not active network behavior.
これらは、このスキルに期待される可能性のある実際のローカル機能であるため、レビューが必要ですが、確認済みの悪意ある動作としてはカウントされません。
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
https://skillstore.io/skills/vercel-labs-electron/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/vercel-labs-electron?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/vercel-labs-electron?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vercel-labs-electron/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/vercel-labs-electron.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>vercel-labs. (2026). electron security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/vercel-labs-electron/audits/4@techreport{vercel-labs-vercel-labs-electron-2026,
author = {vercel-labs},
title = {electron security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/vercel-labs-electron/audits/4},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "electron security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "vercel-labs"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/vercel-labs-electron/audits/4"
identifiers:
- type: other
value: "skillstore:vercel-labs-electron:audit:4"
description: "Skillstore immutable audit report identifier"
開発ビルドに接続し、UIを調査し、一般的な操作を実行し、回帰チェックの証跡を取得します。
Slack、Notion、Discord、Linearなど、対応するElectronアプリで繰り返し発生する操作を実行します。
CDPターゲットを一覧表示し、ウィンドウまたはwebviewを切り替え、メインアプリビューに表示されない要素を調査します。
electron skillを使って、Slackをポート9222のリモートデバッグ付きで起動し、agent-browserを接続するのを手伝ってください。
electron skillを使って私のElectronアプリに接続し、インタラクティブなスナップショットを取得し、設定コントロールを特定してクリックし、その結果を再度スナップショットしてください。
electron skillを使って、対象ワークフローを開いた後の私のElectronアプリからスクリーンショットと表示テキストを取得してください。
electron skillを使って、別々のCDPポート上のSlackとVS Codeにagent-browserセッションを接続し、その後それぞれのアプリを個別に調査してください。
作成者
vercel-labsライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
36e07d5e13068e5be64447e8f20b427cf2cbd21a
メンテナンスの新しさ
2026/7/24
利用状況
15 ダウンロード · 107 閲覧
ファイル構成
📄 SKILL.md
React View Transitions を実装する
React view transitions は配置を誤りやすく、意図しない静かなアニメーションや目立つアニメーションを引き起こします。このスキルは、route、Suspense、list、shared element のアニメーション選択を導きます。
再利用可能な AI スキルを作成する
チームには、再利用可能なエージェントの知識とワークフローを一貫した方法でパッケージ化する仕組みが必要です。このスキルは、Claude、Codex、Claude Code をスキルの設計、作成、検証、パッケージ化へ導きます。
React と Next.js のパフォーマンス最適化
React と Next.js アプリは、ウォーターフォール、大きなバンドル、回避可能な再レンダリングによって速度が低下しがちです。このスキルは、エージェントがより安全にパフォーマンス重視の変更を行うための具体的なルールを提供します。
Reactのコンポジションパターンを適用する
boolean props が多い React コンポーネントは、保守やレビューが難しくなります。この skill は、compound components、明示的な variants、provider ベースの state に関する明確なパターンをエージェントに提供します。
React Native アプリを最適化
React Native アプリでは、低速なリスト、ぎこちないアニメーション、プラットフォーム特有のミスが発生することがあります。このスキルは、パフォーマンスの高い Expo および React Native 開発のための簡潔なルールを Codex、Claude、Claude Code に提供します。
Next.js のベストプラクティスを適用する
Next.js プロジェクトは、境界の不明確さ、遅いデータ取得、デプロイのミスによって失敗することがよくあります。このスキルは、Claude、Codex、Claude Code に、最新の App Router 作業に集中したルールを提供します。
信頼性の高いテスト自動化を構築
作成者 89jobrien
弱いテストはリリースを遅らせ、リグレッションを見逃します。このスキルは、テスト戦略、TDD、自動化、カバレッジレビュー、Playwright による Web チェックをガイドします。
コードベース全体で信頼性の高いテストを計画する
作成者 0xDarkMatter
このスキルは、テスト範囲を混在させずに、チームがテスト戦略、モック、データフィクスチャ、カバレッジゲート、CIパターンを選択するのに役立ちます。Claude、Codex、Claude Codeに、ユニット、統合、エンドツーエンド、TDD、パイプラインテストのための構造化されたガイダンスを提供します。
ソフトウェアの問題を体系的にデバッグする
作成者 Asmayaseen
構造化されていないバグ修正は時間を浪費し、本当の失敗原因を隠すことがあります。このスキルは Claude、Codex、Claude Code に、証拠に基づく根本原因分析をガイドします。
より良い Go テストを構築する
作成者 89jobrien
Go チームには、ユニット、統合、モック、ベンチマーク、カバレッジにわたって一貫したテストが必要です。このスキルは、Claude、Codex、Claude Code が開発中に適用できる実践的な Go テストパターンを提供します。
ウォーターフォールのフェーズゲートを強制する
作成者 Chemiseblanc
AI コーディングセッションでは、プレッシャーが高まると要件、設計、テストが省略されることがあります。このスキルは、文書化されたゲートを備えた厳格なウォーターフォールフロー内に作業を保ちます。
pytest TDDでPythonテストを構築
作成者 89jobrien
Pythonチームは、TDDの規律を失わずに、一貫したテスト、カバレッジ、レポートを必要とすることがよくあります。このスキルは、Claude、Codex、Claude Code向けに、pytestに焦点を当てたワークフロー、例、レポート作成ガイダンスを提供します。