Agent skill

marp-slide-reviewer

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

Stars 1
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/ks6088ts-labs/skills/tree/main/skills/marp-slide-reviewer

SKILL.md

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 を繰り返す

注意事項

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

出力形式

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

markdown
# スライドレビュー結果

## 検証サマリー

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

Expand your agent's capabilities with these related and highly-rated skills.

ks6088ts-labs/skills

reverse-engineering

ソフトウェアのリバースエンジニアリングレポートを作成するスキル。リポジトリの構造や機能を調査し、外部仕様・内部実装・使用方法を明確にするレポートを作成します。「リバースエンジニアリングレポートを作成して」「コードベースを分析して」「プロジェクトの構造を調査して」「システムの仕組みを解析して」等のリクエストで使用してください。新規開発者のオンボーディング、プロジェクトの理解、ドキュメント作成、将来の開発のための基礎資料として活用できます。

1 0
Explore
ks6088ts-labs/skills

architecture-design-creator

PRDと機能設計書に基づいてアーキテクチャ設計書を作成するスキル。docs/prd.md と docs/functional-design.md が存在する場合に、テクノロジースタック、レイヤードアーキテクチャ、データ永続化戦略、パフォーマンス要件、セキュリティ設計等を含むアーキテクチャ設計書を作成します。「アーキテクチャ設計書を作成して」「技術仕様書を書いて」「architecture design を作って」等のリクエストで使用してください。

1 0
Explore
ks6088ts-labs/skills

agents-md-creator

AIコーディングエージェント向けの指示書「AGENTS.md」を作成するスキル。プロジェクトにAIエージェントが作業するための文脈と指示を集約するファイルを作成したい場合に使用します。「AGENTS.mdを作成」「AIエージェント用の指示書を作る」「エージェント向けREADMEを作成」などのリクエストでトリガーします。OpenAI Codex、Claude Code、GitHub Copilot、Cursorなど、複数のAIエージェントで共通利用できるオープンな標準フォーマットです。

1 0
Explore
ks6088ts-labs/skills

doc-writer

ドキュメント執筆をサポートするスキル。ユーザーがPRDに基づいてドキュメントを作成、編集、または更新したい場合に使用します。このスキルは、docs/prd.md に記載されたプロダクト要求仕様書を参照しながら、技術ドキュメント、設計ドキュメント、ユーザーガイド、APIドキュメントなどの執筆を支援します。「ドキュメントを書く」「仕様書を作成」「ガイドを作る」などのドキュメント作成タスクに言及した場合にトリガーします。

1 0
Explore
ks6088ts-labs/skills

glossary-creator

プロジェクト用語集を作成するスキル。docs/prd.md や docs/functional-design.md が存在する場合に、ドメイン用語、技術用語、略語、アーキテクチャ用語等を体系的に定義した用語集を作成します。「用語集を作成して」「glossary を作って」「用語を定義して」等のリクエストで使用してください。

1 0
Explore
ks6088ts-labs/skills

code-review

コードレビューを実施するためのスキル。ユーザーがコードの品質、セキュリティ、テスト、パフォーマンス、アーキテクチャの観点からコードレビューを依頼した場合に使用します。「コードレビュー」「コードをチェック」「PRをレビュー」「このコードを確認して」などのコードレビュータスクに言及した場合にトリガーします。セキュリティ脆弱性、ロジックエラー、テスト品質、パフォーマンス問題を優先順位付けして指摘し、具体的な改善提案を行います。

1 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results