Mantis

Mantis

12の色チャンネルを認識します。あなたは3つ。あなたのコーディングエージェントは0です。

英語 · Tiếng Việt · 简体中文

_{▶ 60秒の紹介動画を見る（MP4、4 MB） · 1080p}

---

コーディングエージェントは、目を閉じたままUIを作ります。CSSを書き、 **「完了しました ✅」**と言い、ブラウザーを開くことはありません。

その後、誰かがスマートフォンでページを開くと、

• メニューが画面からはみ出している；
• ダークモードなのにカードが1つだけ白く、白い文字が載っている；
• ベトナム語のボタンラベルが途中で切れている。

Mantisは、エージェントには見つけられないUIのバグと、エージェントが隠すバグを検出します。 Mantisは次のことを行います。

1. 実際のアプリを開きます；
2. すべての画面サイズ、両方のテーマ、提供するすべての言語を確認します；
3. 問題のある箇所を赤枠で囲みます；
4. 根本から修正し、バグを隠すだけの「修正」にはフラグを立てます；
5. 修正前後のスクリーンショットで修正を証明します；
6. 低速なスマートフォンでの速度を測定し、修正の優先順位を付け、コンテンツを削除しただけの高速化を検出します（v0.6から）。

検出できる問題

問題	表示される症状	エージェントが見落とす理由
ページのはみ出し	スマートフォンで横スクロールが発生する	デスクトップのレイアウトを想定している
テキストの途切れ	「Đăng ký nhận bản ti…」	短い英語の文字列でテストしている
右から左への表示の誤り	アラビア語が左から右に並び、行の左端が切れている	ページを dir="rtl" に切り替えない
重なり	バッジがボタンの上に重なっている	絶対配置は1つの幅では問題なく見える
コントラスト	ほとんど読めない灰色のテキスト	色はコード上で選ばれ、実際に確認されない
ダークモードの漏れ	ダークモードのページに白いカードが1つある	テーマが適用されないハードコードの #fff
小さすぎるタップ領域	スマートフォンに16pxのアイコンボタンがある	マウスは正確に操作できても、親指ではそうはいかない
コンソールエラー、画像の破損	赤いエラー、空の枠	誰もDevToolsを開いていない
レイアウトシフト	読んでいる途中でコンテンツが跳ねる	localhostではすべてが瞬時に読み込まれる
スタイルから外れた値	ブランドカラーとわずかに異なる青、16pxの角丸に混ざる15pxの角丸	デザイントークンを使わず、値をハードコードしている
ページの遅さ（mantis perf）	スマートフォンで5秒待たされる、API呼び出しが直列に行われる、チャットウィジェットがページの表示を妨げる	ノートPC上のlocalhostは高速

仕組み

1. 確認。 /mantis は実際のブラウザーで、すべての画面 × テーマ × 言語を通してアプリを実行し、注釈付きスクリーンショットとともに、エージェントが読むレポートを書き出します。
2. 修正。 /mantis-fix は症状ではなく原因を修正します。overflow-x: hidden を body に設定したり、テキストを収まるまで小さくしたり、ダークモードをオフにしたりすることはありません。次回の実行で、そうした変更が行われていないことを確認します。
3. 証明。 /mantis-proof は、変更前後を比較するシート、修正した問題のクローズアップ、そして必要に応じて動画を作成し、プルリクエストに添付できるようにします。
4. 高速化。 /mantis-perf は低速な 4G を使うスマートフォンのようにページを測定し、影響度とリスクの高い順に遅くしている要因を修正します。また、ページが中身を減らしたのではなく、速くなったことを確認します（以下を参照）。

mantis look http://localhost:3000 --routes /,/settings --locales en,vi

各言語のセルでは、ブラウザーのロケールと Accept-Language が設定されます。多くのアプリは別の方法で言語を切り替えますが、--locale-strategy で対応できます（v0.5 以降）。

