mcpField
A
add-x-tweet

add-x-tweet

github.com/bklitマーケティング・グロース1.8k644 回インストール今日更新
リポジトリ

add-x-tweet について

add-x-tweet は、ホームページのグリッドにツイートの推薦文を追加、置換、並べ替えするためのリポジトリ用スキルです。ツイートのメタデータを取得し、推薦文データを更新して、TypeScript のチェックを行います。

主な機能

  1. 01URL からツイートのメタデータを取得
  2. 02推薦文エントリーを追加または置換
  3. 03ルールに沿って順序や優先度を設定
  4. 04アバター URL を正規化
  5. 05TypeScript のチェックを実行

活用シーン

  1. 01ソーシャルプルーフとしてツイートを追加
  2. 02ホームページの既存推薦文を置換
  3. 03グリッド内の推薦文の優先順位を変更

インストール

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

$npx skills add https://github.com/bklit/bklit-ui --skill add-x-tweet

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

同梱ファイルscripts/fetch-tweet.mjs

詳細

X のツイートの推薦コメントを追加する

ホームページの推薦コメントグリッドに、ソーシャルプルーフとなるツイートを追加します。

使用するタイミング

  • ユーザーが https://x.com/.../status/... の URL を1つ以上提示した場合
  • ユーザーが推薦コメントの置き換え、優先表示、並べ替えを依頼した場合
  • ユーザーが「ツイートを追加」「新しい推薦コメント」などの依頼をした場合

ワークフロー

1. ツイートのメタデータを取得する

リポジトリのルートから取得スクリプトを実行します（ネットワーク接続が必要です）。

node .agents/skills/add-x-tweet/scripts/fetch-tweet.mjs "https://x.com/user/status/123..."

複数の URL がある場合は、それぞれの URL を渡すか、URL ごとにスクリプトを実行します。

スクリプトは JSON を出力します。

{
  "id": "123...",
  "url": "https://x.com/user/status/123...",
  "author": { "name": "...", "handle": "@user", "avatar": "https://pbs.twimg.com/...", "verified": true },
  "content": "tweet text without @uixmat prefix"
}

フォールバック： スクリプトが失敗した場合は、Twitter oEmbed を使用します。

curl -sL "https://publish.twitter.com/oembed?url=TWEET_URL&omit_script=1"

author_name と HTML の <p> からテキストを解析します。アバターは fxtwitter またはプロフィール画像 URL を手動で指定する必要があります。

2. apps/web/lib/testimonials.ts を編集する
  • id には status id（URL に含まれる数値文字列）を使用します
  • url にはクエリパラメーターを含まない正規のツイート URL を設定します
  • アバターには twitterAvatarUrl() を適用します（サイズのサフィックスを _bigger に正規化します。73×73 のアバターは40pxで表示されます）
  • コンテンツの先頭にある @uixmat を削除し、空白をトリミングします
  • 末尾に宣伝リンクが含まれる非常に長いツイートは短くします（称賛の言葉を残し、リンクだけの末尾は削除します）
3. 並び順のルール

Masonry は CSS のカラムを使用します（各カラム内は上から下の順）。lg では、インデックス 0～2 が1列目の上から3件、3～5 が2列目の上から3件、6～8 が3列目の上から3件です。

  • 優先表示を依頼された場合：id が重複しないようにしながら、インデックス 0～8 の次に空いている位置に配置します
  • 置き換えを依頼された場合：新しい項目を追加する前に、古い項目（ハンドル名または古い id で一致）を削除します
  • author.verified はスクリプトの出力（FxTwitter の author.verification.verified）に基づいて設定します
4. 折りたたまれたグリッド

ホームページでは See more の前に testimonialCollapsedCount（6）件のカードが表示されます。表示する行数の変更をユーザーが依頼しない限り、ツイートの追加時に変更する必要はありません。

5. 確認する
cd apps/web && npx tsc --noEmit -p tsconfig.json

ホームページを開きます。グリッドが3列で表示され、下部のフェードと See more によって最大高さが拡張されることを確認します。

データソース

主なデータソースは FxTwitter API の https://api.fxtwitter.com/{user}/status/{id} です。投稿者名、screen_name、avatar_url、テキストが返されます。

API キーをコミットしないでください。公開エンドポイントは、ツイートの追加時にのみスクリプトで使用されます。

エントリーの例

{
  id: "2056717453816729751",
  url: "https://x.com/jordienr/status/2056717453816729751",
  author: {
    name: "jordi",
    handle: "@jordienr",
    avatar: twitterAvatarUrl(
      "https://pbs.twimg.com/profile_images/2053541405121769475/TUDez6zL_200x200.jpg"
    ),
    verified: true,
  },
  content: "bklit saved my marriage",
},

コメント

Markdown 対応