Skip to content
marp-slide-reviewer logo

Marp スライドレビュアー

marp-slide-reviewer

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

SKILL.md

Full skill instructions

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 など)でも同様の実装が可能です。

More Other skills

Delegate independent tasks to specialized agents working concurrently with isolated context.

295.4K 206.3K
View

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

179.7K 100.1K
View

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

179.7K 89.5K
View

A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).

179.7K 76.1K
View

Fundamental design principles for writing maintainable, testable Python code.

40.2K 21.9K
View

Modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first strategies.

40.2K 20K
View

Generate Playwright tests from scenarios using interactive browser exploration and validation.

39.7K 18.2K
View

Modern React state management with Redux Toolkit, Zustand, Jotai, and React Query for every state category.

40.2K 14.7K
View

GDPR-compliant data handling with consent management, data subject rights, and privacy controls.

40.2K 14.3K
View

Python error handling patterns including input validation, exception hierarchies, and partial failure handling. Use when implementing validation logic, designing exception strategies, handling batch processing failures, or building robust APIs.

40.2K 13.5K
View

Detailed multi-file refactor planning with safety checks and rollback guidance.

39.7K 13K
View