# Tamaguiデザインシステム

## Tamaguiデザインシステムのインターフェースプレビュー

習慣を追加し、進捗を記録し、未完了の項目を絞り込み、青のテーマを切り替えます。

## Tamaguiデザインシステムの設計リファレンス

2.7.7の@tamagui/config/v5と@tamagui/themesが出力する値、および検証済みのネイティブコンポーネントの仕様。

### v5のサイズトークン

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| size.$1 | 20 | 実際のv5設定値。同じ数値のトークンラベルでも、サイズ、スペース、角丸では意味が異なります。$4を共通のピクセル値として扱わないでください。 |
| size.$2 | 28 | 実際のv5設定値。同じ数値のトークンラベルでも、サイズ、スペース、角丸では意味が異なります。$4を共通のピクセル値として扱わないでください。 |
| size.$3 | 36 | 実際のv5設定値。同じ数値のトークンラベルでも、サイズ、スペース、角丸では意味が異なります。$4を共通のピクセル値として扱わないでください。 |
| size.$4 | 44 | 実際のv5設定値。同じ数値のトークンラベルでも、サイズ、スペース、角丸では意味が異なります。$4を共通のピクセル値として扱わないでください。 |
| size.$5 | 52 | 実際のv5設定値。同じ数値のトークンラベルでも、サイズ、スペース、角丸では意味が異なります。$4を共通のピクセル値として扱わないでください。 |
| size.$6 | 64 | 実際のv5設定値。同じ数値のトークンラベルでも、サイズ、スペース、角丸では意味が異なります。$4を共通のピクセル値として扱わないでください。 |
### v5のスペーストークン

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| space.$1 | 2 | 実際のv5設定値。同じ数値のトークンラベルでも、サイズ、スペース、角丸では意味が異なります。$4を共通のピクセル値として扱わないでください。 |
| space.$1.5 | 4 | 実際のv5設定値。同じ数値のトークンラベルでも、サイズ、スペース、角丸では意味が異なります。$4を共通のピクセル値として扱わないでください。 |
| space.$2 | 7 | 実際のv5設定値。同じ数値のトークンラベルでも、サイズ、スペース、角丸では意味が異なります。$4を共通のピクセル値として扱わないでください。 |
| space.$2.5 | 10 | 実際のv5設定値。同じ数値のトークンラベルでも、サイズ、スペース、角丸では意味が異なります。$4を共通のピクセル値として扱わないでください。 |
| space.$3 | 13 | 実際のv5設定値。同じ数値のトークンラベルでも、サイズ、スペース、角丸では意味が異なります。$4を共通のピクセル値として扱わないでください。 |
| space.$3.5 | 16 | 実際のv5設定値。同じ数値のトークンラベルでも、サイズ、スペース、角丸では意味が異なります。$4を共通のピクセル値として扱わないでください。 |
| space.$4 | 18 | 実際のv5設定値。同じ数値のトークンラベルでも、サイズ、スペース、角丸では意味が異なります。$4を共通のピクセル値として扱わないでください。 |
| space.$5 | 24 | 実際のv5設定値。同じ数値のトークンラベルでも、サイズ、スペース、角丸では意味が異なります。$4を共通のピクセル値として扱わないでください。 |
| space.$6 | 32 | 実際のv5設定値。同じ数値のトークンラベルでも、サイズ、スペース、角丸では意味が異なります。$4を共通のピクセル値として扱わないでください。 |
### v5の角丸トークン

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| radius.0 | 0 | 実際のv5設定値。同じ数値のトークンラベルでも、サイズ、スペース、角丸では意味が異なります。$4を共通のピクセル値として扱わないでください。 |
| radius.1 | 3 | 実際のv5設定値。同じ数値のトークンラベルでも、サイズ、スペース、角丸では意味が異なります。$4を共通のピクセル値として扱わないでください。 |
| radius.2 | 5 | 実際のv5設定値。同じ数値のトークンラベルでも、サイズ、スペース、角丸では意味が異なります。$4を共通のピクセル値として扱わないでください。 |
| radius.3 | 7 | 実際のv5設定値。同じ数値のトークンラベルでも、サイズ、スペース、角丸では意味が異なります。$4を共通のピクセル値として扱わないでください。 |
| radius.4 | 9 | 実際のv5設定値。同じ数値のトークンラベルでも、サイズ、スペース、角丸では意味が異なります。$4を共通のピクセル値として扱わないでください。 |
| radius.5 | 10 | 実際のv5設定値。同じ数値のトークンラベルでも、サイズ、スペース、角丸では意味が異なります。$4を共通のピクセル値として扱わないでください。 |
| radius.6 | 16 | 実際のv5設定値。同じ数値のトークンラベルでも、サイズ、スペース、角丸では意味が異なります。$4を共通のピクセル値として扱わないでください。 |
### light_blueセマンティックテーマ

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| light_blue.background | hsla(207, 100%, 98%, 1) | v5のブルーテーマから解決されるセマンティックな役割。ホバー、押下、アクティブ状態では、コンポーネントがさらに具体的な子テーマを選ぶ場合があります。 |
| light_blue.backgroundHover | hsla(210, 100%, 99%, 1) | v5のブルーテーマから解決されるセマンティックな役割。ホバー、押下、アクティブ状態では、コンポーネントがさらに具体的な子テーマを選ぶ場合があります。 |
| light_blue.backgroundPress | hsla(205, 92%, 95%, 1) | v5のブルーテーマから解決されるセマンティックな役割。ホバー、押下、アクティブ状態では、コンポーネントがさらに具体的な子テーマを選ぶ場合があります。 |
| light_blue.color | hsla(216, 71%, 23%, 1) | v5のブルーテーマから解決されるセマンティックな役割。ホバー、押下、アクティブ状態では、コンポーネントがさらに具体的な子テーマを選ぶ場合があります。 |
| light_blue.borderColor | hsla(203, 100%, 92%, 1) | v5のブルーテーマから解決されるセマンティックな役割。ホバー、押下、アクティブ状態では、コンポーネントがさらに具体的な子テーマを選ぶ場合があります。 |
| light_blue.borderColorFocus | hsla(203, 100%, 92%, 1) | v5のブルーテーマから解決されるセマンティックな役割。ホバー、押下、アクティブ状態では、コンポーネントがさらに具体的な子テーマを選ぶ場合があります。 |
| light_blue.placeholderColor | hsla(206, 100%, 50%, 1) | v5のブルーテーマから解決されるセマンティックな役割。ホバー、押下、アクティブ状態では、コンポーネントがさらに具体的な子テーマを選ぶ場合があります。 |
### dark_blueセマンティックテーマ

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| dark_blue.background | hsla(218, 39%, 11%, 1) | v5のブルーテーマから解決されるセマンティックな役割。ホバー、押下、アクティブ状態では、コンポーネントがさらに具体的な子テーマを選ぶ場合があります。 |
| dark_blue.backgroundHover | hsla(212, 69%, 16%, 1) | v5のブルーテーマから解決されるセマンティックな役割。ホバー、押下、アクティブ状態では、コンポーネントがさらに具体的な子テーマを選ぶ場合があります。 |
| dark_blue.backgroundPress | hsla(215, 42%, 9%, 1) | v5のブルーテーマから解決されるセマンティックな役割。ホバー、押下、アクティブ状態では、コンポーネントがさらに具体的な子テーマを選ぶ場合があります。 |
| dark_blue.color | hsla(205, 100%, 88%, 1) | v5のブルーテーマから解決されるセマンティックな役割。ホバー、押下、アクティブ状態では、コンポーネントがさらに具体的な子テーマを選ぶ場合があります。 |
| dark_blue.borderColor | hsla(209, 100%, 19%, 1) | v5のブルーテーマから解決されるセマンティックな役割。ホバー、押下、アクティブ状態では、コンポーネントがさらに具体的な子テーマを選ぶ場合があります。 |
| dark_blue.borderColorFocus | hsla(209, 100%, 19%, 1) | v5のブルーテーマから解決されるセマンティックな役割。ホバー、押下、アクティブ状態では、コンポーネントがさらに具体的な子テーマを選ぶ場合があります。 |
| dark_blue.placeholderColor | hsla(206, 100%, 50%, 1) | v5のブルーテーマから解決されるセマンティックな役割。ホバー、押下、アクティブ状態では、コンポーネントがさらに具体的な子テーマを選ぶ場合があります。 |
### システムフォントの役割

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| body.family | -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif | v5のシステムフォントスタックは、外部フォントのリクエストを必要としません。 |
| body.$2 | 13px / 20px | サイズと行の高さは、コンポーネントのサイズトークンとは別に定義されたフォントの役割です。同じラベルでも連動しません。 |
| body.$3 | 14px / 21px | サイズと行の高さは、コンポーネントのサイズトークンとは別に定義されたフォントの役割です。同じラベルでも連動しません。 |
| body.$4 | 15px / 23px | サイズと行の高さは、コンポーネントのサイズトークンとは別に定義されたフォントの役割です。同じラベルでも連動しません。 |
| body.$5 | 16px / 24px | サイズと行の高さは、コンポーネントのサイズトークンとは別に定義されたフォントの役割です。同じラベルでも連動しません。 |
| body.$6 | 18px / 27px | サイズと行の高さは、コンポーネントのサイズトークンとは別に定義されたフォントの役割です。同じラベルでも連動しません。 |
| body.$8 | 26px / 38px | サイズと行の高さは、コンポーネントのサイズトークンとは別に定義されたフォントの役割です。同じラベルでも連動しません。 |
### ネイティブの組み合わせ仕様

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| createTamagui | defaultConfig from @tamagui/config/v5 | Reactの外側で設定インスタンスを1つ作成し、getCSS()でWebテーマのCSSを提供します。 |
| TamaguiProvider | config + defaultTheme | ボードの状態を保ったまま、アプリケーションでライトまたはダークを選択します。 |
| Theme | name="blue" | 現在の外観に対応するブルーの子テーマを解決します。 |
| Checkbox | checked + onCheckedChange | ボードではvalue === trueの場合のみ完了として扱います。中間状態は完了ではありません。 |
| Input | value + onChangeText | 制御された下書き、トリム検証、重複時の明示的な処理。 |
| Progress | value from 0 to 100 | 完了数を全行数で割った値からインジケーターを算出します。 |
| YStack / XStack | directional layout with token gap | 別の模倣用スタイルシートを用意せず、読みやすいレイアウトを画面幅に応じて調整します。 |
## Tamaguiデザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Tamaguiデザインシステムのバージョン管理された設定とCSS

