shadcn-ui/lint

何を解決するか

@shadcn/lint は、UI コードの作成時に AI コーディングエージェントがデザインシステムのルールを破らないようにするためのツールです。TypeScript は特定のプロパティを制限できますが、エージェントが違反を修正するためのガイダンスを提供することはできません。このランターは、具体的かつ実行可能なフィードバックを提供し、エージェントに何が間違っているか、そしてどのコンポーネント、バリエーション、またはテーマ値を使用すべきかを明確に示します。

動作方法

Tailwind CSS プロジェクト用のプログラマブルなランター（ESLint および Oxlint と互換）として機能し、開発者がコンポーネントの「契約」を定義できるようにします。特定のコンポーネントに対して、許可または禁止する Tailwind クラスを指定できます（例：mt-4 のようなレイアウトクラスは許可するが、Button にはパディングを禁止する）。ランターはコードを分析し、動的プレースホルダー（例：{{sizes}}）を含むエラーメッセージを生成することで、エージェントが正しいデザインシステムの実装に到達できるようにガイドします。

対象ユーザー

Tailwind CSS を使ってデザインシステムを構築し、AI コーディングエージェントを使って UI コードを生成または変更する開発者やチーム。手動でコンポーネントを書き直さずに、厳格なデザインガイドラインに準拠した出力を保証したい方におすすめです。

特徴

• エージェント最優先のフィードバック：デザインシステムに基づいて、コードを修正する方法をエージェントに明確に伝える記述的なエラーメッセージを提供。
• プログラマブルなルール：コンポーネント API を変更したり、複雑な TypeScript 型を使わずに、ルールを定義可能。
• Tailwind v4 対応：shadcn/ui ライブラリを使用しているかどうかに関わらず、任意の Tailwind v4 プロジェクトで動作。
• カスタマイズ可能な契約：コンポーネントの異なる部分に異なるルールを設定可能（例：CardTitle と CardContent に別々のルール）。
• 柔軟な統合：ESLint と Oxlint の両方をサポートし、高速かつ柔軟な linting を実現。