shadcn-ui/lint

解決的問題

@shadcn/lint 的設計目的是防止 AI 編碼代理在撰寫 UI 程式碼時違反設計系統規則。雖然 TypeScript 可以限制某些屬性，但無法提供代理修復違規所需的指引。此 linter 提供具體且可執行的回饋，明確告訴代理哪裡出錯，並建議應使用的正確元件、變體或主題值。

工作原理

它作為 Tailwind CSS 專案的可程式化 linter（相容 ESLint 與 Oxlint），允許開發者為其元件定義「合約」。您可以指定特定元件允許或禁止使用的 Tailwind 類別（例如，允許 mt-4 等佈局類別，但禁止在 Button 上使用 padding）。linter 會分析程式碼，並產生包含動態佔位符（如 {{sizes}}）的錯誤訊息，以引導代理實現正確的設計系統實作。

適用對象

使用 Tailwind CSS 建構設計系統，並利用 AI 編碼代理產生或修改 UI 程式碼，希望輸出嚴格遵守設計規範而無需手動重寫元件的開發者與團隊。

主要特色

• 代理優先回饋：提供描述性錯誤訊息，告訴代理如何根據設計系統修復程式碼。
• 可程式化規則：無需變更元件 API 或使用複雜的 TypeScript 類型即可定義規則。
• 支援 Tailwind v4：適用於任何 Tailwind v4 專案，無論是否使用 shadcn/ui 套件。
• 可自訂合約：可為元件的不同部分設定特定規則（例如，CardTitle 與 CardContent 使用不同規則）。
• 彈性整合：支援 ESLint 與 Oxlint，實現快速且彈性的程式碼檢查。