### 指定されたv5プリセットを使用する

> この例ではtamaguiと@tamagui/configのバージョンを2.7.7に固定し、@tamagui/config/v5からdefaultConfigをインポートします。設定名はv5であり、npmパッケージのメジャーバージョンではありません。この2つの数字を混同すると、インストールコマンドを誤って案内することになります。createTamaguiはコンポーネントの外側で1度だけ実行し、生成されたCSSをボードのレンダリング前に挿入して、テーマ変数とネイティブスタイルをWeb上で実際に定義します。

### 小規模な設定の上書きを明示する

このサンプルでは、paddingやbackgroundColorのように読みやすい長形式のプロパティを使うため、指定されたソースでonlyAllowShorthandsをfalseに設定しています。これはプリセットに加えたアプリケーション側の選択です。v5のベースにはアニメーションドライバーが含まれません。この例でもアニメーションドライバーを追加したり、アニメーション付きの遷移があると主張したりしません。シンプルな進捗表示とチェックボックスの動作に、別途アニメーションの依存関係を追加する必要はありません。

## Tamaguiデザインシステムのサイズ、スペース、角丸のトークン

### 同じトークンラベルを混同しない

固定されたv5設定では、サイズの$4は44、スペースの$4は18、角丸の4は9です。コンポーネントのサイズ、レイアウトの間隔、角丸は、それぞれ異なるため、共通の倍率で換算できません。リファレンスでは各カテゴリを分けて掲載し、サンプルではカテゴリに応じた実際のTamaguiプロパティを使っています。設定で使われていない汎用的な4px刻みの一覧よりも、こちらの方が実用的です。

