メインコンテンツへスキップ

Documentation Index

Fetch the complete documentation index at: https://docs.bricks.tools/llms.txt

Use this file to discover all available pages before exploring further.

bricks-ctor には内蔵 skills が含まれており、bun install の実行時にプロジェクトへ自動的にインストールされます。これらの skills は、AI コーディングエージェントが BRICKS アプリケーションを理解・構築するためのドメイン知識を提供します。
Skills は再利用可能な指示ドキュメントで、AI エージェントにコンテキストを提供します。skills の仕組みについては CTOR skills リファレンス を参照してください。

​
bricks-ctor

bricks-ctor skill は <project>/.bricks/skills/bricks-ctor/ にインストールされます（.claude/skills/ と .codex/skills/ に互換性シムリンクあり）。BRICKS ランタイムのアーキテクチャパターンと設定リファレンスを提供します。 使用場面： BRICKS アプリケーションを構築・設定する際に、ドメイン固有のガイダンスが必要なとき。

​
カバーするトピック

フロー分解戦略とパターン選択の優先順位。ユーザーフローをジェネレーター、イベントアクションチェーン、システムアクション、Data Calculation の最もシンプルな組み合わせに分解する方法を教えます。
アニメーションシステムリファレンス。3 種類のアニメーションタイプ（timing、spring、decay）、9 つのアニメーション可能なプロパティ、10 種類以上のイージング関数、組み合わせアニメーション（parallel/sequence）を網羅します。
Canvas の入退場アニメーションと共有要素トランジション。5 つのスタンバイモード（top、bottom、left、right、custom）とフレームオプション、タイミングのベストプラクティスを説明します。
E2E テストフレームワーク。3 種類の自動化タイプ（launch、anytime、cron）、シミュレーションアクション（brick プレス、キーイベント、HTTP リクエスト）、スクリーンショットによる視覚的回帰を含む 6 種類以上のアサーションタイプを含みます。
JavaScript サンドボックス化された実行環境リファレンス。25 種類以上の内蔵ライブラリ（lodash、moment、crypto、compression など）を搭載。トリガーモード、非同期操作、複数出力、避けるべきアンチパターンを説明します。
マルチディスプレイ設定向けの LAN デバイス同期。メイン/サブデバイスの役割、実行モード、subspace とデータレベルの設定、ビデオウォールやインタラクティブキオスクなどのユースケースを説明します。
クラウドデータ同期。3 種類のリモート更新タイプ、非技術者向けの Web 更新ページ生成、認証付き REST API アクセス、アクセス制御によるデータルーティングを提供します。
アセット管理。メディアボックスの整理、ジェネレーターの Media Flow によるファイル一覧、4 種類のプロパティ（image、video、audio、lottie）、アップロード方法、CDN 配信を網羅します。
リモート AI 推論オフロード。機能交換、戦略オプション（prefer-local、prefer-buttress、prefer-best）、サーバーセットアップ、GPU 設定を説明します。

​
bricks-design

bricks-design skill は <project>/.bricks/skills/bricks-design/ にインストールされます。Application と Subspace のビジュアルデザイン規律です——タイポグラフィ、カラーパレット、アセット取得、デザイン言語、システムコミット、ビジュアルリズム、ブランド系作業を扱います。 使用場面： ビジュアル、美学、システム、スタイル、ブランドアセットに関わる作業——たとえブリーフが製品用語（slideshow、kiosk、signage、menu board、lobby screen、museum display）で表現されていたり、Figma ファイル、ウェブサイト、スクリーンショット、PDF、ブランドブックが起点であっても適用されます。
エンドツーエンドのブリーフ（「X 向けの kiosk を設計する」「Y を紹介するプレゼンテーションを作る」）では、bricks-design は bricks-ux と並行で起動します。ビジュアルレイヤーはこちら、インタラクションの形状はあちらが担当します。

​
カバーするトピック

