clear-appui

Clear AppUI

インストール済みの Clear AppUI ライブラリを使って、依頼されたインターフェースを構成します。 リポジトリは ycy-0510/clear-appui で、Dart パッケージ識別子は fossui です。 プロダクトのインポートには package:fossui/app_ui.dart を、低レベルコンポーネントには package:fossui/fossui.dart を使用します。既存のアプリケーションを移行する場合は、 プロジェクトの動作、データ、ローカルの指示を維持してください。

実装内容を先に確認する

依存関係を解決した後、node <this-skill>/scripts/doctor.mjs <flutter-project> を実行します。 このスクリプトは .dart_tool/package_config.json を通じて実際のパッケージを特定し、 API コントラクトを確認して、一致するソースパスと Git リビジョンを出力します。 依存関係が不足している場合は、統合リファレンスに記載された Git 依存関係をインストールし、doctor を再度実行します。

出力されたエントリーポイントと、タスクに必要なコンポーネントのコンストラクターを読みます。 パラメーター名、列挙値、コントローラー、動作は、インストール済みのファイルまたはその例に 基づいて確認してください。置き換えを作成する前に、既存のコンポーネントを確認します。 App* ラッパーがない場合は、lib/src/components/ を読みます。

パッケージには対応するスキルが含まれています。skillMatchesPackage が false の場合は、 UI を編集する前に doctor が報告する bundledSkill を読みます。異なる API コントラクトは エラーです。推測せず、パッケージに同梱されたスキルを使用してください。

ライブラリで構成する

• AppTheme はアプリケーションのシェルの内側に配置します。context.appTheme.tokens から セマンティック値を読み取り、プロダクト固有の上書きには dimensions、motion、 sheet を使用します。AppTheme は FossTheme に適応するため、トークンのソースは 1 つに保ってください。
• 適した場面では AppButton、AppText、AppCard、AppTextField、AppBadge、AppCheckbox、 AppSwitch、AppListTile を使用します。選択、ダイアログ、メニュー、進捗、フィードバック には、既存の Foss* バリアントを使用します。
• プロダクトページのクロームには AppScaffold と AppNavigationBar を使用します。 scaffold が提供する MediaQuery のパディングを使い、画面下部のコンテンツにアクセスできる 状態を保ってください。
• AppPresentationHost は該当するルート内に配置します。シートの表示には showAppSheet を 使用し、渡された ScrollController をシート本体に接続します。ページとシートで、 そのホストのドラッグコーディネーターを共有します。ネストされたプレゼンテーションや ドラッグ動作を追加する前に、実装を確認してください。
• 制約付きレイアウトには AppAdaptiveLayout、AppAdaptiveGrid、AppConstrainedContent を 優先して使用します。利用可能なスペースに基づいて適応させてください。
• フィードバックは目的に沿ったものにします。FossToaster がトーストキューを管理します。 コンテンツを表示するのは先頭のサーフェスだけで、後続のサーフェスはキュー内メッセージの プレビューです。ユーザーがフォームの問題を解決する必要がある場合は、インラインエラーを 使用します。

インターフェースのガイダンスを適用する

実装済みの判断と、そこにリンクされた公式情報源については、インストール済みの doc/app_ui/APPLE_HIG_NOTES.md を参照してください。階層、読みやすいコンテンツ、 セーフエリア、キーボード操作、タッチターゲット、モーション、アクセシビリティには HIG を活用します。プロダクトのトークン値は設定可能な選択肢であり、Apple が定める 指標ではありません。

一貫した間隔と同心形状を保ちます。個々の画面でライブラリのナビゲーション、シートの マテリアル、ジェスチャー処理を再実装しないでください。Flutter のシートは Apple の マテリアルを近似したものです。必要に応じて、実際のターゲットでプラットフォーム固有の 動作を確認してください。

依頼された動作を検証する

ネイティブの副作用を発生させず、サンプルリポジトリを注入して、インタラクティブな Widget Preview を使用します。狭い／広いレイアウト、ライト／ダークモード、大きな文字、 エラー／再試行、キャンセル、キーボード／フォーカス、タスクで変更した操作を検証します。 ホストプロジェクトの CPU、SDK、シミュレーター、リリースに関するルールに従ってください。 デバイスでのみ行える確認は、実際に実施するまで保留として記録します。

依存関係、API の場所、プレビューコマンドについては integration.md を参照してください。このスキルは手順と ソースの確認方法を提供し、Dart の依存関係はプロジェクト側で別途インストールします。