- size.$4 = 44

- space.$4 = 18

- radius.4 = 9

- 本文フォント$4 = 15px、行の高さ23px

### 文字のスケールも分けて扱う

本文フォントの $4 は15px、行の高さは23pxです。一方、コンポーネントサイズの $4 は44のままです。システムフォントスタックはv5から提供されるため、フォントファイルのダウンロードは不要です。H1、H2、Textにはそれぞれネイティブのフォントコンテキストが適用されます。ソースに明示されたfontSizeとlineHeightの値が、元のボードの階層を決めます。外側の幅880pxはローカルなレイアウト上の選択であり、グローバルなTamaguiトークンではありません。

## Tamagui デザインシステムのセマンティックテーマと外観

### ライトまたはダークにブルーの子テーマを組み合わせる

TamaguiProviderに選択したdefaultThemeを渡し、Theme name="blue"で対応する子テーマを適用します。ソースでは、コンポーネントツリー全体で16進数の値を繰り返すのではなく、background、backgroundHover、color、borderColorの役割を使用しています。この表には実際のlight_blueとdark_blueの値を記載しているため、固定のブランドカラーを想定せず、設定に応じた値を比較できます。

### 外観を切り替えてもボードの状態を維持する

darkフラグは、行、入力欄の下書き、フィルターとは独立しています。外観を切り替えるとネイティブコンポーネントの表示は更新されますが、ボードの内容は維持されます。ボタンやチェックボックスには、それぞれ独自のコンポーネント子テーマの値を設定できるため、計算後の色は親の背景トークンと同じとは限りません。階層を独自のCSSに平坦化する前に、実際の表示状態を確認してください。