アプリの言語切り替え方法	指定方法
URL プレフィックス（例：/vi/settings）	--locale-strategy path:/{locale}
クエリパラメーター	--locale-strategy query:lang
Cookie（next-intl、Rails）	--locale-strategy cookie:NEXT_LOCALE
localStorage（i18next）	--locale-strategy storage:i18nextLng

ページのテキストが最初の言語と同じになる言語は、「ローカライズされていません」と報告されます。通常は、指定したストラテジーが間違っています。

まだ翻訳がありませんか？ 疑似ロケールを追加します（v0.5 以降）：--locales en,pseudo。このセルでは最初の言語を読み込み、翻訳によって文字列が長くなる様子を模して、表示されるすべての文字列を書き換えます。「Subscribe」は [Šûƀƀšççŕîîƀéé] のように、アクセント付きで約 40％長く、角括弧付きになります。そのため、] が欠けていれば、末尾が切れていることが分かります。アプリが後から描画するテキストも書き換えられます。コード、フォーム入力、translate="no" のコンテンツはそのままです。疑似ロケールを使うと、テキストが長くなったときに崩れるレイアウトを見つけられます。ただし、すべての文字列を書き換えるため、どの文字列がハードコードされているかは判別できません。

右から左に読む言語。 アラビア語、ヘブライ語、ペルシア語、ウルドゥー語のページは右端から始まり、左方向にはみ出します。Mantis はこうしたページも同じ方法で、反転してチェックします。また、dir="rtl" が設定されておらず、ページが左から右にレイアウトされている場合もエラーを報告します。こうした言語がないアプリの動作を確認するには、--locales en,pseudo-rtl を使います。これは右から左にレイアウトされる疑似ロケールです（v0.5 以降）。

修正、それとも隠しただけ？

レポートをきれいにするようエージェントに指示すると、何も修正せずにレポートだけをきれいにすることがあります。すべての mantis look は、同じ URL の前回の実行結果と比較するため、こうした手口は通用しません。

手口	Mantis の報告内容
html、body、またはアプリのルート要素に overflow-x: hidden を設定する	はみ出しは依然として報告されます。切り取られている要素と、それを隠しているルールが示されます
壊れた要素を隠す（display: none、visibility: hidden、opacity: 0）	cover-up：問題はなくなりましたが、要素も消えています
重なり合う要素のうち、もう一方を隠す	その要素に cover-up が報告されます
テキストを収まるまで小さくする	cover-up：16px → 7px
クリップする、またはテキストを短く切る	cover-up：見える範囲が狭くなったか、文字数が減っています
ボタン、リンク、見出しがひっそりと消える	lost 警告

隠蔽はエラーなので、実行は引き続き失敗します。正しく修正すると、実行の最後にレシートが表示されます。

Mantis: 0 errors, 0 warnings in 24 cells
  vs 2026-10-29T11-51-22: 18 fixed · 0 new · 0 cover-ups · 0 lost

高速化、それとも単に中身を減らしただけ？（v0.6 からの mantis perf）

エージェントにページを高速化するよう頼むと、ヒーロー画像を削除したり、リストを5行に減らしたり、最初の画面に表示される内容を遅延読み込みにしたりすることがあります。数値は改善しますが、ページは悪くなります。mantis perf はページを計測し、遅くなっている原因をコードの行まで特定し、効果とリスクに基づいて修正案を順位付けします。また、「高速化」がコンテンツを削除しただけの場合は、実行を失敗させます。

mantis perf http://localhost:4173 --routes /,/pricing

スマートフォンのように計測します。 各ルートを Chromium で N 回、キャッシュなしで訪問します（デフォルトは --runs 5）。デフォルトのプロファイルは低速な4Gを使うミッドレンジのスマートフォンです。CPU は4倍遅く、往復時間は562 msです。--profile desktop を指定するとスロットリングが無効になります。LCP、FCP、TBT、CLS、TTFB、API データが利用可能になったタイミング、バイト数、リクエスト数の中央値とばらつきが得られます。開発サーバーは明示されます。その数値はユーザーが得るものとは異なるためです。

