Introduction svelte-vitals

2026/07/17に開催された「Svelte Japan Offline Meetup #8」で発表した資料です。

https://svelte-jp.connpass.com/event/392428/

発表者：oekazuma
X: oekazuma
GitHub: oekazuma
Qiita: oekazuma

1. Svelte Japan Offline Meetup #8 Introduction svelte-vitals svelte-vitals SvelteKit のための健康診断 @oekazuma
2. 02 自己紹介 oekazuma 普段の実務も Svelte / SvelteKit で開発 svelte-meta-tags の作者 Svelte Japan 運営メンバー GitHub / X / Qiita @oekazuma 02 / 16
3. 03 svelte-vitals とは ソースコードを静的解析して、 SvelteKit アプリの「健康状態」をチェックするツール レンダリングなし ブラウザ不要 数秒で完了 03 / 16
4. 04 作ったきっかけ やりたいこと 01 デプロイ前に気づきたい title や OGP の欠落を、本番に出て からではなく、その前に見つけたい + やりたいこと 02 記憶じゃなく仕組みで確 認したい SEO や Svelte の「正しい書き方」 を、人の記憶に頼らず機械的に担保 したい + やりたいこと 03 AI エージェントに直さ せたい 見つけた問題を、エージェントがそ のまま直せる形で渡したい → 誰でも、健全で質の高い Svelte アプリケーションを作れるようにする 04 / 16
5. 05 AI エージェント時代のコード品質 AI がコードを書く量は、 人がレビューできる量を超えていく agent エージェントがコードを書 く → npx svelte-vitals ソースだけを数秒で機械的 にチェック → loop 結果をエージェントが読める形 で返す → そのまま直せる 「アプリとして健全か」の担保を、人の目から仕組みへ。エージェント向けの機能は後半で紹介します 05 / 16
6. 06 5つのチェックカテゴリ SEO title・description・OG / Twitter・canonical・JSON-LD・sitemap … 30 ルール Performance img の寸法・loading・render-blocking な script・重い import … 10 ルール Correctness key なし {#each}・$effect の誤用・書き換えられない $state … 9 ルール Security {@html} の XSS リスク・javascript: URL 5 ルール Architecture 巨大コンポーネント・props の持ちすぎ 2 ルール 06 / 16
7. 07 使い方と Health スコア 01 インストール不要。npx で実行する だけ 02 5カテゴリの重み付き合計が Health スコア(100点満点) 03 critical な問題が残っていると「失 敗」になり、CI をそのまま止められ る $ npx svelte-vitals@latest Svelte Vitals · static mode Health: 90/100 SEO Score: 79/100 Performance Score: 95/100 Correctness Score: 95/100 Critical (1) ✗ SEO001 Missing <title> /none Warnings (1) ✗ PERF001 Missing <img> width/height /blog 07 / 16
8. 08 ライブダッシュボード — dev 中、デフォルトで有効 npm run dev いつもの開発サーバーを起 動 → static 起動時に全ルートを静的解 析。開かなくても全体の Health が出る → measured 開いたルートは、実際にレンダ リングされた <head> で結果を 更新 ダッシュボードはデフォルトで有効 08 / 16
9. 09 ダッシュボードでできること 01 「Overview」でプロジェクト全体の指摘 をひとつのリストに集約 02 検索・並び替え・重要度やカテゴリでの 絞り込みもできる 03 指摘ごとに「AI Prompt」ボタン。押すだ けで修正プロンプトをコピーできる 04 CLI でも --reporter html で同じレポー トを 1 ファイルに出力 localhost:5173/__svelte-vitals/ 09 / 16
10. 実際に動かして 見てみましょう localhost:5173/__svelte-vitals/ 10 / 16
11. 11 Plugin mode — ビルド時のチェック 01 プリレンダリングで実際に生成された <head> を解析 02 コンポーネントのソースも読み込んで、 5カテゴリすべてをチェック 03 しきい値を超える問題があれば、ビルド ごと失敗にできる // vite.config.ts import { sveltekit } from '@sveltejs/kit/vite'; import { svelteVitals } from '@svelte-vitals/vite'; export default { plugins: [ sveltekit(), svelteVitals({ minHealth: 60 }) ] }; 11 / 16
12. 12 CI / GitHub 連携 01 uses: oekazuma/svelte- vitals/packages/action の1行で、PR の該 当行に指摘コメント 02 --min-health 60 で「この点数を下回ったら 失敗」にできる 03 ワークフロー一式は svelte-vitals ci install で自動セットアップ # .github/workflows/svelte-vitals.yml - uses: oekazuma/svelte- vitals/packages/action@v1 with: min-health: 60 ✗ Critical — SEO001 Missing <title> src/routes/none/+page.svelte これだけで、PR にこんな形でインライン表示されます 12 / 16
13. 13 AI 連携 ① — agent レポーター 01 結果を、AI がそのまま直せる「修正指示 書」として Markdown で出力 02 指摘ごとに、場所・修正コードの例・直っ たことの確認項目つき 03 Claude Code などの中で実行すると、自動 でこのモードに切り替わる ## SEO001 — Missing <title> File: src/routes/none/+page.svelte Fix: <svelte:head> <title> ページのタイトル</title> </svelte:head> Check: このルートで <title> が出力されること 13 / 16
14. 14 AI 連携 ② — MCP サーバー @svelte-vitals/mcp エージェントに 2 つのツールを提供 analyze プロジェクトを解析して、結果を返す 指摘ごとに fix・recommendation・ドキュメント URL 付 きの構造化データ。エージェントはそのまま修正に移れ る explain_rule ルール 1 件の根拠と修正方法を返す 「なぜダメか」「どう直すか」を、エージェントがその 場で確認できる $ npx svelte-vitals@latest install 対話式で Claude Code / Cursor / Codex に設定できます 14 / 16
15. 15 AI 連携 ③ — Agent Skills /improve-svelte 読み取り専用の監査スキル 01 指摘を、ルールの重大度ではなく実際の影響度 でランク付け 02 そのまま実行できる実装計画を plans/ に書き出 す 03 ソースには一切触れない。いつ実行しても安全 ## Improvement Plan 1. SEO003 · Canonical URL — / Impact: High( 検索流入の入口) 2. PERF005 · LCP image — /products Impact: Medium 3. SEO025 · Image alt — /blog Impact: Low → plans/01-canonical-homepage.md ルールカタログを埋め込んだ常時スキル /svelte-vitals も同梱。Claude Code / Cursor / Codex で同じ SKILL.md が動きます 15 / 16
17. svelte-vitals みなさん、ぜひ試して 使ってください $ npx svelte-vitals@latest oekazuma.github.io/svelte-vitals github.com/oekazuma/svelte-vitals @oekazuma