## Tamagui デザインシステムのチェックボックスと進捗の算出

### 完了状態は1つの行データに保持する

各行は、安定したID、読みやすいテキスト、doneの真偽値を持ちます。CheckboxにはcheckedとonCheckedChangeを渡し、値が文字どおりtrueの場合にのみ完了として扱います。チェック済みのマークにはCheckbox.Indicatorを使用します。隣接するテキストとアクセシブルネームは同じ習慣を示し、取り消し線でも完了状態を視覚的に表現します。ソースでは、行と同期しなくなる可能性のある別個の件数を作成していません。

### ボード全体から進捗を算出する

完了した行の数をすべての行から算出し、Progress用の割合に変換します。未完了の項目で絞り込んでも、表示内容だけが変わり、分母は変わりません。これにより、完了した行が表示から消えても進捗バーがリセットされません。件数は丁寧な通知を行うライブリージョン内にも読み上げ可能なテキストで表示されるため、バーの長さだけで割合を伝えることはありません。

## Tamagui デザインシステムの入力検証と重複時の復旧

### 実際に操作できる入力欄を用意する

InputはvalueとonChangeTextを使って、現在の下書きを保持します。「習慣を追加」アクションでは入力をトリミングし、空の場合は目に見えるメッセージ、aria-invalid、エラーの説明を表示して追加を拒否します。空のまま送信した場合は、入力欄にフォーカスを戻します。大文字と小文字を区別しない重複チェックにより、同じテキストの行が2つ追加されるのを防ぎ、修正できるよう下書きは残します。これらのルールは元のボードに属するもので、ライブラリ自体の機能ではありません。

### 有効な追加内容だけでボードを更新する

有効な下書きを追加すると、新しい未完了の行が作成され、入力欄がクリアされてエラーが消えます。行のコレクションから算出されるため、分母もすぐに更新されます。習慣を追加しても、リマインダーが登録されたりアカウントが作成されたりすることはありません。ボードの状態は意図的にローカルのReactに保持され、ドキュメントを再読み込みするとサンプルの状態に戻ります。

## Tamagui デザインシステムの絞り込み表示と空状態からの復旧

### フィルターの対象範囲を明示する

「未完了のみを表示」では、完了した行をコレクションに保持したまま表示から隠します。この表示に残るものがない場合は、全リストは引き続き存在することを説明する空状態を表示し、全リストに直接戻れるようにします。これは、任意のプレースホルダーカードを切り替える装飾的なトグルではなく、ユーザーの選択によって生じる意味のある空状態です。

