👐

AIエージェントでTailwind CSSコピペし放題のコードからUIコンポーネントを抽出する

2025/01/31に公開

個人開発でTailwind CSSを使うとき、ベタ書きコピペし放題のほうが手っ取り早くUIを作れると感じている
DRY原則に反するけど、大量のclassが並ぶのも実は意図した設計だと思う
https://v2.tailwindcss.com/docs/extracting-components

代わりにAIエージェントには、ときどきボトムアップ的にUIコンポーネントを抽出してもらいたい
OpenHands

1. src/client 内の全てのtsxファイルをgrepして、多くの箇所にコピペされているTailwind CSS classのグループを3つ抽出してください
2. 各classに対して、コピペされている回数を集計してください
3. 最もコピペされているclassを1つだけ共通化するため、src/client ディレクトリ直下にUIコンポーネントを1ファイル作成してください
4. BaseやCommonのような曖昧な命名は使わないでください
5. marginを含めて抽象化しないでください
6. 新しいUIコンポーネントを使うように、既存のコードを置換してください
7. 全ての箇所を置換したことをgrepで確認してください
8. 置換した前後で、レンダリングされるDOM構造が等価であることを確認してください

ひととおりの作業を終えたら、npm testしてください
日本語でプルリクを書いて、GitHub APIを使ってプルリクを作成してください

<IconButton>を抽出した例
Image from Gyazo
Image from Gyazo

プロンプト一発でうまくいくわけではない
現に何回も試行錯誤しながら、細かく指示を書いたプロンプトになっている

Discussion