For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /ja/docs/web/ui-kit.md (or send Accept: text/markdown).
UI キットとブロック
共有コンポーネント、デザイントークン、ブロックカタログ。
始める前に
[ファイル] → [フォルダーを開く] を使用して、Visual Studio Code でダウンロードした supastack プロジェクトを開き、[ターミナル] → [新しいターミナル] を選択します。リポジトリ ルートは、package.json、アプリ、およびパッケージを含むフォルダーです。そこで以下のコマンドを実行し、ターミナルを開いたままにしておきます。コマンドが認識されない場合は、続行する前にツールのインストール ガイドを完了してください。
まずプラットフォームのチュートリアルをお読みください。サーバーは、ブラウザまたは電話のリクエストに応答するアプリ プロセスです。 Web は apps/web/.env.local を読み取り、Expo は apps/mobile/.env.local を読み取り、データベース移行コマンドは root .env を読み取ります。データベースなしの /dashboard デモは、Postgres の移行が必要な実際の /auth アカウントとは別のものです。電話またはデスクトップのみのチェックアウトには、別途実行される Web バックエンドが必要です。
corepack pnpm --filter @supastack/web devインストールとセットアップ
packages/ui-web には共有プロダクトコンポーネント(ボタン、入力、カード、バッジ、ダイアログ、シェル部品)があり、packages/design-tokens は app-theme.css が CSS 変数にマップするトークンソースです。/kit-blocks ルートはブロックカタログ(プロダクトに持ち込める合成セクション)をマウントします。
apps/mobile は同等のネイティブプリミティブとして packages/ui-native を消費するため、サーフェスのスタイリングはプラットフォームごとに保たれつつコントラクトは共有されます。
# Preview shared blocks and gallery
corepack pnpm --filter @supastack/web dev
# Then open http://localhost:3000/kit-blocks in your browser
# Theme tokens used by components
var(--page) var(--section) var(--raised)
var(--text) var(--muted) var(--border)
var(--accent) var(--accent-ink) var(--radius-*)実装ワークフロー
まず共有コンポーネントから画面を組み立て、キットで表現できないパターンのときだけカスタム要素に頼ってください。新しい共有部品はトークン駆動のスタイリングで ui-web に置き、すべてのテーマパックが自動的に適用されるようにします。
マーケティングコンポーネント(src/marketing)はプロダクトサーフェスの外に、またその逆も — 二つの chrome システムは意図的に分離されています。
検証とトラブルシューティング
新しいコンポーネントをすべての density/radius/font プリセットと、少なくともライト・ダーク各一つのパックで検証します。キーボードフォーカス、320px のレイアウト、reduced motion を確認してください。/settings/appearance のキットギャラリーが最速の確認方法です。