bots

Bots

このスキルでは、ユーザーの Grok Bots をサイトに掲載します。Grok 内でプロンプトを実行すると、選択した Bot とその共有リンクが収集され、サイトにデータファイル、物理演算で積み重ねられる表示、カード、組織図ページが作成されます。

正確な物理演算で、ユーザーが選んだ Bot だけを表示

marks.js のマークと pile.js の値は正確です。紹介文は Bot 自身から取得して整え、決して創作しません。サイトに Grok Bots を表示するたびに、これを適用します。

生き生きとした目とその反応は avatar に属します。ラベルの大文字・小文字と語数は copy に属します。表面、ホバー、フォーカス、テーマ、サウンドの合図は defaults に属します。積み重ね表示以外のイージングと時間は motion に属し、コントラストは color に属します。プロジェクト独自のコンポーネントで構築することは reuse に属します。結果を開くことは verify に属し、コミットすることは ship に属します。

1. Grok でのやり取りを実行する

ユーザーがメインの Bot に貼り付けるための grok.md のプロンプトを渡します。このプロンプトでは、すべての Bot を一覧表示し、ユーザーが選ぶのを待って、選ばれた各 Bot に自分の説明を整えて書かせた後、公開チェックリストを提示します。

ユーザーが選んだ Bot だけをサイトに掲載します。見栄えがよいという理由で追加された Bot は bots-user-picks です。

Bot が返す JSON 配列を待ちます。ユーザーが代わりに設定を直接貼り付けた場合も、同じように読み取ります。

2. 非公開情報を取り除く

Bot がすでに削除した内容にかかわらず、すべてのエントリーをもう一度確認します。メールアドレス、電話番号、住所、他人の名前、クライアント、雇用主、非公開プロジェクト、内部リンク、キー、トークン、アカウント情報、記憶、個人情報を削除します。

判断に迷う場合は含めず、最後に一覧表示します。無害に思えたためクライアント名を残した場合は bots-strip-private です。

共有リンクは、ユーザーが貼り戻した公開済みテンプレートからのみ取得します。推測したパターンや Bot の ID から作成したリンクは bots-real-links です。

3. データファイルを1つ作成する

すべての Bot は、たとえば data/bots.ts のような型付きファイル1つに、Bot ごとに1エントリーでまとめます。エリア、形状、色は as const のユニオン型とし、shareUrl と video は省略可能にします。Bot を複数のコンポーネントに分散させることは bots-one-file です。

各エントリーには、2～3語のタイトル、1行の説明、Bot が行うことを示す3～5個の短い項目を含めます。ルーティンは「Daily idea drop, 9am」のように、時間を含むわかりやすい言葉で記述し、ツール名は短くします。Bot の指示文から段落をそのまま貼り付けることは bots-entry-shape です。

エリアには、Grok のサイドバーにあるユーザー独自のセクションを、表示されている名前と順序のまま使います。lead として指定されたエントリーがメインの Bot です。

形状と色は、grok.md の説明に従い、各 Bot の公開ページから取得します。スクリーンショットを見て形状や色を選ぶことは bots-page-marks です。

4. 各 Bot をそれぞれのマークで描画する

marks.js をコンポーネントの隣にコピーします。各 Bot は、Grok での形状と色に合わせて、MARKS[shape].path と markEyes(shape) を使って描画し、塗りには MARK_COLORS を使います。汎用アバターや円の中の頭文字は bots-real-marks です。

Black の本体にはページの文字色を、目にはページの背景色を使うため、テーマに応じて反転します。avatar で目に生き生きとした動きを付けます。

5. 山積みを作成する

ホームページに「Grok Bots」というセクションを作り、その中にカードを1つ配置します。中には通常300px幅、幅480px未満では340pxのステージを設け、各Botを絶対配置のピースとして配置します。シード付きの乱数で順序をシャッフルし、サーバーとクライアントで一致させます。

pile.jsをコンポーネントの隣にコピーし、matter-jsを追加します。ピースがマウントされたらcreatePileを呼び出し、アンマウント時にdestroyを呼び出します。

各ボディには、markHullから取得したマークの凸包を使います。これにより、星は先端で支えられ、塊は転がります。すべての形状を円にする実装はbots-hull-bodiesです。

ドラッグすると、ワールドが動き続ける間、バネを介してBotが引っ張られ、隣のBotを押しのけます。ドラッグ中にワールドを一時停止する実装はbots-drag-pushesです。ピースにはtouch-action: none、ステージにはpan-yを指定し、ページは引き続きスクロールできるようにします。

Botは接触時に押しつぶされ、速度に沿って伸びます。面積を保つために、変形を制限して正規化します。Botが大きくなったり、裏返ったりするような変形はbots-jelly-keeps-areaです。

シェイクすると、各Botが1フレームごとに3～7px上に跳ね、横には最大6px移動しますが、ステージの外には出ません。iOSでボタンのタップによりモーションへのアクセスが許可されると、スマートフォンを振ったときも同じ動きを1回実行します。シェイクでBotが表示範囲外に飛び出す実装はbots-shake-stays-inです。

on.bumpは、弱い衝突なら点滅、強い衝突なら回転としてアバターに伝えます。on.soundは、低い衝突音を再生します。音は150Hzから70msかけて64Hzまで下がり、つかんだ操作によって音声が有効化された後にのみ再生されます。ユーザーが触れる前に音が鳴る山積みはbots-quiet-until-touchedです。

タップするとBotのタイトルがピル型のラベルで表示され、Botのカードへのリンクになります。ステージ上部付近ではBotの上か下に表示します。6pxを超えるドラッグでは何も開かず、別の場所をタップすると閉じます。ドラッグでも名前が開く実装はbots-tap-namesです。

