run-ui-registry-variations

run-ui-registry-variations

手作業でインターフェースコードを作成するのではなく、承認済みのコンポーネントレジストリを起点にする必要がある UI 作業のための手動ワークフローです。まずレジストリへのアクセスを厳格に確認してから、ユーザーが比較できる実際のバリエーションを 3 つ作成します。

使用するタイミング

• /run-ui-registry-variations <UI request>
• ユーザーが run-ui-registry-variations を明示的に指定した場合。
• shadcnblocks、Aceternity、または Darkmatter shadcn レジストリを使った 3 つの UI 案をユーザーが求めている場合。
• ユーザーが単発の UI、新しいデザインシステムのないプロジェクトの画面、または darkmatter.io の画面を求め、レジストリを利用した案を希望している場合。

使用しないタイミング

• ユーザーがどのレジストリを使うべきかだけを尋ねている場合。直接回答するか、ui-ux-pro-max を使用してください。
• プロジェクトが独自のデザインシステムを持つ主要アプリで、ユーザーがこのスキルを明示的に呼び出していない場合。
• タスクがバックエンド、インフラ、コピーライティング、または視覚要素を伴わない場合。
• ユーザーが代替案を求めず、最終実装を 1 つだけ求めている場合。

契約

1. 視覚構造のコンポーネントソースとして使用できるのは、shadcnblocks、Aceternity、または https://shadcn.darkmatter.io のみです。
2. ソースを使用する前に、レジストリへのアクセスを検証してください。shadcnblocks と Aceternity では API キー／トークンの検証が必要です。shadcn.darkmatter.io では実際に取得できることを確認してください。
3. バリエーションを必ず 3 つ作成してください。説明やムードボードだけで終わらせないでください。
4. デフォルトの UI 方針を置き換える前に、3 つすべてのバリエーションをユーザーに提示してください。
5. シークレットを保護してください。API キー、復号されたレジストリ設定、トークンを含む非公開 URL、または生成された平文の認証情報ファイルを出力してはいけません。
6. 承認されていないコンポーネントソースを埋め合わせに使わないでください。ソースの検証に失敗した場合は、検証済みの別の許可済みソースを使うか、作業を中止してください。

ワークフロー

1. 対象範囲を定める

対象となるルート、コンポーネント、ページ、またはプロトタイプの画面を特定します。アプリに既存のデザインシステムがある場合は、まずそれを確認し、バリエーションがそのシステムと互換性を保つようにします。

デザインシステムのない Darkmatter の作業、darkmatter.io、および単発の UI では、デフォルトのベースラインとなるビジュアル言語に https://shadcn.darkmatter.io を使用します。

2. レジストリ設定を確認する

次の順で、該当しそうな設定元を確認します。

1. レジストリ設定に関するプロジェクトドキュメント。
2. components.sops.json、secrets/*.sops.json、またはその他の暗号化されたプロジェクト設定。
3. 平文の components.json、.env.local、.env、またはパッケージスクリプト。

暗号化された設定がある場合は、sops-secret-access を使用してください。必要なものだけを復号し、パイプまたは一時ファイルを優先し、復号した内容を出力しないでください。

確認する一般的な非公開トークン名は次のとおりですが、これらがすべてとは限りません。

• SHADCNBLOCKS_API_KEY、SHADCNBLOCKS_TOKEN、SHADCNBLOCKS_REGISTRY_TOKEN
• ACETERNITY_API_KEY、ACETERNITY_TOKEN、ACETERNITY_REGISTRY_TOKEN

3. アクセスを検証する

利用する可能性が高い代替先が shadcn.darkmatter.io であっても、shadcnblocks と Aceternity の両方について、必ずプライベートプロバイダーの事前確認を試みてください。プライベートプロバイダーのキーを取得できない場合は、そのプロバイダーをブロック済みとし、使用しないでください。

使用予定の各ソースについて、以下を確認します。

• shadcnblocks：API キー／トークンが存在し、認証済みのレジストリリクエストで受け付けられることを確認します。
• Aceternity：API キー／トークンが存在し、認証済みのレジストリリクエストで受け付けられることを確認します。
• shadcn.darkmatter.io：curl またはプロジェクトのレジストリツールでレジストリエンドポイントに到達できることを確認します。

レジストリ URL と環境変数名がわかっている場合は、bun scripts/validate-registry-access.ts（このスキルのコピー）を使用してください。プロジェクト独自のレジストリツールを使っている場合は、レジストリのインデックスまたは既知のコンポーネントを 1 つ取得する、最小限の読み取り専用コマンドを実行してください。

プライベートプロバイダーの検証に失敗した場合、そのプロバイダーをバリエーションに使用しないでください。検証済みの許可済みソースがあれば作業を続けます。検証に成功した許可済みソースがない場合は、作業を中止し、ブロックされたプロバイダーの確認結果を報告してください。

4. コンポーネントを選択する

各バリエーションでは、参照元のレジストリと、使用した具体的なコンポーネント／ブロックを明記する必要があります。すべて利用可能な場合は、異なる3つの参照元を優先してください。

1. バリエーション A：shadcnblocks
2. バリエーション B：Aceternity
3. バリエーション C：shadcn.darkmatter.io

1つまたは2つの参照元のみ検証できた場合でも、3つのバリエーションを作成してください。ただし、すべてのビジュアル構造は、検証済みの許可された参照元のみから構成してください。

5. 3つのバリエーションを作成する

説明文だけでなく、実際に動作するコード成果物を作成してください。

• 個別のコンポーネントファイル、明確な名前のエクスポート、プレビュールート、タブ、Storybook ストーリー、またはユーザーが3つすべてを比較できるその他のローカルパターンを使用します。
• データ契約とビジネスロジックは共有し、レイアウト、情報密度、インタラクションの表現、視覚的な強調を変えます。
• ユーザーが選択する前に、いずれかのバリエーションを最終的なデフォルトとして設定しないでください。
• レジストリのコンポーネントをラップまたは組み合わせて使用する場合を除き、独自に作成した Tailwind のシェルをむやみに使用しないでください。

6. 検証して提示する

変更した範囲について、アプリで通常実行するフロントエンドチェックを実行してください。ブラウザプレビューが可能な場合は、デスクトップとモバイルの幅で3つすべてのバリエーションをキャプチャするか、表示を確認してください。

結果は reference/variation-template.md に従って提示してください。以下を含めます。

• shadcnblocks、Aceternity、shadcn.darkmatter.io の検証ステータス。
• 各バリエーションで使用した参照レジストリとコンポーネント。
• レビュー用のローカルパス／ルート。
• 利用がブロックされているプロバイダーと、その機密情報を含まない理由。

ツール

scripts/validate-registry-access.ts

レジストリエンドポイントへの接続を検証します。環境変数からトークンを任意で使用できますが、トークンは出力されません。

bun skills/run-ui-registry-variations/scripts/validate-registry-access.ts \
  shadcnblocks "$SHADCNBLOCKS_REGISTRY_URL" SHADCNBLOCKS_API_KEY

bun skills/run-ui-registry-variations/scripts/validate-registry-access.ts \
  aceternity "$ACETERNITY_REGISTRY_URL" ACETERNITY_API_KEY

bun skills/run-ui-registry-variations/scripts/validate-registry-access.ts \
  shadcn-darkmatter https://shadcn.darkmatter.io

依存関係： Bun（fetch）。トークンが SOPS に保存されている場合は、まずプロジェクトで承認された SOPS の手順で環境変数に読み込んでください。

参考資料

• reference/variation-template.md — 3つのバリエーションとプロバイダーの検証結果を提示するための出力形式。