name: competitor-ui-register description: "Competitor UI Viewerに競合アプリのUI情報とスクリーンショットを登録。"

競合UI登録スキル — Competitor UI Viewer へのアプリ登録

概要

Competitor UI Viewer（competitor-ui-viewer.craftgarden.studio）に競合アプリのUI情報とスクリーンショットを登録する。

トリガー

「競合UI登録」「UIリサーチ登録」「Competitor UI追加」
「スクリーンショット撮影」（competitor-ui-viewer向け）

リポジトリ情報

ローカルパス: /Users/satokeita/Dev/competitor-ui-viewer
本番URL: https://competitor-ui-viewer.craftgarden.studio
データファイル: public/data/industries.json
スクリーンショット: public/data/apps/{app-id}/

カテゴリ別・必須スクリーンショット定義

詳細は references/screenshot-definitions.md を参照。

対応カテゴリ: テックメディア（tech-media）、金融（finance）、EC・ショッピング（ecommerce）、フード・デリバリー（food）、ヘルスケア（healthcare）

登録手順

Step 1: 対象アプリの調査

公式サイトをブラウザで開く
カテゴリ定義に沿った画面を特定
各画面のURLをメモ

Step 2: スクリーンショット撮影

# ブラウザで対象ページを開く
agent-browser open "{url}"

# スクリーンショット撮影
agent-browser screenshot "/Users/satokeita/Dev/competitor-ui-viewer/public/data/apps/{app-id}/{screen-type}.png" --full

# 保存先
/Users/satokeita/Dev/competitor-ui-viewer/public/data/apps/{app-id}/{screen-type}.png

命名規則:

landing.png — ランディングページ
article-list.png — 記事一覧
article-detail.png — 記事詳細
subscribe.png — 購読フォーム
navigation.png — ナビゲーション展開時

Step 3: industries.json 更新

エントリのJSON構造は references/example-app-entry.json を参照。

Step 4: ビルド＆デプロイ

cd /Users/satokeita/Dev/competitor-ui-viewer
pnpm build
git add -A
git commit -m "add: {app-name} screenshots and data"
git push origin master

Step 5: 本番確認

# デプロイ状況確認
vercel ls | head -5

# 画像存在確認
curl -s -I "https://competitor-ui-viewer.craftgarden.studio/data/apps/{app-id}/landing.png" | head -3

品質基準

スクリーンショット

ファーストビューが完全に収まっている
ダークモード/ライトモードは統一（基本ライト）
ログインが必要な画面は適切にマスク
解像度: デスクトップ 1280x800 以上

データ

description は100文字以上
features は3つ以上
strengths は3つ以上（差別化ポイント）
appUrl は有効なURL

更新履歴

2026-02-25: 初版作成、カテゴリ別スクリーンショット定義追加

⚠️ よくある落とし穴

スクリーンショットの命名規則を守らない: landing.png, article-list.png 等のカテゴリ定義に沿った名前を使うこと。自由な命名にすると industries.json との対応が取れなくなる
description や features が不十分なまま登録する: description は 100 文字以上、features と strengths はそれぞれ 3 つ以上が品質基準。不足していると Viewer 上で情報が貧弱になる
ログインが必要な画面のスクリーンショットにアカウント情報が映る: ログイン必須画面は適切にマスクすること
ビルド確認せずに push する: pnpm build でビルドが通ることを確認してからコミット・プッシュすること。industries.json の JSON 構文エラーでビルドが失敗しやすい