Skip to content
cccskills
FreePublished on GitHub

ui-review

5つの専門エージェント(UXデザイナー・ビジュアルデザイナー・アクセシビリティ専門家・ モバイルUI専門家・コピーデザイナー)がチームでUIを添削・改善するスキル。Pencil(.pen)で画面デザインを作成・修正しながら、リアルタイムで議論する。新規画面デザインの作成と既存UIのレビュー・改善の両方に対応。

iOS / Web / 汎用プラットフォームに対応。Use when: UIを添削したい、画面デザインをレビューしたい、UIを改善したい、 デザインの品質を上げたい、UIのフィードバックがほしい、画面を作りたい。

Triggers: "UIレビュー", "UI添削", "デザインレビュー", "画面レビュー", "UIを見て", "デザインチェック", "UI改善", "画面デザイン", "ui review", "design review", "UI作成", "画面作成", "UIフィードバック"

The English summary is being prepared. Showing the original description.

See how to install

Files included (3)

  • SKILL.md6.5 KB
  • references/report-template.md1.4 KB
  • references/review-criteria.md3.1 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

UI Review Skill

5つの専門エージェントが Pencil でデザインを見ながら議論し、UIを添削・改善する。

ワークフロー

  1. ユーザーからデザイン情報をヒアリング
  2. Pencil で対象デザインを準備(新規作成 or 既存を開く)
  3. Agent Team を作成し、5エージェントを並列起動
  4. スクリーンショットとノード構造をエージェントに共有
  5. 2〜3ラウンドの議論・フィードバック
  6. フィードバックに基づき Pencil でデザイン修正
  7. 最終レポートを MD で出力

Step 1: ヒアリング

以下を確認する(不明ならユーザーに質問):

  • デザインタスク: 新規画面作成 or 既存UIレビュー
  • 対象画面: どの画面か(ログイン、ホーム、設定 等)
  • プラットフォーム: iOS / Web / 両方
  • ターゲットユーザー: 年齢層、技術レベル
  • 既存 .pen ファイル: あれば開く、なければ新規作成
  • 重点的に見てほしい観点: ある場合のみ(UX、配色、アクセシビリティ等)

Step 2: Pencil でデザイン準備

既存デザインのレビューの場合

  1. get_editor_state で現在の .pen ファイルを確認
  2. 対象画面のスクリーンショットを get_screenshot で取得
  3. batch_get でノード構造を取得

新規画面作成の場合

  1. get_guidelines で適切なガイドライン取得(iOS なら ios-design スキルも活用)
  2. get_style_guide_tags → get_style_guide でスタイルガイド取得
  3. 初期デザインを batch_design で作成
  4. スクリーンショットを取得

Step 3: チーム作成とエージェント起動

TeamCreate で ui-review チームを作成。以下5エージェントを 1つのメッセージで並列に Task ツールで起動する。

name役割主な評価観点
ux-designerユーザビリティ・情報設計フロー、操作性、ヒューリスティック
visual-designer配色・タイポグラフィ・レイアウト色、余白、階層、シンプルさ
accessibility-expertアクセシビリティコントラスト、タッチ、WCAG
mobile-specialistプラットフォーム準拠iOS HIG、Material、レスポンシブ
copy-designerマイクロコピー・テキストラベル、エラー文、CTA、トーン

タスク作成

TaskCreate で7つのタスクを作成:

  1. ux-designer: UX/ユーザビリティレビュー
  2. visual-designer: ビジュアルデザインレビュー
  3. accessibility-expert: アクセシビリティレビュー
  4. mobile-specialist: プラットフォーム準拠レビュー
  5. copy-designer: コピー/マイクロコピーレビュー
  6. デザイン修正: タスク1〜5完了後(addBlockedBy: ["1","2","3","4","5"])
  7. 統合レポート: タスク6完了後(addBlockedBy: ["6"])

起動設定

各エージェントのプロンプトにデザイン情報を埋め込んで起動する:

subagent_type: "ux-designer"  # agents/ で定義済みのサブエージェント名
team_name: "ui-review"
model: "opus"
mode: "bypassPermissions"
run_in_background: true

プロンプトに含める情報:

  • 画面の概要と目的
  • プラットフォーム(iOS/Web/両方)
  • ターゲットユーザー
  • デザインのノード構造(batch_get の結果を要約)
  • スクリーンショットの説明(色、レイアウト、要素の配置を言語化)
  • 重点的に見てほしい観点(あれば)

Step 4: 議論の進行

エージェントは自律的に議論する:

Round 1: 各エージェントが独立にレビュー → 互いにフィードバック共有
Round 2: 他の観点を考慮して改善案を修正 → 矛盾する提案は議論で解決
Round 3: 最終改善案をスコアリング → チームリーダーに報告

リーダー(自分)の役割

  • 基本見守り。エージェントが詰まった場合のみ介入
  • ユーザーが途中で方向性を変えたい場合、全エージェントに共有
  • ユーザーからの質問や意見をエージェントに中継
  • Pencil の操作はリーダーが担当(エージェントの提案に基づき修正)

ユーザー参加

ユーザーがリアルタイムで議論に参加したい場合:

  • ユーザーの意見を該当エージェントに SendMessage で中継
  • エージェントの議論状況をユーザーに要約して報告
  • ユーザーが「この方向で」と指示したら、全エージェントにブロードキャスト