### リセットと外観の切り替えを分ける

「サンプルボードをリセット」では、最初の3行を復元し、下書きとエラーをクリアして、全リスト表示に戻します。現在の外観は変更しません。それぞれの変更が明示的な状態として扱われるため、リセットのためにドキュメントを再読み込みしたり、設定済みのプロバイダーを破棄したりする必要はありません。テーマとコンテンツの復旧は、それぞれ独立してテストできます。

## Tamagui デザインシステムのレスポンシブなスタックとアクセシブルな読みやすさ

### コンテンツに合わせてスタックの高さを決める

YStackで主要な読み進めの流れを配置し、XStackで見出しのコントロール、チェックボックスの行、アクションを整列させます。コントロールのグループは折り返されるため、デスクトップ向けの固定幅を強制しません。外側のコンテナは最大幅880pxで、余白には実際のspaceトークン$4を使用します。各行ではテキストが縮んで折り返せる一方、280pxの幅でも、それ以上のテスト幅でもコントロールを操作できます。

### リフロー後の操作性をテストする

ブラウザーでの確認では、はみ出しを測定する前に、習慣の追加、完了への変更、リストの絞り込み、外観の切り替えを行います。初期レイアウトのスクリーンショットだけでは、エラー、長いラベル、絞り込み後の状態によって狭い画面のレイアウトが崩れるかどうかは分かりません。ネイティブのチェックボックスのセマンティクスと表示テキストを、算出される進捗とあわせて操作して確認しており、実装されているものと見なして動作確認を省くことはしていません。

## Tamagui デザインシステムのブラウザー向け完全ビルド

### プロバイダー、CSS、ビルド定義を用意する

ローカルで動作を確認するには、提供された3つのファイルで十分です。JSXには、プロバイダー、1つの設定、生成されたテーマCSS、ボード全体が含まれています。build.mjsではWebターゲットと本番環境を固定し、ブラウザー専用環境でほかの環境変数を読み取る際に使用する空のprocess.envフォールバックを指定します。この定義がないと、コンパイルできても、プレーンなバンドルでprocess is not definedというエラーが発生することがあります。

1. tamagui.jsx、build.mjs、index.htmlを同じディレクトリに保存します。

2. バージョンを固定したReactとTamaguiのパッケージをインストールします。

3. ローカルディレクトリをビルドして配信します。

4. 空の入力と重複した追加、完了、フィルター、テーマ、リセットをテストします。

### ネイティブ版とWeb版の導入を分ける

この例は、実際のTamaguiコンポーネントを組み合わせてブラウザーに表示するものです。ネイティブビルド、ナビゲーションとの連携、プラットフォーム固有の入力動作を実証するものではありません。本番アプリケーションでは、選択したフレームワークがサポートする設定を採用し、抽出、サーバーサイドレンダリング、アニメーションの要件を個別に検討してください。ここで紹介するローカルバンドルは、テーマと状態の契約を確認するための、具体的で完結した方法です。

## Tamagui デザインシステムのコンポーネント例

### tamagui.jsx

設定、生成されたCSS、ネイティブコンポーネント、ボードの完全な状態。

