AIと使う
AIコーディングアシスタントを活用すると、Markuplintをより効果的に使えます — 警告の理解から設定ファイルの作成まで。
警告を理解する
Markuplintが違反を報告したら、エラーメッセージをAIアシスタントに貼り付けて、説明と修正方法を聞くことができます。各違反にはルール名（例: attr-duplication）が含まれており、AIが内容を調べてくれます。
The attribute name is duplicated Markuplint(attr-duplication) [Ln 11, Col 45]
AIアシスタントに聞いてみましょう:
- 「このMarkuplintの警告はどういう意味？」
- 「
permitted-contentsを解消するにはHTMLをどう修正すればいい？」
設定ファイルを書く
AIアシスタントに、プロジェクトに合わせたMarkuplintの設定ファイルを生成してもらえます。環境を説明して設定を作ってもらいましょう:
- 「Reactプロジェクト用の
.markuplintrcを作って」 - 「BEMクラス命名を強制するルールをMarkuplintの設定に追加して」
- 「
data-testid属性を許可するようにMarkuplintを設定して」
AIコーディングエージェント
Claude Code、Cursor、GitHub CopilotなどのAIコーディングエージェントは、開発ワークフローの中で直接Markuplintを実行できます:
- 生成コードのリント — HTML生成後に
npx markuplintを実行するようエージェントに依頼 - 違反の自動修正 — エージェントがMarkuplintの出力を解釈して修正を適用
- プロジェクトのセットアップ — エージェントがフレームワークに合わせて
.markuplintrcファイルを直接作成
備考
npx markuplint --init は対話式のため、手動入力が必要です。AIエージェントは設定ファイルを直接書く方が確実です。パーサーとスペックパッケージについてはHTML以外で使うを参照してください。
Claude Code 向けスキル
MarkuplintはClaude Code向けのインストール可能なスキルを提供しています。エージェントがよくあるワークフローをガイドします。
インストール
npx skills add markuplint/markuplint@markuplint
npx skills add markuplint/markuplint@markuplint-setup
npx skills add markuplint/markuplint@markuplint-configure
利用可能なスキル
| スキル | タイプ | 説明 |
|---|---|---|
markuplint | 自動読み込み | リファレンスナレッジ — 違反メッセージの解釈、CLI使用法、設定パターン。HTMLファイルの作業時にClaudeが自動的に参照。 |
markuplint-setup | スラッシュコマンド | ゼロからのセットアップ — フレームワーク検出、プリセット選択、初回リント、Bulk Suppressionsを含むルールごとの採用判断。 |
markuplint-configure | スラッシュコマンド | ルールの追加・削除・調整 — 適切なスコープ（プロジェクト / ファイル / 要素）を判断して設定変更を提案。 |
使い方
自動読み込みスキル（markuplint）: 特別な操作は不要です。インストールすると、HTMLやMarkuplintの設定ファイルを扱う際にClaudeが自動的にこのナレッジを参照します。違反の解釈、修正の提案、正しい設定の作成に役立ちます。
スラッシュコマンドスキル: Claude Codeでコマンドを入力すると対話型ワークフローが始まります:
/markuplint-setup— 「Markuplintを導入して」/markuplint-setup "src/**/*.tsx"— ターゲットglobを指定してセットアップ/markuplint-configure— 「Markuplintのルールを変更したい」/markuplint-configure src/components/Header.tsx:15— 特定のファイルと行のルールを調整