Add Camera Capture to React Apps
Web camera integration requires permission handling, preview state, and device controls. This skill guides Claude, Codex, and Claude Code through the provided React hook.
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "extension-camera" from https://skillstore.io/skills/caffeinelabs-extension-camera.md and its manifest at https://skillstore.io/api/skills/caffeinelabs-extension-camera/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
「extension-camera」を使用しています。 Add a basic camera preview to a React form.
期待される結果:
「extension-camera」を使用しています。 Design a mobile photo capture workflow.
期待される結果:
「extension-camera」を使用しています。 Review camera error handling.
期待される結果:
The review identifies missing permission feedback, premature controls, collapsed preview dimensions, retry gaps, and unsupported desktop switching.
All four external-command findings are false positives caused by Markdown backticks around TypeScript examples. The hardcoded URL is a documentation link and does not initiate network traffic. No prompt injection, exfiltration, or other semantic security issue was found.
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
https://skillstore.io/skills/caffeinelabs-extension-camera/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/caffeinelabs-extension-camera?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/caffeinelabs-extension-camera?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/caffeinelabs-extension-camera/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/caffeinelabs-extension-camera.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>caffeinelabs. (2026). extension-camera security audit report (audit version 1) [Author version 0.1.4]. Skillstore. https://skillstore.io/skills/caffeinelabs-extension-camera/audits/1@techreport{caffeinelabs-caffeinelabs-extension-camera-2026,
author = {caffeinelabs},
title = {extension-camera security audit report (audit version 1)},
institution = {Skillstore},
year = {2026},
number = {1},
url = {https://skillstore.io/skills/caffeinelabs-extension-camera/audits/1},
note = {Author version 0.1.4}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "extension-camera security audit report (audit version 1)"
version: "0.1.4"
type: report
authors:
- name: "caffeinelabs"
date-released: "2026-07-22"
url: "https://skillstore.io/skills/caffeinelabs-extension-camera/audits/1"
identifiers:
- type: other
value: "skillstore:caffeinelabs-extension-camera:audit:1"
description: "Skillstore immutable audit report identifier"
Add a responsive preview and photo capture controls to a React form.
Implement rear-camera capture and supported camera switching for a mobile workflow.
Add loading, permission, unsupported-browser, and retry states to a camera interface.
Add a React camera preview using @caffeineai/camera. Include start and stop controls, responsive dimensions, and visible permission errors.
Create a camera component that previews video and captures a photo. Disable actions until initialization completes and handle a failed capture.
Build a mobile camera interface with front and rear modes. Enable switching only when supported and preserve stable preview dimensions.
Review this camera component: [component]. Correct permission, timeout, loading, retry, cleanup, and desktop switching behavior using the documented hook.
作成者
caffeinelabsライセンス
MIT
作者バージョン
v0.1.4
Skillstore リビジョン
r1
参照
70c19b3c1d1efbdf7557d8f9aaa5ec54489edc36
メンテナンスの新しさ
2026/7/22
利用状況
0 ダウンロード · 0 閲覧
ファイル構成
📄 SKILL.md
Expose Canister Data Through OQL
Structured canister data is difficult for intelligence agents to query safely. This skill adds OQL entities, schema discovery, query execution, relationships, and per-entity authorization.
Troubleshoot Motoko Migration Failures
Motoko migration errors can conflict with current source code and put deployed state at risk. This reference explains diagnostics and forward-only repairs while preserving migration history.
Build TMDb Movie and TV Features
Movie and TV integrations often fail because generated clients hide authentication, response shapes, and unsupported operations. This skill gives Caffeine developers a tested implementation path for catalog reads, credential handling, and service limits.
Caffeine AIアプリにユーザー承認を追加する
アプリケーションには、保護された機能を公開する前にユーザーの利用を許可するための、制御された仕組みが必要です。このスキルでは、バックエンドの承認チェックとフロントエンドの管理ワークフローについて説明します。
Query OQL Canisters with the ICP CLI
Writing OQL queries requires exact schema names, JSON types, Candid escaping, and careful pagination. This skill provides practical patterns for reliable, read-only canister queries.
Add Object Storage to Caffeine AI Apps
Large files need storage beyond Internet Computer canister limits. This skill guides Caffeine AI projects through backend integration, browser uploads, cached display, downloads, and troubleshooting.
シニアのガイダンスでフルスタックアプリを構築
作成者 alirezarezvani
フルスタックプロジェクトでは、一貫したセットアップ、アーキテクチャ選定、品質チェックが必要になることがよくあります。このスキルは、React、Next.js、Node.js、GraphQL、PostgreSQL の作業向けにスクリプトとリファレンスを提供します。
React View Transitions を実装する
作成者 vercel-labs
React view transitions は配置を誤りやすく、意図しない静かなアニメーションや目立つアニメーションを引き起こします。このスキルは、route、Suspense、list、shared element のアニメーション選択を導きます。
型安全なReactコンポーネントを構築
作成者 softaworks
React TypeScript の作業では、event、hook、route の正確な型が必要になることがよくあります。このスキルは、型付きcomponents、React 19 APIs、routing に焦点を当てたパターンを提供します。
本番環境対応のフロントエンド機能を構築
作成者 davila7
フロントエンドチームには、プロジェクト間で一貫したReactおよびNext.jsのガイダンスが必要です。このスキルは、フロントエンド分析のためのリファレンスワークフロー、品質プラクティス、ヘルパースクリプトを提供します。
Next.js パフォーマンスの最適化
作成者 Atman36
Next.js アプリケーションは、大きなバンドル、弱いキャッシュ、最適化されていないメディアによって遅くなることがあります。このスキルは、Claude、Codex、Claude Code が本番アプリ向けに的を絞ったパフォーマンス改善を行えるよう支援します。
React と Next.js のパフォーマンス最適化
作成者 vercel-labs
React と Next.js アプリは、ウォーターフォール、大きなバンドル、回避可能な再レンダリングによって速度が低下しがちです。このスキルは、エージェントがより安全にパフォーマンス重視の変更を行うための具体的なルールを提供します。