デザイナー Benji Taylor が新たに公開したスキル：エージェントが React と CSS を使用して、マーケティングページのヘッダー画像、機能カード、ドキュメントの挿絵などで見られる「本物の製品のような」簡略化されたインターフェースを作成します。静的なイラストとしても、カーソル操作を含む 10〜16 秒のデモアニメーションとしても利用可能です。コンポーネントライブラリ、数十個のサンプル、録画スクリプトが同梱されており、エージェントは完成品を撮影して自己チェックを行うことができます。
セキュリティ監査：未監査
- 未スキャン
理由
- コードを書く前に計画を立てる：位置とサイズを決定（作者の参考値では、横にコピーを配置したヘッダー画像は約 720 × 340、カードは 400 × 300）、次にテーマと忠実度を決定し、さらに 3〜5 個のビートと結果を定義します。モバイルの列に収まるものは、別途 compact バージョンを作成する必要があります。
- 最も近い「ゴールドスタンダード」のサンプル（静的カード、AI チャット、フォームエラー、ドラッグ＆ドロップによる並べ替え、チャートのドラッグ、テーブル編集など）からコピーして開始することを推奨します。node scripts/film.mjs を使用して静止画と全編を撮影し、サンプルと並べて比較します。
- よくある失敗を列挙：情報過多、ワイヤーフレームのように見える、ウィンドウ全体をカード内に縮小して四辺に余白を残す、すべての要素が同等の重みを持つ、紫色とキラキラした効果の典型的な AI アイコン。実際のテキストはストーリーに関連する部分のみに配置し、一般的には 3〜7 箇所にとどめ、残りはプレースホルダーのバーを使用します。
- kit/ ディレクトリには、Stage、Window、Phone、カーソルスクリプト Act などの部品が含まれています。スキルディレクトリには MIT ライセンスが明記されています。
- skills.sh に初めて掲載されてから 1 日、24 時間でインストール数は 804（これは注目度を示すに過ぎません）
使い方
- インストールコマンドは監査合格後に表示されます。製品デモアニメーション、機能カードのイラスト、または偽のインターフェース（faux UI）を作成する際にトリガーされます。
- アカウントや外部サービスは不要です。React、react-dom、lucide-react が必要です。サンプルは npm install と npm run dev でプレビューできます。
リスク
- 本件は未監査のため、固定で C 級と判定され、インストールコマンドは表示されません。SKILL.md では、エージェントが npm で依存関係をインストールし、スキル同梱の film.mjs 録画スクリプトを実行することが求められていますが、これらのスクリプトはスキャンされていません。skills.sh のページには SKILL.md と第三者監査結果が表示されておらず、今回は GitHub の原文を確認しました。
- サンプルには Figma、Linear、Slack、Gmail などの実在製品の模倣インターフェースと実在ロゴが含まれています。SKILL.md では、インタラクションのみを借用し、他社の製品アイデンティティは借用しないことが求められています。自社ページで使用する場合、他社製品のスクリーンショットと誤解されないよう注意してください。
- リポジトリは公開直後で、スター数は一桁です。ワークフローが長く（計画、撮影、比較、再確認、REHEARSAL.md の作成）、トークン消費量が多いです。