mcpField
A
add-x-tweet

add-x-tweet

github.com/bklitMarketing & growth1.8k644 installsUpdated today
Repository

About add-x-tweet

add-x-tweet is a repository skill for adding, replacing, or reordering tweet testimonials in a homepage grid. It fetches tweet metadata, updates the testimonial data, and checks the TypeScript project.

Key features

  1. 01Fetch tweet metadata from a URL
  2. 02Add or replace testimonial entries
  3. 03Apply ordering and priority rules
  4. 04Normalize avatar URLs
  5. 05Run a TypeScript check

Use cases

  1. 01Add a tweet shared as social proof
  2. 02Replace an existing homepage testimonial
  3. 03Prioritize testimonials in the grid

Install

Copy the command and run it in a terminal.

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

After installing, type/add-x-tweetin Claude Code to confirm it loaded.

Bundled filesscripts/fetch-tweet.mjs

Details

From the project README

Add X Tweet Testimonial

Add social proof tweets to the homepage testimonial grid.

When to use

  • User provides one or more https://x.com/.../status/... URLs
  • User asks to replace, prioritize, or reorder testimonials
  • User says "add tweet", "new testimonial", or similar

Workflow

1. Fetch tweet metadata

Run the fetch script from the repo root (requires network):

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

For multiple URLs, pass each URL or run once per URL.

The script prints 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"
}

Fallback: If the script fails, use Twitter oEmbed:

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

Parse author_name and HTML <p> for text. Avatar still needs fxtwitter or manual profile image URL.

2. Edit apps/web/lib/testimonials.ts
  • Use status id as id (numeric string from URL)
  • Set url to the canonical tweet URL (no query params)
  • Run avatar through twitterAvatarUrl() (normalises any size suffix to _bigger, 73×73: avatars render at 40px)
  • Strip leading @uixmat from content; trim whitespace
  • Shorten very long tweets if they include trailing promo links (keep the praise, drop link-only tails)
3. Ordering rules

Masonry uses CSS columns (top-to-bottom per column). On lg, indices 0–2 = column 1 top 3, 3–5 = column 2 top 3, 6–8 = column 3 top 3.

  • Prioritize when asked: place in the next open slot among indices 0–8 without duplicating ids
  • Replace when asked: remove the old entry (match by handle or old id) before adding the new one
  • Set author.verified from script output (author.verification.verified via FxTwitter)
4. Collapsed grid

The homepage shows testimonialCollapsedCount (6) cards before See more. No change needed when adding tweets unless the user asks to change visible rows.

5. Verify
cd apps/web && npx tsc --noEmit -p tsconfig.json

Open homepage — grid is 3 columns, bottom fade + See more expands max-height.

Data source

Primary: FxTwitter API https://api.fxtwitter.com/{user}/status/{id} — returns author name, screen_name, avatar_url, and text.

Do not commit API keys; the public endpoint is used by the script only at add-tweet time.

Example entry

{
  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",
},

Comments

Markdown supported