mcpField
M
marketing-site-skill

marketing-site-skill

github.com/sergekostenchukデザイン・UI3253 回インストール18 週間前に更新
リポジトリ

marketing-site-skill について

公開向けマーケティングページの作成、監査、検証を行う専門スキルです。ファーストビューやコンバージョンの指針に加え、メタデータとレスポンシブ表示を確認し、実行・省略・予定・手動確認を区別します。

主な機能

  1. 01マーケティングページの作成・改修
  2. 02導線と視覚的な明瞭さの監査
  3. 03ページメタデータの確認
  4. 04メタデータとレスポンシブ表示の検査
  5. 05実行結果と手動確認事項の区別

活用シーン

  1. 01公開用の商品ランディングページ作成
  2. 02CTAとページレイアウトの確認
  3. 03HTMLメタデータとソーシャルプレビューの点検
  4. 04ページのレスポンシブ表示テスト

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill marketing-site-skill

インストール後、Claude Code で/marketing-site-skillを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
assets/
animation-presets.md
landing-brief.template.md
metadata.template.json
evals/
evals.json
references/
conversion-framework.md
hero-first-viewport.md
metadata-checklist.md
performance-budget.md
responsive-storytelling.md
scripts/
lint_metadata.py
responsive_smoke_test.mjs

詳細

マーケティングサイトスキル

最初のビューポート、製品・場所・人物の訴求、コンバージョンへの導線、メディアの品質、メタデータ、レスポンシブ動作が重要となる、一般公開向けページを担当する専門家です。

運用モード

  • build：マーケティングページまたは一般公開向けページを作成、またはリファクタリングします。
  • audit：コンバージョン、メタデータ、レスポンシブ動作、視覚的なわかりやすさの観点からページをレビューします。
  • metadata：タイトル、説明、canonical、Open Graph、Twitter、見出し、ソーシャルプレビューの基本項目を確認します。
  • verify：ローカルチェックを実行し、確認できた内容と手動レビューが必要な内容を区別します。

必須ワークフロー

  1. ページ上部をデザインする前に、references/hero-first-viewport.md を読みます。
  2. CTA と信頼性の根拠を検討するため、references/conversion-framework.md を読みます。
  3. ソースファイルまたは HTML が利用できる場合は、references/metadata-checklist.md を読みます。
  4. 再利用可能なページ概要やメタデータ仕様を作成する場合は、assets/landing-brief.template.md と assets/metadata.template.json を使用します。
  5. 外部画像、AI ページビルダー、またはクラウドツールを使用する前に、../../shared/privacy-policy.md を適用します。
  6. ソースファイルが利用できる場合は、scripts/lint_metadata.py を実行するか、実行しなかった理由を報告します。
  7. URL が利用できる場合は、scripts/responsive_smoke_test.mjs を実行するか、実行しなかった理由を報告します。
  8. Ran、Skipped、Planned、Manual の各セクションを返します。

デザイン指針

  • 最初のビューポートに、製品、場所、オファー、ブランド、物、または人物を明確に表示します。
  • 本来の主題を装飾的なカードやありふれたグラデーションの中に隠さないでください。
  • 視覚的な訴求が必要な場合は、実写または生成したビットマップ画像を使用します。
  • CTA の優先順位を明確にし、見た目が同等の主要アクションを増やしすぎないでください。
  • モバイルでテキストを読みやすくし、重なり、横方向のはみ出し、ビューポートに合わせてフォントサイズを調整する手法を避けます。

ツールの仕様

  • メタデータのリンター：python3 scripts/lint_metadata.py --root "$PROJECT_ROOT" --out reports/metadata.json。
  • レスポンシブのスモークテスト：node scripts/responsive_smoke_test.mjs --url "$URL" --out reports/visual-smoke。
  • 任意のクラウドツールには明示的な承認が必要です。また、それだけでは検証の証拠として認められません。

検証

python3 $CODEX_SKILLS_DIR/.system/skill-creator/scripts/quick_validate.py $CODEX_SKILLS_DIR/marketing-site-skill
python3 $CODEX_SKILLS_DIR/senior-skill-architect/scripts/lint_production_skill.py $CODEX_SKILLS_DIR/marketing-site-skill

出力形式

Page type:
Primary offer or object:
First viewport:
CTA path:
Metadata:
Ran:
Skipped:
Manual findings:
Risks:

コメント

Markdown 対応