Step 5: デザイン修正

エージェントの提案に基づき、リーダーが Pencil で修正を実施:

  1. Critical Issues から優先的に修正
  2. batch_design で修正を適用
  3. get_screenshot で修正結果を確認
  4. 必要に応じてエージェントに修正結果を共有して再レビュー

Step 6: 最終レポート出力

全報告が揃ったら統合レポートを MD で出力する。テンプレートは references/report-template.md を参照。

詳細な評価基準は references/review-criteria.md を参照。

出力先: プロジェクトルートに UI_REVIEW_REPORT.md

Step 7: クリーンアップ

  1. 全エージェントに shutdown_request を送信
  2. 全員シャットダウン後に TeamDelete でチーム削除

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

This skill should be used when the user asks to "create a team", "spawn agents", "parallel execution", "delegate tasks to agents", "use a swarm", "team workflow", "split work across agents", "run tasks in parallel", or mentions wanting multiple agents to collaborate on a complex task.

The English summary is being prepared. Showing the original description.

sean-sunagaku/claude-code-plugin38Updated Jul 30, 2026

Agent Teams スキルを設計・構築するためのベストプラクティスガイド。 サブエージェント定義、SendMessage 通信プロトコル、タスク依存管理、 PostToolUse Hook によるログ、MCP ツール統合、コンテキストファイル設計を網羅。 7つの実績あるチームスキル(app-naming, ui-review, logo-design, persona-creation, skill-creator-team, ui-variations, aso-optimize)から抽出したパターン集。 Use when: Agent Teams を使ったスキルを新規作成したい、 既存のチームスキルの品質を改善したい、エージェント間通信のデバッグ、 チームスキルの設計パターンを知りたい。 Triggers: "agent team", "チームスキル", "エージェントチーム", "サブエージェント定義", "SendMessage パターン", "チーム設計", "エージェント間通信", "team skill", "swarm pattern"

The English summary is being prepared. Showing the original description.

sean-sunagaku/claude-code-plugin38Updated Jul 30, 2026

アプリ名・サービス名の命名を、5つの専門エージェントチームで多角的に評価・決定するスキル。 ブランディング、商標/法的リスク、デジタルプレゼンス(SEO/ASO/SNS)、国際展開(多言語/発音)の 4観点から候補を提案・調査・議論し、コンテキストファイルと議事録で次回セッションへ引き継ぐ。 Use when: アプリ名を決めたい、サービス名を変更したい、プロダクト名を検討したい、 ネーミングブレスト、名前の商標チェック、アプリ名のリネーム。 Triggers: "アプリ名", "サービス名", "プロダクト名", "ネーミング", "名前を決め", "リネーム", "rename", "app name", "naming", "ブランド名", "商標チェック"

The English summary is being prepared. Showing the original description.

sean-sunagaku/claude-code-plugin38Updated Jul 30, 2026

App Store プレビュー動画を Remotion (React) で生成する Agent Team スキル。 video-director が構成を設計し、script-writer がナレーション台本を作成し、 motion-designer が Remotion コードを実装し、preview-reviewer がコードレビューし、 frame-inspector がレンダリング結果を目視検証する。 Use when: App Store プレビュー動画を作りたい、アプリのプロモーション動画を作りたい、 Remotion で動画を生成したい。 Triggers: "プレビュー動画", "App Store 動画", "アプリ動画", "preview movie", "Remotion", "動画作成", "app preview"

The English summary is being prepared. Showing the original description.

sean-sunagaku/claude-code-plugin38Updated Jul 30, 2026

アプリのトーン&マナー(トンマナ)を8名のエージェントチームで設計するスキル。 ブランドアーキタイプ・パーソナリティ定義から、カラー・タイポグラフィ・ビジュアルスタイル・ トーン・オブ・ボイスまでを一貫設計し、Pencil (.pen) + Markdown で成果物を出力する。 「デザインテンション」(矛盾ペア)を核に、AIっぽくない独自のブランドアイデンティティを生成する。

The English summary is being prepared. Showing the original description.

sean-sunagaku/claude-code-plugin38Updated Jul 30, 2026

仕様書・要件定義からソフトウェアアーキテクチャを設計するスキル。 5人の専門エージェント(Architecture Lead・Module Designer・Dependency Analyst・ Platform Expert・Devil's Advocate)が協議しながら、 モジュール分割・依存関係・データフロー・インターフェース設計を行う。 成果物は構造化されたアーキテクチャ設計書(Markdown)。 Use when: 仕様書からどう設計するか迷っている時、モジュール分割の方針を決めたい時、 技術スタックに合ったアーキテクチャパターンを選びたい時、 設計書を作成したい時。 Triggers: "アーキテクチャ設計", "arch design", "仕様書から設計", "モジュール分割", "設計書を作りたい", "アーキテクチャを考えて", "コンポーネント設計", "依存関係を設計", "どう設計する", "design the architecture", "design from spec"

The English summary is being prepared. Showing the original description.

sean-sunagaku/claude-code-plugin38Updated Jul 30, 2026

See all skills by sean-sunagaku

Report a problem with this skill