```
import React,{useState} from 'react';import{createRoot}from'react-dom/client';
import{createTamagui,TamaguiProvider,Theme,YStack,XStack,Text,H1,H2,Button,Input,Checkbox,Progress,Separator}from'tamagui';import{defaultConfig}from'@tamagui/config/v5';
const config=createTamagui({...defaultConfig,settings:{...defaultConfig.settings,onlyAllowShorthands:false}});const sheet=document.createElement('style');sheet.textContent=config.getCSS();document.head.append(sheet);
const initial=[{id:1,text:'Read ten pages',done:false},{id:2,text:'Step outside for a break',done:true},{id:3,text:'Write one useful note',done:false}];
function App(){const[dark,setDark]=useState(false),[rows,setRows]=useState(initial),[draft,setDraft]=useState(''),[error,setError]=useState(''),[filter,setFilter]=useState(false);const done=rows.filter(x=>x.done).length;let shown=rows.filter(x=>!filter||!x.done);function add(){let text=draft.trim();if(!text){setError('Write a small habit before adding it.');document.querySelector('#habit-input')?.focus();return}if(rows.some(x=>x.text.toLowerCase()===text.toLowerCase())){setError('That habit is already in this list.');return}setRows([...rows,{id:Date.now(),text,done:false}]);setDraft('');setError('')}return <TamaguiProvider config={config} defaultTheme={dark?'dark':'light'}><Theme name="blue"><YStack backgroundColor="$background" color="$color" padding="$4" gap="$4" maxWidth={880} margin="auto" width="100%" minHeight={0}><XStack justifyContent="space-between" alignItems="center" flexWrap="wrap" gap="$3"><Text fontSize="$2" fontWeight="700">TAMAGUI / ORIGINAL HABIT BOARD</Text><Button size="$3" onPress={()=>setDark(!dark)}>{dark?'Light appearance':'Dark appearance'}</Button></XStack><H1 fontSize="$8" lineHeight="$8">A little progress, every day.</H1><Text fontSize="$4" lineHeight="$5">A local board built with Tamagui 2.7.7 and its v5 blue theme. Your changes stay in this page; no account or daily reminder is connected.</Text><YStack backgroundColor="$backgroundHover" borderWidth={1} borderColor="$borderColor" borderRadius="$4" padding="$4" gap="$3"><XStack justifyContent="space-between" gap="$3" flexWrap="wrap"><H2 fontSize="$5">Today’s small steps</H2><Text id="progress-count" aria-live="polite">{done} of {rows.length} complete</Text></XStack><Progress value={rows.length?done/rows.length*100:0} size="$2" aria-label="Completed habits"><Progress.Indicator animation={undefined}/></Progress><Button size="$3" alignSelf="flex-start" onPress={()=>setFilter(!filter)}>{filter?'Show all habits':'Show unfinished only'}</Button><Separator/>{shown.length?shown.map(row=><XStack key={row.id} gap="$3" alignItems="center" paddingVertical="$2"><Checkbox id={'habit-'+row.id} checked={row.done} onCheckedChange={value=>setRows(rows.map(x=>x.id===row.id?{...x,done:value===true}:x))} aria-label={row.text} size="$4"><Checkbox.Indicator><Text fontWeight="700">✓</Text></Checkbox.Indicator></Checkbox><Text flex={1} fontSize="$4" lineHeight="$5" textDecorationLine={row.done?'line-through':'none'} opacity={row.done?.65:1}>{row.text}</Text></XStack>):<YStack gap="$3"><Text fontWeight="700">Nothing unfinished in this view</Text><Text>All your habits remain in the full list. You can revisit any completed item.</Text><Button onPress={()=>setFilter(false)}>Return to all habits</Button></YStack>}</YStack><YStack gap="$3"><Text htmlFor="habit-input" tag="label" fontWeight="700">Add one small habit</Text><Input id="habit-input" value={draft} onChangeText={v=>{setDraft(v);setError('')}} placeholder="For example, stretch for five minutes" aria-describedby={error?'habit-error':undefined} aria-invalid={!!error} onKeyPress={e=>{if(e.nativeEvent.key==='Enter')add()}}/><Text id="habit-error" color="$color" aria-live="polite">{error}</Text><XStack gap="$3" flexWrap="wrap"><Button theme="active" onPress={add}>Add habit</Button><Button onPress={()=>{setRows(initial);setDraft('');setError('');setFilter(false)}}>Reset sample board</Button></XStack></YStack><Text fontSize="$2" lineHeight="$3">Native Checkbox, Input, Button and Progress components; original board content and state. Theme changes preserve the current board.</Text></YStack></Theme></TamaguiProvider>}
createRoot(document.getElementById('root')).render(<App/>);
```

コードリファレンス

- この3つのファイルをすべて一緒に使用してください。

### build.mjs

テスト済みバンドルで使用するブラウザー環境の定義。

```
import {build} from 'esbuild';
await build({entryPoints:['tamagui.jsx'],bundle:true,minify:true,outfile:'tamagui.bundle.js',define:{'process.env.NODE_ENV':'"production"','process.env.TAMAGUI_TARGET':'"web"','process.env':'{}'}});
```

