Introduction svelte-vitals

Svelte Japan Offline Meetup #8 Introduction svelte-vitals svelte-vitals SvelteKit のための健康診断
@oekazuma

02 自己紹介 oekazuma 普段の実務も Svelte / SvelteKit で開発 svelte-meta-tags の作者
Svelte Japan 運営メンバー GitHub / X / Qiita @oekazuma 02 / 16

03 svelte-vitals とはソースコードを静的解析して、 SvelteKit アプリの「健康状態」をチェックするツールレンダリングなしブラウザ不要数秒で完了 03
/ 16

04 作ったきっかけやりたいこと 01 デプロイ前に気づきたい title や OGP の欠落を、本番に出てからではなく、その前に見つけたい
+ やりたいこと 02 記憶じゃなく仕組みで確認したい SEO や Svelte の「正しい書き方」を、人の記憶に頼らず機械的に担保したい + やりたいこと 03 AI エージェントに直させたい見つけた問題を、エージェントがそのまま直せる形で渡したい → 誰でも、健全で質の高い Svelte アプリケーションを作れるようにする 04 / 16

05 AI エージェント時代のコード品質 AI がコードを書く量は、人がレビューできる量を超えていく agent エージェントがコードを書く →
npx svelte-vitals ソースだけを数秒で機械的にチェック → loop 結果をエージェントが読める形で返す → そのまま直せる「アプリとして健全か」の担保を、人の目から仕組みへ。エージェント向けの機能は後半で紹介します 05 / 16

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

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

08 ライブダッシュボード — dev 中、デフォルトで有効 npm run dev いつもの開発サーバーを起動
→ static 起動時に全ルートを静的解析。開かなくても全体の Health が出る → measured 開いたルートは、実際にレンダリングされた <head> で結果を更新ダッシュボードはデフォルトで有効 08 / 16

09 ダッシュボードでできること 01 「Overview」でプロジェクト全体の指摘をひとつのリストに集約 02 検索・並び替え・重要度やカテゴリでの絞り込みもできる 03 指摘ごとに「AI
Prompt」ボタン。押すだけで修正プロンプトをコピーできる 04 CLI でも --reporter html で同じレポートを 1 ファイルに出力 localhost:5173/__svelte-vitals/ 09 / 16

実際に動かして見てみましょう localhost:5173/__svelte-vitals/ 10 / 16

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 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 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 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 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

svelte-vitals みなさん、ぜひ試して使ってください $ npx svelte-vitals@latest oekazuma.github.io/svelte-vitals github.com/oekazuma/svelte-vitals @oekazuma

Introduction svelte-vitals

Introduction svelte-vitals

Kazuma Oe

More Decks by Kazuma Oe

Other Decks in Programming

Featured

Transcript

Svelte Japan Offline Meetup #8 Introduction svelte-vitals svelte-vitals SvelteKit のための健康診断

02 自己紹介 oekazuma 普段の実務も Svelte / SvelteKit で開発 svelte-meta-tags の作者

03 svelte-vitals とはソースコードを静的解析して、 SvelteKit アプリの「健康状態」をチェックするツールレンダリングなしブラウザ不要数秒で完了 03

04 作ったきっかけやりたいこと 01 デプロイ前に気づきたい title や OGP の欠落を、本番に出てからではなく、その前に見つけたい

05 AI エージェント時代のコード品質 AI がコードを書く量は、人がレビューできる量を超えていく agent エージェントがコードを書く →

06 5つのチェックカテゴリ SEO title・description・OG / Twitter・canonical・JSON-LD・sitemap … 30 ルール Performance

07 使い方と Health スコア 01 インストール不要。npx で実行するだけ 02 5カテゴリの重み付き合計が

08 ライブダッシュボード — dev 中、デフォルトで有効 npm run dev いつもの開発サーバーを起動

09 ダッシュボードでできること 01 「Overview」でプロジェクト全体の指摘をひとつのリストに集約 02 検索・並び替え・重要度やカテゴリでの絞り込みもできる 03 指摘ごとに「AI

実際に動かして見てみましょう localhost:5173/__svelte-vitals/ 10 / 16

11 Plugin mode — ビルド時のチェック 01 プリレンダリングで実際に生成された <head> を解析 02

12 CI / GitHub 連携 01 uses: oekazuma/svelte- vitals/packages/action の1行で、PR

13 AI 連携 ① — agent レポーター 01 結果を、AI がそのまま直せる「修正指示

14 AI 連携 ② — MCP サーバー @svelte-vitals/mcp エージェントに 2

15 AI 連携 ③ — Agent Skills /improve-svelte 読み取り専用の監査スキル 01

svelte-vitals みなさん、ぜひ試して使ってください $ npx svelte-vitals@latest oekazuma.github.io/svelte-vitals github.com/oekazuma/svelte-vitals @oekazuma