ステージが画面内にあり、動きや揺れが残っている間だけループを実行します。山積みが静止した後もループが動き続ける実装はbots-sleep-when-stillです。

動きを減らす設定では、pile.jsがオフラインで落下処理を実行し、静止した山積みを1回描画します。シェイクすると、すぐにシャッフルされます。それでも山積みが転がり続ける実装はbots-settle-when-reducedです。

ステージの下には同じサイズのボタンを2つ配置します。「Shake Bots」は落ち着いたグレーの背景、「View Bots」は塗りつぶしのプライマリスタイルにし、Teamページにリンクします。ステージの隅にアイコンボタンが1つだけある実装はbots-two-actionsです。

6. カードを作成する

BotCardには、マーク、タイトル、2行の説明を表示します。開くと、Botの機能、ルーティン、小さなタグとして表示されるツール、任意のミュートされたループ動画が表示されます。同じ行のカードは高さをそろえます。

「Copy This Bot」を押すと共有リンクを新しいタブで開き、スクリーンリーダーにもその旨を伝えます。リンクのないBotにはボタンを表示しません。「Link Coming Soon」という無効なボタンはbots-no-dead-copyです。

7. Teamページを組織図としてレイアウトする

リードBotを最上部に単独で配置します。細い線をエリア見出しの行まで伸ばし、各エリアのBotを見出しの下に縦に並べます。幅560px未満では、左端に線を通した1列のレイアウトにします。

ページ幅にエリアを横並びで収められない場合は、すべての幅で1列のツリー表示を使用します。各エリアは線から枝分かれする直角の線でつなぎ、その下にBotをグリッドで配置します。

線はボーダートークンを使った1pxのボーダーで描画します。リードBotも線もなく、エリアをグリッドで縦に積み重ねる実装はbots-org-chartです。

サイトでページを列挙している場所（サイトマップ、ナビゲーション、Markdownのミラーなど）に、このページを登録します。

8. 表示して報告する

ホームページとTeamページを両方のテーマで開き、山積みをシェイク、ドラッグ、タップします。

最後に3つのリストを作成します。作成または変更したファイル、確信が持てず削除または省略したすべての詳細、リンクがまだないBotです。最後のリストの下に、リンクを作成するためのGrokの手順を記載します。これらを記載せずに「done」で終える実装はbots-list-what-is-missingです。

ペア

各チェックはペアになっています。問題のある行の隣に、それを置き換える行があります。

ルール	問題のある例	置き換え
bots-user-picks	リストにあったため、25 個すべての Bot を追加	round 1 でユーザーが指定した Bot のみ
bots-strip-private	「Acme の Sarah と通話を予約」	「通話を予約」
bots-real-links	手作業で作成した https://x.ai/bot/sleep-coach	ユーザーが Publish の後にコピーしたリンク
bots-one-file	3 つのコンポーネントに Bot の説明文をインラインで記述	data/bots.ts に Bot ごとに 1 エントリー
bots-entry-shape	Bot の指示から抜き出した 90 語の説明	「安定した就寝時間と、穏やかな就寝前のひとときを守ります。」
bots-real-marks	灰色の円にイニシャル	marks.js にある Bot 独自の形状と色
bots-page-marks	サイドバーのアイコンから推測した shape: "clover"	Bot の x.ai ページで確認した shape: "cloud"
bots-hull-bodies	すべての Bot に Bodies.circle	markHull(shape) の Body.create({ vertices })
bots-drag-pushes	Engine.update の前に if (dragging) return	スプリングの Constraint を使い、ワールドの更新を継続
bots-jelly-keeps-area	Bot が大きくなる scale(1.4, 0.8)	行列を制限し、行列式の平方根で割る
bots-shake-stays-in	y: -(8 + Math.random() * 10)	y: -(3 + Math.random() * 4)
bots-quiet-until-touched	ページ読み込み時、最初に落としたときにドンという音が鳴る	つかんで音声が有効になった後にのみ音を鳴らす
bots-tap-names	ドラッグを終えると名前が開く	移動距離が 6px 未満のタップで名前を開く
bots-sleep-when-still	requestAnimationFrame を無期限に実行	すべてのボディが静止し、揺れがなくなったらループを停止
bots-settle-when-reduced	モーション低減設定でも Bot が転がる	積み重なった状態を一度だけ描画し、揺らすと瞬時に並べ替える
bots-two-actions	ステージの隅にシャッフルアイコン	「Bot を揺らす」と「Bot を表示」を横並びに配置
bots-no-dead-copy	無効化された「リンクは近日公開」ボタン	リンクが存在するまでボタンを表示しない
bots-org-chart	カードを積み重ねた 3 つのグリッド	上部にリード、その下に各領域への線、さらにその下に Bot
bots-list-what-is-missing	「Bot ページを追加しました」	ファイル、削除した詳細、リンクのない Bot

報告

重大度。 HIGH は、ページ上にある非公開の詳細、ユーザーが選んでいない Bot、または Grok からコピーされていないリンクです。MEDIUM は、ドラッグ中に積み重なった状態で固まる、揺らすと Bot が失われる、Bot が裏返る、モーション低減設定でも動く、または機能しないコピー用ボタンです。円形のボディ、停止しないループ、タッチ前の音、組織図ではなく平坦なグリッド、または不足項目の一覧がないことも MEDIUM です。LOW は、長い説明、推測した形状や色、隅にある単独のボタン、またはドラッグで名前が開くことです。

形式。 根本原因ごとに 1 件報告します。

file:line - [rule-id] what is wrong

続いて、Rule | Count | Severity の概要を記載します。HIGH が 1 件でも残っている場合は Block、それ以外は Approve とします。セットアップを確認できなかった Bot には Not verified と記します。