スロットリングが影響を隠してしまうため、もう1回、スロットリングなしで訪問します。次の内容を確認できます。

• サーバーで各リクエストに実際にかかった待ち時間。
• メインスレッドが時間を費やした関数を示す CPU プロファイル。
• 実行されなかったコードのカバレッジ。

修正案を効果順に提示します。 perf.md は修正案から始まります。

分類	意味
最初に対応	効果があり、リスクが低い
計画を立てて対応	効果はあるが、修正には慎重さが必要
できれば対応	小さな改善
判断に任せる	ベンダーの削除など、製品上の判断

各修正案には、エージェントが開ける原因箇所が記載されます。セレクター、URL、または関数と呼び出し元を含む file:line です（loadConfig /app.js:4 ← main /app.js:51）。さらに、修正によって変化する指標と推定削減量、その推定の確度、検出されたフレームワーク固有の修正方法（Next.js、Nuxt、Angular、Vue、React、SvelteKit）も示します。次の問題を検出します。

• 遅延読み込みされている、または見つかるのが遅い LCP 画像。
• 表示サイズに比べて大きすぎる画像。
• 最初の描画を妨げる <head> 内のファイル。
• メインスレッドを占有する関数。
• 実行されないコード。
• テキストの表示を妨げるフォント。
• レイアウトシフトとその原因（サイズの指定がない画像、後から挿入されたバナー、遅れて読み込まれるリスト）。
• 遅い HTML レスポンス。

遅い API。 すべての API 呼び出しを、呼び出し元のコードまで追跡します。Mantis は次の問題を検出します。

• サーバー側で遅いエンドポイント。
• 相互に待ち合う呼び出し。
• 同じ呼び出しの重複。
• 項目ごとに1回ずつ行われる呼び出し（N+1）。
• 大きな JSON。
• スクリプトの完了を待って遅れて始まる最初の呼び出し。

サードパーティ。 ベンダーごとにグループ化します（Google Analytics、Intercom、YouTube、Stripe など、約50社）。それぞれのバイト数、メインスレッドの使用時間、レンダリングを妨げるファイル、iframe を表示します。種類ごとに修正方法も示します。チャットや動画にはファサード、分析にはページの操作が可能になった後の読み込み、フォントにはセルフホストを使用します。コストのかかるベンダーを使う価値があるかどうかは、「判断に任せる」に記載されます。

信頼できる計測結果。 修正後に再実行すると、同じ URL とプロファイルでの前回の実行結果と比較します。

vs 2026-10-30T12-32-02: LCP 2.5 s → 36 ms · TBT 121 ms → 0 ms · CLS 0.164 → 0 · transferred 551 KB → 354 KB · 11 fixed · 0 new · 0 cover-ups

変化としてカウントされるのは、ノイズ、つまり両方の実行におけるばらつきを超えた場合だけです。それ以外は ≈ と表示されます。LCP 画像、テキスト、最初の画面の画像、見出し、コントロールを削除したために速くなったルートは、ごまかしとしてエラーになります。「高速化、それとも単に中身を減らしただけ？」コンテンツとともに消えた検出結果は、修正済みとしてカウントされません。

これは Lighthouse ですか？ Lighthouse はページをスコア評価します。mantis perf はエージェントの反復ワークフロー向けに構築されています。

• 関数と呼び出しスタックまで特定された原因。
• 効果だけでなくリスクも考慮して順位付けされた修正案。
• 修正方法も含む API とベンダーの検出結果。
• 複数回のキャッシュなし実行における中央値。
• コンテンツの削除を高速化としてカウントしない、修正前後の計測結果。

数値

これまでに測定した内容：

• 仕込んだバグ。 fixtures/buggy-app には、UI のバグが 13 件仕込まれています。内容は PLANTED.json に記載されています。Mantis は、各バグが仕込まれた画面、テーマ、言語の組み合わせで、それらすべてを報告し、それ以外は報告しません。すべてのバグを修正した同じアプリである fixtures/clean-app では、問題は 0 件と報告します。どちらのチェックも CI で実行されます。

