Back to list
ks6088ts-labs

marp-slide-reviewer

by ks6088ts-labs

Public repository for Agent Skills

1🍴 0📅 Jan 20, 2026

SKILL.md


name: marp-slide-reviewer description: ローカルサーバーで起動している Marp スライドを視覚的に検証し、レイアウト問題を自動修正するスキル。「スライドをレビュー」「Marp スライドの視覚的チェック」「スライドのレイアウトを確認」「プレゼン資料の見た目を検証」などのリクエストでトリガーします。テキストの切れ目、重なり、配置問題、コントラスト不足、はみ出し、余白不足などの視覚的問題を検出・修正します。

Marp スライドレビュアー

このスキルは、Marp スライドの視覚的な品質を検証し、問題を自動修正します。

前提条件

  • ユーザーがローカルサーバーでスライドを起動していること
  • URL は http://localhost:8080/slide.md のような形式
  • 各スライドは {BASE_URL}#1, {BASE_URL}#2 でアクセス可能(1始まり)

ワークフロー

ステップ 1: URL の確認

URL が提供されていない場合、必ずユーザーに質問する:

スライドの URL を教えてください(例: http://localhost:8080/slide.md

重要: URL が不明な状態では処理を開始しないこと。

ステップ 2: スライドの総数確認

  1. 指定 URL にブラウザでアクセス
  2. ページのスナップショットを取得
  3. ページネーションまたはスライド番号からスライド総数を判断

ステップ 3: 各スライドの視覚検証

各スライド(1〜N)に対して以下を実行:

  1. {BASE_URL}#{SLIDE_NUMBER} にアクセス
  2. スクリーンショットを撮影
  3. 画像を分析し、視覚的問題を確認

確認項目

問題説明
テキストの切れ目ヘッダーバー、図形、スライド端でテキストが切れている
テキストの重なりテキストが他のテキストや図形と重なっている
配置の問題コンテンツが境界や他要素に近すぎる
コントラスト不足テキストと背景のコントラストが不十分
はみ出しコンテンツがスライド領域からはみ出している
余白の不足要素間の余白が不十分で窮屈に見える

ステップ 4: 問題の修正

問題が見つかった場合:

  1. 元の Markdown ファイルを読み込む
  2. 問題スライドのセクションを特定(--- で区切られた箇所)
  3. 修正を適用

修正テクニックの詳細は references/fix-techniques.md を参照。

ステップ 5: 修正後の再検証

  1. ブラウザをリロード(同じ URL に再アクセス)
  2. 修正後のスライドをスクリーンショットで確認
  3. 問題が解消されるまでステップ 3-5 を繰り返す

注意事項

  • 修正は最小限に留め、元のデザイン意図を尊重する
  • 大幅な変更が必要な場合はユーザーに確認を取る
  • スライドの内容(テキスト)は変更せず、レイアウトのみを修正する
  • 修正履歴をユーザーに報告する

出力形式

検証・修正完了時、以下の形式で報告:

# スライドレビュー結果

## 検証サマリー

- 検証 URL: {URL}
- 総スライド数: {N} 枚
- 問題検出数: {M} 件
- 修正完了数: {X} 件

## 検出された問題と修正内容

### スライド {番号}

- **問題**: {問題の説明}
- **修正内容**: {修正の説明}

(問題があったスライドごとに記載)

## 最終確認

すべてのスライドの視覚的な問題が解消されました。

必要な能力

このスキルを実行するには、以下の能力が必要です:

能力説明
ウェブページナビゲーション指定 URL へのアクセス、ページ遷移
スクリーンショット撮影表示中のページの画像キャプチャ
画像分析スクリーンショットの視覚的問題検出
ファイル読み書きMarkdown ファイルの読み込みと編集

Reference Implementation

Playwright MCP を使用した実装

このスキルは Playwright MCP を使用して実装できます。

能力Playwright MCP ツール
ウェブページナビゲーションmcp_playwright_browser_navigate
スナップショット取得mcp_playwright_browser_snapshot
スクリーンショット撮影mcp_playwright_browser_take_screenshot

その他のブラウザ自動化ツール(Selenium、Puppeteer など)でも同様の実装が可能です。

Score

Total Score

65/100

Based on repository quality metrics

SKILL.md

SKILL.mdファイルが含まれている

+20
LICENSE

ライセンスが設定されている

+10
説明文

100文字以上の説明がある

0/10
人気

GitHub Stars 100以上

0/15
最近の活動

1ヶ月以内に更新

+10
フォーク

10回以上フォークされている

0/5
Issue管理

オープンIssueが50未満

+5
言語

プログラミング言語が設定されている

+5
タグ

1つ以上のタグが設定されている

+5

Reviews

💬

Reviews coming soon