@shadcn/lint とは？AIエージェントのためのTailwindデザインシステムリンター
GitHubで急上昇中の @shadcn/lint（⭐1,679）は、AIコーディングエージェントがTailwindデザインシステムのルールを自動的に守るよう誘導するリンターです。ESLint・Oxlint両対応で、shadcn/uiを使っていない独自コンポーネントにも導入できます。デザインシステムの一貫性維持に課題を感じているフロントエンドチームに、今すぐ試す価値があるツールです。
@shadcn/lintとは？Tailwindデザインシステム リンター 使い方の基礎
@shadcn/lintはshadcn-ui公式チームが開発したエージェントファースト（Agent-First）なリンターです。従来のリンターは「エラーを出すだけ」でしたが、このツールはAIエージェントが何を使って修正すべきかまで教えてくれます。
エラーメッセージの例：
"p-4" is not allowed on <Button>: <Button> owns its spacing.
Use a size (sm, lg), or margin here or gap on the parent for space around it.
TypeScriptの型エラーと違い、修正方法（どのsizeを使うか、どこに書くか）まで含まれています。
なぜAIエージェント時代に必要か
Claude Code・Cursor・GitHub Copilotなどのコーディングエージェントは、指示に従ってUIを生成しますが、プロジェクト固有のデザインルールを知りません。@shadcn/lint を導入すると、エージェントが npm run lint を実行するだけでルール違反を発見・修正できます。
READMEで公開されている実証データ
開発チームは150回以上のタスク実行で検証しています：
| モデル | 完了タスク | 修正前エラー | 修正後エラー |
|---|---|---|---|
| Sonnet 5 | 8/8 | 69 | 0 |
| Haiku 4.5 | 8/8 | 66 | 0 |
| GPT 5.6 Terra | 8/8 | 117 | 0 |
ほぼすべてのタスクで、lint フィードバック1回でエラーゼロを達成しています。
AIエージェント Tailwind ルール 自動チェック — インストールと設定手順
Oxlintでの導入（推奨）
npm install -D @shadcn/lint oxlint
.oxlintrc.json を作成します：
{
"jsPlugins": ["@shadcn/lint"],
"rules": {
"shadcn/no-restyle": ["error", { "allow": ["layout"] }]
}
}
npx oxlint
ESLint 9.30以上での導入
npm install -D @shadcn/lint eslint @typescript-eslint/parser
eslint.config.mjs に追加：
import { plugin as shadcn } from "@shadcn/lint"
import tsParser from "@typescript-eslint/parser"
import { defineConfig } from "eslint/config"
export default defineConfig([
{
files: ["**/*.{js,jsx,ts,tsx}"],
languageOptions: {
parser: tsParser,
parserOptions: { ecmaFeatures: { jsx: true } },
},
plugins: { shadcn },
rules: {
"shadcn/no-restyle": ["error", { "allow": ["layout"] }],
},
},
])
設定後、AGENTS.md に追加するだけでAIエージェントが自動的にlintを実行します：
After making changes, run `npm run lint` and fix all errors.
6つのルール詳細
@shadcn/lint は現在6つのルールを提供しています：
| ルール | 検出内容 |
|---|---|
no-restyle |
classNameでコンポーネントを再スタイルする行為 |
no-raw-colors |
bg-pink-500のような生のカラー使用 |
no-arbitrary-values |
p-[13px]のような任意値 |
no-inline-styles |
インラインスタイルと<style>要素 |
no-unknown-classes |
Tailwindが生成できないクラス（rounded-huge等） |
require-static-classes |
リンターが読めない動的クラス（`bg-${color}`等） |
コントラクトでコンポーネントごとのルールを設定
"shadcn/no-restyle": ["error", {
allow: ["layout"],
contracts: [
{
pattern: "^CardTitle$",
allow: ["layout", "typography"],
deny: ["font-*"],
},
{ pattern: "^CardContent$", allow: ["layout", "spacing"] },
],
}]
ESLint・TypeScriptとの違い・なぜ今このツールか
TypeScriptの型定義でもスタイル制約は表現できますが、エラーメッセージが「許可されていない」という事実だけを伝えます。@shadcn/lint は「何を代わりに使うべきか」というデザインシステム固有の情報をエラーに含めます。
既存ツールとの比較：
- TypeScript型定義：コンポーネントAPIを変更せずにルールを追加できないため、柔軟性が低い
- ESLint（標準）：TailwindクラスへのRuleはプロジェクト独自に書く必要があり、エージェント向けのガイダンス文言を含めるのは困難
- @shadcn/lint：コンポーネントコードを変更せずにプロジェクトごとのルールを定義でき、AIエージェントが直接従えるエラー文言を出力
特に2026年現在、コーディングエージェントの普及でデザインシステムの一貫性維持が難しくなっているという背景から注目されています。
こんな人に向いている
フロントエンドエンジニア（React/Tailwind）
自社のデザインシステムをAIエージェントに守らせたいエンジニアに最適です。Claude CodeやCursorでUIを生成する際、毎回レビューでデザイン違反を修正する手間がなくなります。
具体的な活用シナリオ：
- デザイン担当とエンジニアが共同でコントラクトを定義し、AIが自動的に準拠したコードを生成
- CI/CDパイプラインに組み込んでPRの段階でデザイン違反を自動検出
デザインシステム担当者
コンポーネントライブラリの管理者がプロジェクトごとに異なるスタイルポリシーを設定できます。shadcn/ui を使っていなくても、@shadcn/lint は独自のTailwindコンポーネントに対応しています。
テックリード・フロントエンドアーキテクト
複数チームが1つのデザインシステムを使うモノレポ構成で、ワークスペース全体に共通ルールを強制しつつ、各アプリが独自ルールを追加できる設計にも対応しています。
使う前に知っておきたいこと
動作要件：
- Node.js 20.19以上が必須
- ESLintを使う場合はESLint 9.30以上
- Oxlintを使う場合はOxlint 1.80以上（JS Plugin APIはalpha段階）
既知の制限・注意点：
no-raw-colorsがカスタム--text-*フォントサイズをテーマカラーと誤認識する問題が報告されています（Issue #1）- Biomeへの対応は未定（Feature Requestあり）
- SvelteなどのFrameworkアダプターは現時点で未対応（Issueにて議論中）
- Tailwind v4プロジェクト向けのため、Tailwind v3以下では動作しません
ライセンス：MIT License（商用利用・改変・再配布可能）
まとめ
@shadcn/lint は、AIコーディングエージェントの時代に対応した新しいアプローチのリンターです。デザインシステムのルールをエージェントが理解できる形で表現することで、1回のlintサイクルでほぼ100%のルール準拠を実現しています。shadcn/uiユーザーはもちろん、独自TailwindコンポーネントでもすぐIn使えます。AIエージェントを活用したフロントエンド開発の品質管理に課題を感じているなら、ぜひ導入を検討してみてください。
関連ツール・おすすめサービス
- DigitalOcean — 開発者向けクラウド・App Platformでかんたんデプロイ
この技術を学ぶ
DevToolに興味を持った方には、Udemyのオンラインコースもおすすめです。
- 🎓 関連するDevToolコース一覧 — セール時（最大90%OFF）を狙うとお得です
関連記事
この記事が役に立ったらシェアしてください