add-x-tweet

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Add X Tweet Testimonial

添加X推文推荐语

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

用户提供一个或多个
```
https://x.com/.../status/...
```
格式的URL
用户要求替换、优先排序或重新排列推荐语
用户提及“添加推文”“新推荐语”或类似需求

Workflow

操作流程

1. Fetch tweet metadata

1. 获取推文元数据

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

bash

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:

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:

bash

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.

从仓库根目录运行获取脚本（需要网络连接）：

bash

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

若有多个URL，可逐个传入或多次运行脚本。

脚本会输出JSON格式数据：

json

{
  "id": "123...",
  "url": "https://x.com/user/status/123...",
  "author": { "name": "...", "handle": "@user", "avatar": "https://pbs.twimg.com/...", "verified": true },
  "content": "去除@uixmat前缀后的推文文本"
}

备用方案： 若脚本运行失败，使用Twitter oEmbed：

bash

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

解析

author_name

字段和HTML中的

<p>

标签获取文本内容。头像仍需通过fxtwitter或手动获取个人资料图片URL。

2. Edit

apps/web/lib/testimonials.ts

2. 编辑

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()
```
(upgrades
```
_200x200
```
→
```
_400x400
```
)
Strip leading
```
@uixmat
```
from content; trim whitespace
Shorten very long tweets if they include trailing promo links (keep the praise, drop link-only tails)

使用状态ID作为
```
id
```
（从URL中提取的数字字符串）
将
```
url
```
设置为标准推文URL（不带查询参数）
将头像URL传入
```
twitterAvatarUrl()
```
函数（将
```
_200x200
```
升级为
```
_400x400
```
）
移除内容开头的
```
@uixmat
```
并修剪空白字符
若推文过长且包含末尾推广链接，可缩短内容（保留好评部分，移除仅含链接的尾部）

3. Ordering rules

3. 排序规则

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)

瀑布流布局使用CSS列（每列从上到下排列）。在

lg

屏幕尺寸下，索引0–2对应第1列的前3个位置，3–5对应第2列的前3个位置，6–8对应第3列的前3个位置。

若用户要求优先排序：将新条目放在索引0–8的下一个空位，且不重复ID
若用户要求替换：先移除旧条目（通过用户名或旧ID匹配），再添加新条目
根据脚本输出设置
```
author.verified
```
字段（通过FxTwitter获取
```
author.verification.verified
```
值）

4. Collapsed grid

4. 折叠网格

The homepage shows

testimonialCollapsedCount

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

主页在显示

testimonialCollapsedCount

（默认6个）卡片后会显示“查看更多”按钮。添加推文时无需修改此设置，除非用户要求更改可见行数。

5. Verify

5. 验证

bash

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

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

bash

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

打开主页确认：网格为3列布局，底部渐变效果 + “查看更多”按钮可展开最大高度。

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.

主要数据源：FxTwitter API

https://api.fxtwitter.com/{user}/status/{id}

— 返回作者姓名、用户名、头像URL和文本内容。

请勿提交API密钥；脚本仅在添加推文时使用公开端点。

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

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

add-x-tweet

Original

Translation

Add X Tweet Testimonial

添加X推文推荐语

When to use

使用场景

Workflow

操作流程

1. Fetch tweet metadata

1. 获取推文元数据

2. Edit
`apps/web/lib/testimonials.ts`

2. 编辑
`apps/web/lib/testimonials.ts`
文件

3. Ordering rules

3. 排序规则

4. Collapsed grid

4. 折叠网格

5. Verify

5. 验证

Data source

数据源

Example entry

示例条目