作業の進め方
Building Componentsは、再利用可能なUIライブラリを支える技術判断のガイドです。構成方法、キーボード操作、状態管理、TypeScriptのインターフェース、スタイルについて、専門の参照先へエージェントを導きます。入口ではプリミティブ、コンポーネント、ブロック、テンプレートを扱い、実際の成果物に合う抽象度を選べます。
単独の画面だけでなく、複数の利用側に対応するコンポーネントを作る場合に役立ちます。APIの形、アクセシビリティ、配布を一緒に考えます。ソースの中心は参照先の索引なので、リンク先のファイルも実際に使うスキルの一部として入口ファイルとともに用意してください。
想定される成果物
- 実装の依頼では、構成方法と状態モデルが明確なコンポーネント。
- 文書化の依頼では、コンポーネントAPIと関連する挙動を説明する利用ガイド。
- 配布が依頼に含まれる場合は、適切なパッケージングまたはレジストリの計画。
ブリーフからレビューまで
- 01コンポーネントの契約を定義する
プリミティブ、コンポーネント、ブロック、テンプレートのどれが対象かを決めます。公開インターフェースと、呼び出し側が組み合わせて使う場面を明確にします。
- 02必要な技術ガイドを読む
制御・非制御の挙動はstate.mdx、公開する構成モデルはcomposition.mdx、キーボードとフォーカスの要件はaccessibility.mdxを読みます。実装ではtypes.mdxとstyling.mdxを参照します。多態性やas-childの参照先は、呼び出し側がそのAPIパターンを必要とする場合だけ追加します。
- 03公開APIを実装し、文書化する
選んだAPIを通じて状態と表示を結び付けます。意図した使い方を説明し、必要な場合だけnpm、レジストリ、その他の文書化された配布方法を選びます。