tailwind

Tailwind CSS v4 のエキスパートとして、不適切な間隔、一貫性のないサイズ設定、デスクトップ優先のブレークポイント、GPU アクセラレーションされないアニメーションなどのアンチパターンを検出して報告します。

デフォルトでは現在のプロジェクトを対象にします。または、監査対象を一部のファイルに絞る場合はパスを指定してください。

詳細な説明とコード例については、rules/ 内の各ルールファイルを参照してください。

ルールの概要

ルール	影響度	ファイル
間隔の方向	高	rules/spacing-direction.md
寸法の統一	高	rules/equal-dimensions.md
8px グリッド	高	rules/8px-grid.md
モバイルファーストのレスポンシブ対応	中	rules/mobile-first.md
論理プロパティの省略形	中	rules/logical-shorthands.md
GPU アクセラレーションアニメーション	中	rules/gpu-animations.md

モードの判定

作業を始める前に依頼を分類し、意図が曖昧な場合や診断目的の場合は、デフォルトで読み取り専用にしてください。

• 監査（読み取り専用、デフォルト） — 「監査」「レビュー」「確認」「診断」などの依頼、または不明瞭な依頼。根拠に基づくレポートを作成し、ファイルは一切編集しません。
• 修正 — ユーザーが書き込み、追加、作成、修正、変更、適用、整理を明示的に依頼した場合、または「監査して修正」と依頼した場合。修正手順でのみ、対象範囲内の変更を適用します。

意図が曖昧な場合は監査モードを維持し、レポートの最後に修正の適用を申し出てください。

ワークフロー

ステップ 1：監査

対象範囲をスキャンし、rules/ 内の各ルールへの違反を確認します。検索パターン：

• mt-* / pt-* クラス（間隔の方向）
• 両方の値が一致する h-X w-X の組み合わせ（寸法の統一）
• p-1、gap-3、m-5 などの奇数の間隔値（8px グリッド）
• デスクトップ優先のブレークポイント（モバイルファースト）
• 省略形を使える箇所で個別の辺を冗長に指定しているもの（論理プロパティの省略形）
• transition-all の使用（GPU アニメーション）

ステップ 2：報告

ルールごとにまとめて、すべての検出事項を列挙します。

## Tailwind CSS Audit Results

### HIGH Severity
- `src/components/Card.tsx:15` - `mt-4` → use `mb-4` or `gap` on parent
- `src/components/Avatar.tsx:12` - `h-10 w-10` → `size-10`

### MEDIUM Severity
- `src/components/Button.tsx:8` - `p-3` (12px) → use `p-2` (8px) or `p-4` (16px)

### Summary
| Rule | Violations | Files |
|------|-----------|-------|
| Spacing direction | X | N |
| Equal dimensions | Y | N |
| **Total** | **Z** | **N** |

ステップ 3：修正（修正モードのみ）

監査モードでは、このステップを完全にスキップします。依頼が修正モードの場合にのみ変更を適用してください（「モードの判定」を参照）。

修正を適用します。修正ごとに、次のことを行ってください。

1. 変更によって見た目が維持されることを確認します
2. 変更は最小限にとどめ、特定した問題のみを修正します
3. 間隔の方向を変更する場合は、周辺の要素も調整します