Aberdeen は JavaScript プロキシを使用したファイングレインド リアクティビティを備えたリアクティブ UI ライブラリです。仮想 DOM なし、ビルドステップは不要です。

AI アシスタント向けガイダンス

1. ユーザーデータを連結しない - A('input value=${data}') ではなく A('input value=', data) を使用する
2. オブザーバブルを直接渡す - 親スコープのサブスクリプションを避けるために text=', ref(obj, 'key') を使用する
3. リストには onEach を使用する - レンダリング関数内でプロキシ配列を for/map で反復しない
4. クラスインスタンスは最適 - 型付けされた構造化された状態には、プレーンオブジェクトよりも優れている
5. CSS ショートカット - スペーシングに $3、$4 を使用（1rem、2rem）、色に $primary を使用（setVarSpacingCssVars が使用され、cssVars 色が定義されていることを前提）
6. 最小限のスコープ - より小さいリアクティブスコープ = より少ない DOM 更新
7. 関数コンポーネント - 'draw' で始まる通常の関数として再利用可能な UI コンポーネントを作成する（drawMainMenu(settings) や drawProfilePage(user) など）
8. プロキシオブジェクトにプレフィックスを付ける - 慣例として、プロキシオブジェクトを含む変数名に '$' をプレフィックスとして付ける（例：$user、$settings）
9. 再レンダリングについて考える - プロキシオブジェクトから読み取る場合（let n = $user.name; など）、含まれている A(() => {..}) または A('div', () => {}) 関数は変更時に再実行されます - どのレベルで更新をトリガーするかを計画する

情報の取得

完全なチュートリアルは以下に従います。詳細な API リファレンスについては、スキルディレクトリ内のこれらのファイルを開いてください：

• aberdeen - コア：A、proxy、onEach、ref、derive、map、multiMap、partition、count、isEmpty、peek、dump、clean、insertCss、insertGlobalCss、mount、runQueue、darkMode
• route - ルーティング：current、go、push、back、up、persistScroll
• dispatcher - パスマッチング：Dispatcher、MATCH_REST、MATCH_FAILED
• transitions - アニメーション：grow、shrink
• prediction - 楽観的 UI：applyPrediction、applyCanon