Extract

いつ使うか

/impeccable extract はコードベースがうっかりデザインシステムになってしまった瞬間のためのものです。12箇所に繰り返されるボタンスタイル。同じカードの3つのバリアント。あちこちに散らばるhexカラー。偶然スケールに一致した手作りスペーシング。この逸脱を再利用可能なプリミティブに統合したい時に使ってください。

プロダクトがパターンを明らかにするのに十分な機能を出荷した後に使ってください。早すぎる抽出は現実に合わない抽象を作ります。

仕組み

スキルはまずデザインシステム構造を発見し、次に抽出機会を特定します。

1. トークン：繰り返されるリテラル値（カラー、スペーシング、角丸、シャドウ、フォントサイズ）を見つける。トークン名を提案、トークンシステムに追加、使用箇所を置き換え。
2. コンポーネント：わずかなバリエーションで繰り返されるUIパターン（ボタン、カード、入力、モーダル）を見つける。バリアント付きの単一コンポーネントに抽出し、呼び出し元を移行。
3. 構成パターン：繰り返されるレイアウトやインタラクションパターン（フォーム行、ツールバーグループ、空の状態）を見つける。構成プリミティブに抽出。
4. テキストスタイル：繰り返されるfont-size + weight + line-heightの組み合わせを見つける。テキストスタイルに抽出。
5. アニメーションパターン：繰り返されるイージング、デュレーション、キーフレームの組み合わせを見つける。モーショントークンに抽出。

スキルは慎重です。同じ意図で3回以上使われているものだけを抽出します。「後で再利用されるかもしれないから」という理由では抽出しません。早すぎる抽象は重複より悪いです。

試してみる

/impeccable extract the button styles

期待される出力：

• 8ファイルに14のボタンインスタンスを発見
• 4つのバリアント：primary（塗りアクセント）、secondary（ボーダー付き）、ghost（テキストのみ）、destructive（赤塗り）
• 4つのバリアントすべてが同じサイズスケール（small、default、large）を使用
• トークンドリブンスタイルで <Button variant="primary" size="default"> に抽出
• 14の呼び出し元を移行、約180行の重複CSSを削除
• 3つの欠落トークンを追加：--button-radius、--button-padding-y、--button-padding-x

注意点

• 早すぎる時期に抽出すること。 2回の使用はパターンではありません。3回ならそうかもしれません。パターンが明確になるまで待ってください。
• 過剰に一般化すること。 抽出されたコンポーネントは現在のユースケースに密接に合致すべきで、考えられるすべての将来のユースケースを予期すべきではありません。バリアントは後でいつでも追加できます。
• マイグレーションを忘れること。 マイグレーションなしの抽出は、古い重複コードを残し、同じことをする3番目の方法を作ります。常に同じパスでマイグレーションしてください。
• **意図が異なるものを抽出すること。見た目が似ているが目的が異なる2つのボタン（主要アクション vs ボタン風にスタイルされたリンク）は、おそらく別々にしておくべきです。