mcpField
A
add-expert

add-expert

github.com/remotion-devマーケティング・グロース68.6k2.4k 回インストール今日更新
リポジトリ

add-expert について

プロジェクトのドキュメントとプロモーションページに専門家プロフィールを追加するスキルです。画像、データ登録、カードの生成を扱います。

主な機能

  1. 01同じ顔写真を2つのパスに配置
  2. 02experts 配列の末尾に項目を追加
  3. 03専門家カードの生成と確認

活用シーン

  1. 01新しい専門家プロフィールの公開
  2. 02プロモーションページ用カードの生成

インストール

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

$npx skills add https://github.com/remotion-dev/remotion --skill add-expert

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

詳細

手順

  1. 専門家の写真を追加します。追加先は次の両方です。

    • packages/docs/static/img/freelancers/<firstname>.png
    • packages/promo-pages/public/img/freelancers/<firstname>.png

    画像は正方形の顔写真（PNG 形式）にしてください。両方のパスに同じファイルを置く必要があります。

  2. packages/promo-pages/src/components/experts/experts-data.tsx の experts 配列にエントリーを追加します。

    {
    slug: 'firstname-lastname',
    name: 'First Last',
    image: '/img/freelancers/<firstname>.png',
    website: 'https://example.com' | null,
    x: 'twitter_handle' | null,
    github: 'github_username' | null,
    linkedin: 'in/linkedin-slug/' | null,
    email: '[email protected]' | null,
    videocall: 'https://cal.com/...' | null,
    since: new Date('YYYY-MM-DD').getTime(),
    description: (
        <div>
            A short description of the expert's work and specialties.
            Links to projects can be included with <a> tags.
        </div>
    ),
},
    • since には今日の日付を設定します
    • slug は名前を小文字にし、ハイフンでつないだものにします
    • 使用しないソーシャルフィールドには null を設定します
    • エントリーは experts 配列の末尾（閉じる ] の前）に追加します

  3. packages/docs で次のコマンドを実行して、専門家カードをレンダリングします。

    bun render-cards

    これにより packages/docs/static/generated/experts-<slug>.png が生成されます。「Rendered experts-<slug>」と表示されていることを確認してください（「Existed」ではありません）。

コメント

Markdown 対応