BRICKS デザインの根幹を支える 10 の法則——Canvas は状態、Data は動的値の伝達路、Canvas をまたいで共有された Brick id は自動補間、Switch は比較する一方で Data hit は等価マッチのみ、Generator はヘッドレスで非同期、frame はグリッド単位、Standby Transition はデザイン言語の一部、Subspace は型付きモジュール、DataCalculation は派生計算専用、scroll/overflow/responsive reflow は存在しない。
段階的デリバリー（一気に完成へ走らない）：デプロイメントコンテキストの確認、デザインシステムをコメントブロックで宣言、まず 1 つの Showcase Canvas をロックダウン、Canvas をまたいで共有された hero id で Canvas グラフ全体を展開、スペーシングリズムと多言語フィットを磨き込み、最後に検証とセルフクリティークを実施。
厳選されたビジュアル言語ライブラリ（Swiss Editorial、Kenya Hara の余白、Field.io のモーションポエティクス、Brutalist web、Y2K futurist-retro など）。10 のディレクション × 5 のスクールにわたり、それぞれグリッドスタンスとグリッド単位で表現されたスペーシングスケールを備えます。ディレクションアドバイザーは曖昧なブリーフに対し、スクールをまたぐ 3 つの候補を提示します。
ビジュアル検査を最優先するプロトコル——markdown 抽出から翻訳することは決してしません。ブラウザ自動化を駆使してすべてのページや frame をキャプチャし、画像読み取り機能で各スクリーンショットを見直してから、BRICKS ネイティブの等価物を構成します。
ロゴ、商品写真、UI スクリーンショット、シーン写真、モーション素材の 5 ステップ取得プロトコル——5-10-2-8 の品質基準を 5 つの命名スコアリングディメンションで評価し、カテゴリごとに 3 つのフォールバック経路を用意し、Brick が DataLink 経由で Media Flow Data を参照することを構造的に強制します（埋め込みや再描画は禁止）。
Canvas グラフの形状判断（線形スライドチェーン vs. ハブ＆スポーク vs. 演出付きリビール）、共有 Brick の自動補間によるヒーローの連続性、「ナレーション付き PowerPoint」化を避けるルール、シーケンシャル作品向けの初見視聴者ルーブリック。
Generator の境界でスロットリング、Data 履歴は明示的に制限、persistData: true は last-known-good と冪等性キー専用、ブート Canvas はキャッシュ済みの Data だけで 1 秒以内にレンダリング、ネットワーク Generator にはオフラインファースト包装を適用。加えて、Subspace の濫用、Switch のファンアウト、DataCalc チェーン、過剰アニメーション、Canvas インフレーションといった複雑度のサインも扱います。
トークンコスト順に並んだ 3 つのパターン——Data プリセット（デフォルト）、共有モジュール、独立 Subspace——を段階的デリバリーフローと組み合わせます。比較サーフェスはチャットとソースツリーであり、本番に Canvas 内テーマスイッチャーを残すことはありません。
完了の定義：すべての Canvas が preview MCP でスクリーンショット化され、各スクリーンショットは画像読み取り機能で見直され、参照素材と並べて差分レポートを作成し、コンソールはクリーン。デフォルトでパス 1（Electron preview MCP）を使用し、デプロイメントがハードウェア挙動に依存する場合（決済、ID キャプチャ、周辺機器、Local Sync）はパス 2（オンデバイス DevTools、CDP は :19851）にエスカレートします。
各 Canvas をシステムコミット、ビジュアルヒエラルキー、クラフト、機能適合度、独自性の 5 ディメンションで評価。アンチスロップスイープでは、ルーチンナビゲーションでの snap キャンバス遷移、Data をバイパスしたハードコード動的文字列、ノータッチハードウェアでの hover アフォーダンス、ブランド素材の手描き模倣、アグリゲーター取得ロゴをそのまま出荷することを排除します。

​
bricks-ux

bricks-ux skill は <project>/.bricks/skills/bricks-ux/ にインストールされます。Canvas、Brick、Generator、Data で構築されたあらゆる Application や Subspace のインタラクションデザイン規律です——ユーザージャーニー、インタラクション原型、フロー状態、押下可能要素の構成、モニタリング画面、アクセシビリティを扱います。 使用場面： ユーザビリティ、フロー、ジャーニー、アフォーダンス、フィードバック、リカバリー、アクセシビリティに関わる作業——「このフローを監査する」「ユーザビリティを改善する」「待機状態を設計する」「エラーパスを修正する」「モニターのアラーム状態を設計する」「多言語向けに設計する」「アイドルとアトラクター状態を設計する」など。
bricks-ux はエンドツーエンドのブリーフで bricks-design と並行で起動します。Web のインタラクション習慣（hover アフォーダンス、スクロール露出、デフォルトのモーダル、ページ submit フォーム）は、ノータッチや周辺機器駆動のハードウェアには転用できません。

​
カバーするトピック

あらゆるインタラクションが従う 7 ステップ——アフォーダンス、指示、即時フィードバック、進行中の可視性、継続、リカバリー、クロージャ。このスキャフォールドはデバイス特有のレシピを置き換えます。QR スキャン、顔検出、BLE プロキシミティ、NFC タップ、決済、音声マイク、タッチはすべて同じ形状に従います。
ユーザーが BRICKS の画面の前で行う 6 つのこと——glance、browse、interact、transact、monitor、dwell。各原型は Subspace の構造（Canvas 数、主要 Brick 家系、モーション語彙）、失敗のサイン、最も重みが大きい UX ディメンションを決定します。
7 つのファーストクラス状態——アイドル、アトラクター、ローディング、エンプティ、エラー、ブート、メンテナンス——それぞれに普遍原則、BRICKS ネイティブの表現メモ、エージェント作業で繰り返し見られる失敗モードを記載。アイドルは「最後にロードされた何か」ではなく、設計された Canvas です。
複合ボタンにおいて on_press がどの階層に置かれ、どの内部 Brick が pressable: 'bypass' になるかを意図的に決定します。アフォーダンスはビジュアル的に判別可能でなければならず、押下可能なタイルが装飾的なタイルと同じ見た目になってはいけません。
Calm／detect／demand の三段規律。calm は読みやすく忘れられるべき、変化は注意を強要せずに検知できるべき、demand は狼少年にならず応答を促すべき。陳腐化したデータは無いより悪い。アラーム階層はストレス下でも機能します。
コントラスト、文字サイズ、色だけに頼らない、運動可動域、reduced-motion、予測可能なナビゲーション、音声手がかりの各フロアをデプロイメント相対で設定。視認距離、環境光、ユーザー姿勢、ハードウェア能力を基にキャリブレーションし、ピクセル値で固定しません。
デプロイメントリスクで分類されたクリティーク——決済／ID／安全クリティカルは CRITICAL、インタラクションとアラーム付きモニターは HIGH、browse／dwell は MEDIUM、glance／loop は LOW。セクションごとに Must Have／Anti-Pattern のペアを掲載。bricks-design クリティークと並行で実施し、両方とも出荷をブロックします。