• 隠蔽。 同じ URL の buggy-app に施した 4 つのごまかし（overflow-x: hidden でオーバーフローを隠す、メニューボタンを隠す、重なっているボタンを隠す、ラベルを 7px に縮小する）は、いずれも引き続き報告されるか、隠蔽としてフラグが立ちます。正直に修正した clean-app に差し替えると、すべての問題が修正済みとなり、新規 0 件、隠蔽 0 件、未検出 0 件になります。これも CI で実行されます。

• 隠蔽の誤検知。 tailwindcss.com、vercel.com、notion.com、stripe.com で連続して 2 回実行したところ、隠蔽は 0 件、操作部品の未検出は 0 件でした。実行ごとにニュースが変わる vnexpress.net では、隠蔽は 0 件で、「未検出」の警告が 1 件にまとめて報告されました。2026-10-29 に確認。

• 実際のサイト。 公開サイト 10 件（example.com、playwright.dev、Hacker News、tailwindcss.com、MDN、svelte.dev、react.dev、gov.uk、vercel.com、stripe.com）では、報告されたエラー 21 件のうち 18 件が手動確認でも妥当でした。誤検知 3 件は tailwindcss.com のデモ用フレームでした。2026-10-26 に確認。

• スタイルの傾向。 buggy-app で mantis learn を実行すると、そこに仕込まれた、よく似た要素がちょうど 3 件表示されます：

  • --muted との色差が ΔE 0.4 の色。
  • 14px のスケールに対して 13.6px のラベル。
  • --radius: 16px に対して角の半径が 15px。

  clean-app では何も検出されません。clean-app にハードコードした、よく似た 4 つの要素（色、フォントサイズ、角の半径、フォント）は、それぞれ off-style の警告を 1 件発生させます。明らかに新しい色では警告は発生しません。これらのチェックは CI で実行されます。

• スタイル逸脱の誤検知。 公開ページを学習させ、直後に再確認したところ、tailwindcss.com と vercel.com では off-style の警告は 0 件でした。stripe.com では 2 件、linear.app では 4 件、github.com では 4 件でした。計 10 件すべてが、読み込みのたびに内容が変わる、動作中の製品デモまたは遅延読み込みされるリポジトリ一覧の中にありました。2026-10-29 に確認。

エージェントのベンチマーク

同じエージェント（Claude Code、Opus 5.5 と Haiku 5.5）に、Mantis のスキルあり・なしで同じ UI タスクを実行させ、各条件で 3 回ずつ測定しました。採点には、Mantis の検出器を一切使わない、非公開の Playwright 採点ツールを使用しました。すべて bench/ にあります。手法、仕込んだバグ、採点ツール、各エージェントの最終レポートと差分、引き分け、敗北が含まれています。

• Mantis を使っても、Opus 5.5 が修正するバグの数は増えませんでした。 小規模アプリ 2 件では引き分けでした（13 件中 13.0 対 12.7、9 件中 9 対 9）。Excalidraw のフォークでは、v0.3.1 で後れを取り（7 件中 6.0 対 6.7）、v0.4.0 では上回りました（7 件中 7.0 対 6.7）。これらの修正は、同じフォークで調整したものです。
• プレッシャーがかかると、隠れたバグも報告されました。 「check:ui を通し、変更は小さく抑える」と指示すると、どちらの条件でもチェック対象のものだけが修正されました。Mantis を使った場合、最終レポートにはチェックでは検出できないバグも記載されました。5 件中 3.7 件に対して 1.7 件（Opus、Atlas）、また 4 件中 4 件がすべての実行で報告されたのに対し、Mantis なしでは 0 件でした（Opus、Excalidraw、v0.4.0）。
• Mantis が見えないものは、エージェントにも見えません。 キャンバス上のコントラストを測定できなかった v0.3.1 では、Mantis を使ったエージェントは、1.27:1 のボタンを修正する頻度が Mantis なしのエージェントより低くなりました。
• どちらの条件でも、バグを隠蔽したエージェントはいませんでした：採点対象の 72 回の実行で 0 件。