コードリファレンス

- この3つのファイルをすべて一緒に使用してください。

### index.html

単独で使用できるルートドキュメントとバンドルのインポート。

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Small habits board</title><style>body{margin:0}*{box-sizing:border-box}button,input{max-width:100%}</style></head><body><div id="root"></div><script src="./tamagui.bundle.js"></script></body></html>
```

コードリファレンス

- この3つのファイルをすべて一緒に使用してください。

## Tamagui デザインシステムのエージェントセットアップ

### 実装の出発点

まず提供されたファイルを保存し、http://localhost:8000/ を開いてください。このセットアップはブラウザーでの使用を前提としています。

```
npm init -y
npm install react@19.2.0 react-dom@19.2.0 tamagui@2.7.7 @tamagui/config@2.7.7
npm install --save-dev esbuild
node build.mjs
python3 -m http.server 8000
```

### あなたのプロジェクト向けプロンプト

```
v5プリセットを使用して、Tamagui 2.7.7のWebハビットボード全体を実装してください。サイズ、スペース、角丸、フォントのトークンカテゴリは区別したままにし、生成されたテーマCSS、ライト／ダークのブルー系子テーマ、制御されたチェックボックス、前後の空白文字の除去と重複の検証、全行を分母とする進捗計算、未完了表示からの復帰、見た目を変えないリセットを維持してください。
```

## Tamagui デザインシステムのソースと適用範囲

v5プリセットを使用した、実際のTamagui 2.7.7 Webコンポーネント。ハビットボードと状態ルールは独自のOpenDesignコードであり、アカウント、リマインダー、ネイティブデバイスの動作には接続されていません。

- 設定 プロバイダー、プリセット、設定それぞれの役割。

- デザイントークン カテゴリに応じたトークンの解決。

- チェックボックス 制御された状態とインジケーターの構成。

- 進捗 進捗値とインジケーターの構成。

- 公式インストール フレームワークとプラットフォームのセットアップ विकल्प。

## Tamagui デザインシステムの関連リソース

### UIkit

UIkitはCSSフレームワーク、Lessによるカスタマイズ、属性駆動のJavaScriptコンポーネントを組み合わせています。以下のワークショップ計画では、Switcher、Accordion、レスポンシブグリッドが連携します。ネイティブコンポーネントの動作と、アプリケーションにおける選択状態管理の境界を確認できます。

### Vant

Vant 4で構築したモバイル向け住所選択フロー。実際のCSS変数、住所IDの管理、入力検証、テーマ切り替え、ローカルのみへの明示的な保存に対応。

### Vuestic UI

ソースで確認したライト／ダークのプリセット、アクセシブルな評価ラベル、テキストエリアの入力検証、算出される平均値、完了した評価を保持する保存状態を備えた、Vuesticのネイティブな批評ワークシート。


- [実装リファレンス](https://tamagui.dev/docs/core/configuration)
- [ソース](https://cdn.jsdelivr.net/npm/@tamagui/themes@2.7.7/src/v5-tokens.ts)
- [ソース](https://cdn.jsdelivr.net/npm/@tamagui/themes@2.7.7/src/generated-v5.ts)
- [ソース](https://cdn.jsdelivr.net/npm/@tamagui/config@2.7.7/src/v5-fonts.ts)
- [ソース](https://tamagui.dev/docs/core/configuration)
- [コードリファレンス](https://tamagui.dev/docs/core/configuration)
- [設定 プロバイダー、プリセット、設定それぞれの役割。](https://tamagui.dev/docs/core/configuration)
- [デザイントークン カテゴリに応じたトークンの解決。](https://tamagui.dev/docs/core/tokens)
- [チェックボックス 制御された状態とインジケーターの構成。](https://tamagui.dev/ui/checkbox)
- [進捗 進捗値とインジケーターの構成。](https://tamagui.dev/ui/progress)
- [公式インストール フレームワークとプラットフォームのセットアップ विकल्प。](https://tamagui.dev/docs/intro/installation)