Tailwind Cognitive Flow Skill

公式情報

• Tailwind CSS
• Docs

このSkillの基本方針

• 基本方針: UIを組み立てるときは、命名や抽象化で思考を止めない。まずutilityで形にし、抽象化は必要になってから行う。
• 設計観: 「再利用したい形」が見えた時点で、コンポーネント/抽象（React/Vue/Svelte等）へ移す。
• 一貫性: デザインの揺れは “値” で吸収する。tokens（色/余白/フォント）とコンポーネント境界で統制する。
• 保守性: クラス肥大は悪ではないが、「責務が曖昧な塊」になるのは悪。UIの責務単位で分割する。

思想（判断ルール）

1. 早すぎる抽象化（命名・共通クラス化）を避ける。まず具体で組み立てる。
2. “同じ見た目が3回以上”出たら抽象化を検討する（コンポーネント化/共通化）。
3. tokens を先に決める（色/余白/タイポ）。揺れはtokensで止め、場当たり値を増やさない。
4. クラスを読む負担が増えたら、構造（コンポーネント）で解決する。CSSの抽象で解決しない。
5. UIの意図（レイアウト/間隔/強調）を、クラスの並びとして可視化する。