スキル自身の言葉で
React、Vue、Svelteにわたり、モダンなコンポジションパターン、CSS-in-JSソリューション、コンポーネントAPI設計の原則を用いて再利用可能なUIコンポーネントを構築します。コンパウンドコンポーネント、レンダープロップ、スロット、そしてReactのcontext、Vueのcomposable、Svelteのrunesといったフレームワーク固有のパターンを扱います。コンポーネントライブラリ、デザインシステム、既存コンポーネントのリファクタリングに適用できます。
セマンティックなprops、単一責任の原則、ref forwarding、controlledとuncontrolledパターンの区別を備えた、デフォルトでアクセシブルなコンポーネントを重視します。class-variance-authority、Tailwind CSS、スコープ付きスタイリング手法を用いた、ボタン、アコーディオン、セレクト、タブの具体的な実装が含まれます。
生成されるもの
- class-variance-authorityとTailwind CSSを用いて、ボタン、アコーディオン、セレクト、タブ、カードを実装するデザインシステムコンポーネントです。
仕組み
- 01CSS-in-JSアプローチを選択する
迅速なプロトタイピング向けのTailwind CSS、スコープ付きスタイル向けのCSS Modules、動的なReactスタイリング向けのstyled-components、SSRフレンドリーな柔軟性のためのEmotion、ゼロランタイム性能のためのVanilla Extractの中から選択します。
- 02コンポーネントAPIを設計する
loadingではなくisLoadingのようなセマンティックなprop名を使用し、適切なデフォルト値を用意し、childrenによるコンポジションをサポートし、classNameやstyle propsを通じてスタイルの上書きを可能にします。
- 03フレームワーク固有のパターンを実装する
コンパウンドコンポーネントにはReactのcontextを、Vue 3ではprovideとinjectを使ったcomposableを、Svelte 5ではリアクティブな状態管理のために$propsと$derivedを用いたrunesを使用します。