なぜ … ではないのでしょうか？

ブラウザー MCP やスクリーンショットのスクリプトでは？ Playwright MCP、Chrome DevTools MCP、agent-browser を使うと、エージェントはブラウザーを利用できます。それでも、どの画面を開くかを決め、スクリーンショットを一枚ずつ目視で判断する必要があります。Mantis は Playwright 上で動作し、エージェントが省略しがちな部分を追加します。

• 毎回同じマトリックスを確認します。スマートフォン、タブレット、デスクトップ × ライトモードとダークモード × すべての言語です。
• 検出器が要素を特定し、各検出結果の根拠となる測定値を示します。
• 前回の実行結果と比較し、バグを隠しただけの修正を検出します。

ベンチマークでは、Mantis を使わない Opus 5.5 が独自に Playwright スクリプトを書き、ほぼ同じ数のバグを修正しました。違いが出たのは、プレッシャーがかかる場面です。Mantis を使うと、CI チェックでは見つけられないことをエージェントが引き続きユーザーに伝えました。

ProofShot では？ ProofShot は、エージェントの動作（動画、スクリーンショット、エラー）を記録し、確認できる証拠バンドルにまとめます。Mantis はマトリックス全体で特定の種類の不具合を確認し、修正が一つの画面で問題を隠しただけの場合は実行を失敗させます。一方は「何が起きたか？」に答え、もう一方は「壊れているか？ 本当に修正されたか？」に答えます。

Impeccable では？ Impeccable の detect は、デザインルールに照らしてページを確認し、UI がありきたりな見た目にならないようにします。Mantis は、問題なく動作するかを確認します。何もはみ出さず、あらゆる言語のすべてのラベルが両方のテーマで読みやすく、修正が本物であることを確認します。Impeccable は見た目を洗練させ、Mantis は壊れていないことを証明します。両方を使ってください。

ビジュアルリグレッション（Percy、Chromatic、BackstopJS）では？ これらはスクリーンショットを承認済みのベースラインと比較し、変更のたびに人に確認を求めます。Mantis はベースラインなしで初回実行からバグを見つけ、何がどこで問題なのかを示します。前回の実行結果と比較するのは、問題を隠しただけの変更を検出するためです。

Mantis には好みがありません。あなたの好みを使います。

mantis learn は実行中のアプリを開き、事前にデザイン仕様を書くことなく、実際に使われているデザインスタイルを測定します。

• 各テーマの色と、それらを定義する CSS 変数
• フォントサイズ、フォント、ウェイト
• 角丸、間隔、影、アニメーションのタイミング

mantis learn http://localhost:3000 --routes /,/settings

エージェント向けの .mantis/style.json、人間向けの style.md、そして style.png シートを書き出します。それ以降、look はすべてのページをそのスタイルと照合します。ページで次のようなものが使われている場合、off-style と警告します。

• ハウスカラーと ΔE 5 以内の色で、ハウスカラーそのものではないもの。たとえば、--primary をハードコードした複製
• ハウススタイルの値から 1、2 ピクセルずれたフォントサイズや角丸
• アプリのほかの場所では使われていないフォント

新しいイラストの色など、意図的な可能性があるため、ほかの値から大きく離れた値はそのままにします。このシートには、アプリ内にすでにある類似色も表示されます。

/mantis-fix は CSS を書き込む前に style.json を読み込み、新しい値を作り出すのではなく、ハウススタイルの値を再利用します。

Mantis は .mantis/ に .gitignore を配置するため、レポート、スクリーンショット、保存したセッションは git の対象外になります。ハウススタイルをチームと共有するには、意図的にコミットしてください。git add -f .mantis/style.json

シートに表示するプロジェクト情報

