building-components

コンポーネントの構築

このスキルを使用する場面

ユーザーが次の作業を行っている場合に使用します。

• 新しい UI コンポーネント（プリミティブ、コンポーネント、ブロック、テンプレート）を構築する
• アクセシビリティ機能（ARIA、キーボードナビゲーション、フォーカス管理）を実装する
• 合成可能なコンポーネント API（スロット、レンダープロップ、制御状態／非制御状態）を作成する
• デザイントークンとテーマシステムを設定する
• コンポーネントを npm またはレジストリに公開する
• コンポーネントのドキュメントを作成する
• ポリモーフィズムまたは as-child パターンを実装する
• スタイリング／状態管理にデータ属性を使用する

参考資料

• definitions.mdx - 成果物の分類（プリミティブ、コンポーネント、ブロック、テンプレート）
• principles.mdx - コンポーネント設計の基本原則
• accessibility.mdx - ARIA、キーボードナビゲーション、WCAG 準拠
• composition.mdx - 合成可能なコンポーネントのパターン
• as-child.mdx - 要素のポリモーフィズムに使う as-child パターン
• polymorphism.mdx - ポリモーフィックなコンポーネントのパターン
• types.mdx - コンポーネントの TypeScript 型付けパターン
• state.mdx - 制御状態と非制御状態の管理
• data-attributes.mdx - スタイリングと状態管理にデータ属性を使用する方法
• design-tokens.mdx - デザイントークンシステムとテーマ設定
• styling.mdx - コンポーネントのスタイリング手法
• registry.mdx - shadcn スタイルのレジストリ配布
• npm.mdx - コンポーネントを npm に公開する方法
• marketplaces.mdx - コンポーネントマーケットプレイスでの配布
• docs.mdx - コンポーネントのドキュメント作成