コンタクトシートと証拠には、プロジェクト名、リポジトリへのリンクと QR コードが表示されます。これらは package.json と git リモートから読み込まれます。変更するには .mantis.json を追加します。

{ "name": "Lumen", "logo": "public/logo.svg", "brandColor": "#4f46e5", "repo": "acme/lumen", "qr": true }

ログインが必要なページ

Playwright のストレージ状態を Mantis に渡すと、すべての画面でログイン済みの状態から開始できます。

npx playwright codegen --save-storage=.mantis/auth.json http://localhost:3000/login   # sign in, close the window
mantis look http://localhost:3000 --routes /dashboard,/settings --storage-state .mantis/auth.json

アプリが localStorage にフラグ（オンボーディングの完了やデモセッションなど）だけを保存する場合は、ファイルを手動で作成してください。

{ "cookies": [], "origins": [{ "origin": "http://localhost:3000", "localStorage": [{ "name": "onboarded", "value": "1" }] }] }

このファイルには有効なセッションが含まれるため、git の対象外にしてください。.mantis/ 内に置けば、Mantis がそこに .gitignore を作成するため、すでに対象外になります。proof --video にも同じフラグを渡せます。ストレージ状態ファイルの名前が同じ場合に限り、実行結果は過去の実行結果と比較されます。

すべてのプルリクエストで（GitHub Action、v0.7以降）

このアクションはプルリクエストのプレビュー環境を確認し、ライブサイトと比較することで、変更によって何が修正され、何が壊れ、何が隠されただけなのかを示します。結果はプルリクエストのコメントとして投稿され、プッシュのたびに更新されます。また、ジョブのサマリーにも表示されます。シートとスクリーンショットはアーティファクトとしてアップロードされます。

プレビュー環境をGitHubに報告するホスト（Vercel、Netlify、…）を使用する場合：

name: Mantis
on: deployment_status
permissions:
  contents: read
  pull-requests: write
jobs:
  look:
    if: github.event.deployment_status.state == 'success'
    runs-on: ubuntu-latest
    steps:
      - uses: vulinh1704/[email protected]
        with:
          url: ${{ github.event.deployment_status.target_url }}
          baseline-url: https://your-app.com
          routes: /,/pricing,/settings
          locales: en,vi

または、ジョブ内でアプリをビルドして起動し、url にそのURL（http://localhost:4173）を指定します。

• command: perf は代わりに速度を測定します。コメントには、ルートごとのメトリクス、ベースラインとの比較結果、最初に行うべき修正が表示されます。コンテンツを削除しただけで速度が向上した場合、チェックは失敗します。

• fail-on はデフォルトで終了コードに従います。

  • look はエラーがあると失敗します。
  • perf は、最初に対処すべきことや計画すべきことがあると失敗します。
  • どちらも問題を隠した場合は失敗します。

  修正によって問題が隠された場合にのみ失敗させるには fail-on: cover-ups を、結果の報告だけを行うには fail-on: never を設定します。

• 入力： routes、viewports、schemes、locales、locale-strategy、dark-strategy、runs、profile、args（その他すべて）は、CLIのオプションに対応します。

• 出力： errors、warnings、cover-ups、exit-code、report、artifact-url。

• フォーク： フォークからのプルリクエストでは、読み取り専用のトークンが使用されます。その場合、アクションは結果をジョブのサマリーにのみ書き込みます。

インストール

Mantisは初期開発段階（v0.7）です。まだ不完全な部分があることをご了承ください。問題が見つかった場合は、issueを作成してください。

Claude Code

/plugin marketplace add vulinh1704/mantis
/plugin install mantis@mantis

その他のエージェント。 スキルはオープンなSKILL.md形式を使用しているため、スキルを読み込むエージェント（Codex、Cursor、GitHub Copilot、Gemini CLIなど）には、次の方法でインストールできます。

npx skills add vulinh1704/mantis

MCP サーバー（v0.7以降）。任意のMCPクライアント（Claude Desktop、Cursor、VS Code、Codex、Windsurf、…）から、Mantisをツールとして呼び出せます。

ツール	返される内容
mantis_look	前回の実行と比較した修正点や隠された問題を含む、レポートとコンタクトシート
mantis_perf	優先順位を付けた修正点と、実行前後の比較結果を含むパフォーマンスシート
mantis_learn	サイトのスタイルガイドとそのシート
mantis_proof	2回の実行結果を比較した前後のシート

ツールの実行中は進捗が表示され、CLIと同じオプションを指定できます。レポートはサーバーの作業ディレクトリにある.mantis/に保存されます。

claude mcp add mantis -- npx -y @vulinh1704/mantis mcp

その他のクライアントでは、MCP設定で同じコマンドを指定します。

{ "mcpServers": { "mantis": { "command": "npx", "args": ["-y", "@vulinh1704/mantis", "mcp"] } } }

lookの実行には数秒、perfの実行には1分以上かかるため、クライアントでツールのタイムアウトを長めに設定してください。

CLIのみ

npx -y @vulinh1704/mantis look http://localhost:3000
# or install it: npm i -g @vulinh1704/mantis

MantisはPlaywrightを通じてChromiumを操作します。ブラウザーがまだインストールされていない場合は、npx playwright install chromiumを実行してください。Node.js 20以降が必要です。

Docker。 Nodeやブラウザーをインストールする必要はありません。イメージには、linux/amd64およびlinux/arm64向けのChromium、ffmpeg、シートで使用するフォントが含まれています。

# Docker Desktop (Mac, Windows): reach the dev server through host.docker.internal
docker run --rm -v "$PWD:/work" ghcr.io/vulinh1704/mantis look http://host.docker.internal:3000

# Linux: share the host's network, and own the files it writes
docker run --rm --network host --user "$(id -u):$(id -g)" -v "$PWD:/work" ghcr.io/vulinh1704/mantis look http://localhost:3000

レポートは通常どおり./.mantisに保存されます。マウントしたディレクトリ内のストレージ状態ファイルは、--storage-state .mantis/auth.jsonとして使用できます。

制限事項

• Mantis はページが動作するかを確認します。美しいかどうかは確認しません。デザインスキルと併用してください。
• フローの一連の操作や、ホバー状態とフォーカス状態の確認にはまだ対応していません。
• アニメーションの滑らかさはまだ測定できません。
• カバーアップの確認には、比較対象として同じ URL の前回の実行結果が必要です。ライブページではレイアウトシフト、コンソールの問題、ネットワークの問題が自然に変化するため、カバーアップの確認対象にはなりません。
• スタイル逸脱の確認では、意図ではなく値を比較します。商品デモ、カルーセル、フィードなど、読み込みごとに変化するコンテンツには、学習時の実行で一度も見られなかった値が表示されることがあります。そのような領域は --ignore で除外してください。
• コントラストとダークモードの確認では、ページのコードから背景を判別できない場合にスクリーンショットを読み取ります。対象となるのは、<canvas> 上のテキスト（ホワイトボード、地図、エディターなど）や、透明レイヤーの下にあるテキストです。マーケティングページに HTML で描画された製品のモックアップは、ほかのテキストと同様に測定されます。装飾であれば --ignore で除外してください。写真、CSS の背景画像、グラデーションの上にあるテキストは、引き続き確認されません。
• mantis perf は、Chromium でスロットリングをエミュレートしてラボ環境で測定します。ユーザーから得られるフィールドデータではありません。INP の測定には実際のインタラクションが必要なため、TBT と長いアニメーションフレームを代わりに使用します。負荷の高いマシンではノイズが生じますが、実行結果のばらつきで確認できます。削減量は推定値です。修正のたびに再測定してください。

なぜシャコなのか？

シャコには12種類の色受容体がありますが、あなたには3つしかありません。また、動物界でも特に速いパンチを繰り出します。バグを見つけて、バグを叩きます。

ライセンス

MIT © Truong Dang Vu Linh。Playwright と axe-core を基盤に構築されています。