fe-weekly-creator

name	fe-weekly-creator
description	"创建前端周刊（fe-weekly）的完整工作流。当用户提到"写周刊"、"创建周刊"、"生成周刊"、"本周周刊"、"fe-weekly"、"前端周刊"、"weekly"时使用此 skill。也适用于用户说"帮我整理本周前端资讯"、"汇总本周技术新闻"、"抓取最新周刊内容"等场景。"

前端周刊创建器 (fe-weekly-creator)

帮助用户从多个技术周刊源自动抓取、筛选、生成中文前端周刊。

工作流程概览

整个流程分为 4 个阶段：抓取 → 合并 → 筛选 → 生成。

---

阶段一：抓取素材

从以下 6 个周刊源抓取最新一期内容（使用 read_web_page/web_fetch 工具）：

核心源（前端，每期必查）

1. JavaScript Weekly — https://javascriptweekly.com/issues/latest
2. Frontend Focus — https://frontendfoc.us/issues/latest
3. Node Weekly — https://nodeweekly.com/issues/latest
4. React Status — https://react.statuscode.com/latest

AI 源（补充）

5. TLDR AI — https://tldr.tech/ai
6. The Batch — https://www.deeplearning.ai/the-batch/

扩展搜索（可选）

除以上固定源外，还可以通过 web_search 主动搜索以下渠道获取补充素材：

• Hacker News：搜索本周热门前端相关帖子
• Reddit（r/javascript, r/reactjs 等）：本周热门讨论
• GitHub Trending：本周趋势项目

对每个源，提取以下信息：

• 文章标题 + 原文链接
• 简短描述（如果源提供了的话）
• 分类标签（技术文章 / 工具 / 版本发布 / 简讯）

抓取时用 forceRefetch: true 确保获取最新内容。

并行抓取所有源以提高效率。

---

阶段二：合并用户链接

检查用户是否提供了额外的链接。如果有：

• 使用 read_web_page/web_fetch 读取每个链接的内容
• 将其纳入素材池，标记为"用户提供"

---

阶段三：筛选展示

从所有抓取的素材中，根据「内容筛选偏好」预筛选出约 15 条最有价值的内容，去掉低质量和重复条目。每个分类不超过 15 条，总量控制在 15 条左右，减轻用户审核负担。

按以下分类展示给用户：

## 📋 本期素材清单（已预筛选，共约 15 条）

### 技术文章（N 篇）
1. [文章标题](链接) — 一句话描述 [来源: JS Weekly]
2. ...

### 工具推荐（N 个）
1. [工具名](链接) — 一句话描述 [来源: Frontend Focus]
2. ...

### 版本发布（N 个）
1. [项目 vX.Y](链接) — 一句话描述 [来源: Node Weekly]
2. ...

### 本周快讯候选（N 条）
1. [关键词](链接) 一句话描述
2. ...

然后询问用户：

• 哪些需要保留、哪些删除
• 是否需要调整分类
• 是否需要补充遗漏的内容

---

阶段四：生成周刊

4.1 确定期号和日期

1. 读取项目目录 src/content/blog/，找到最大的 weekly-N.md 中的 N
2. 新期号 = N + 1
3. pubDate = 当周周一的日期（格式 YYYY-MM-DD）
   • 如果今天是周一，用今天
   • 否则用下一个周一

4.2 生成内容

对用户确认的每条素材，用 read_web_page/web_fetch 读取原文，生成中文摘要点评。

链接规范：写入文档的所有资源链接必须是重定向后的最终 URL。在生成前对每条素材的链接发起请求，跟随重定向（301/302 等）获取最终目标地址，再将最终地址写入周刊 Markdown；不要使用短链、追踪链接或中间跳转地址。确保读者点击后直达原文。

严格遵循以下格式规范（来自项目 AGENTS.md）：

Frontmatter

---
title: "前端周刊 #N：关键词1，关键词2"
description: "关键词1，关键词2"
pubDate: YYYY-MM-DD
---

title 和 description 中的关键词从本期最亮眼的 2-3 个话题中提取。

板块顺序

1. 本周快讯（可选，## 本周快讯）— 独立的一周要闻，非下文的总结
2. 技术文章（## 技术文章）
3. 工具推荐（## 工具推荐）
4. 版本发布（## 版本发布）

本周快讯格式

• 关键词使用中文：[关键词](链接) 中的「关键词」用中文书写，便于读者扫读。
• 该板块为独立的一周要闻列表，与下方技术文章/工具/版本发布无总结关系。

## 本周快讯

- [关键词](链接) 一句话描述。
- [关键词](链接) 一句话描述。

卡片式格式（技术文章 / 工具推荐 / 版本发布通用）

• 标题必须使用中文：卡片标题 ### [标题](链接) 中的「标题」一律用中文呈现。若原文为英文标题，需翻译或提炼为简洁的中文标题再写入，不要直接保留英文。
• 正文用 2-3 个短段落：站点 CSS 将 h3 后连续 1-3 个 <p> 合并为一张内容卡片（见 src/styles/global.css 与 design-system/MASTER.md）。段落之间用空行分隔，代码块放在所有段落之后。

段落分工：

段落	内容	字数上限
第一段	来源 + 主题（这是什么）	≤ 80 字
第二段	核心亮点、关键数字或技术细节	≤ 100 字
第三段（可选）	对读者的实际价值或适用场景	≤ 60 字

### [标题](链接)

第一段：来源与主题，1-2 句。

第二段：核心亮点、关键数字或技术细节，1-2 句。

第三段（可选）：对读者的实际价值或适用场景，1 句。

（可选）代码块放在所有段落之后

标准示例 — 技术文章（ChatGPT 架构）：

### [逆向工程 ChatGPT Web：十亿用户规模的 React 架构揭秘](https://performance.dev/chatgpt)

Dennis Brotzky 花数天逆向 chatgpt.com 的 HTML、Bundle 与网络请求，还原服务约 10 亿用户的前端架构。

当前栈为 React 19 + React Router 7 + TanStack Query + Tailwind + Radix + ProseMirror，从 Next.js 12 经 Remix 实验迁移到 RR v7。首屏策略「Can you type yet?」——非关键脚本 defer，SSE 流式首 token、Statsig Feature Flag、零 WebFont，保证打开即可输入。

对做全球化 AI 产品的团队，这是「成熟库 + 极致首屏」的可复制样本。

标准示例 — 工程实践（Medal 瘦身）：

### [Medal 将 Electron 渲染包从 40MB 砍到 2.7MB 的完整路线图](https://medal.tv/blog/posts/w-key-in-frontend-synergizing-technology-and-product)

Rick Zhang 复盘 Medal 2024 年以来的「W-Key」瘦身战役：从 monorepo + pnpm 起步，本地 Vite HMR 让 Electron 开发不再 stop-start。

关键数字：删除 barrel 文件 -2.6MB、外置 .wav -3.4MB、ESM tree-shake -4MB、i18n 动态 import -13MB、按路由 code split -5.4MB，最终 renderer 包 2.7MB。

对 Electron 或超大 SPA 团队，这是可复制的 bundle 治理 playbook。

标准示例 — 版本发布（TypeScript 7.0，含代码块）：

### [TypeScript 7.0 正式发布：Go 原生编译器 GA，构建约 10 倍提速](https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/)

7 月 8 日 TypeScript 7.0 登陆 npm `latest`，Go 重写的 `tsc` 带来 8×–12× 全量构建加速。

7.0 尚无稳定 programmatic API，Vue/Svelte/Astro 模板类型检查器需等 7.1。纯 `tsc` 构建的 React/Node 项目可立即升级。

```bash
npm install -D typescript
npx tsc --version  # 7.x

### 4.3 摘要点评写作要求

- 使用中文撰写
- 每张卡片 **2-3 个短段落**，总信息量相当于原来的 4-5 句话，但**禁止挤进单个段落**
- 突出「这是什么」、「为什么重要」和「对你有什么影响」，分别落在不同段落
- 如果是工具/库，说明解决什么问题、核心特性
- 如果是版本发布，说明主要变更和影响
- 适当附上关键代码片段帮助理解（不是每条都需要），代码块独立成 `pre` 块，放在段落后
- 避免空洞的赞美，提供具体的技术信息
- AI 相关内容要关联到前端开发者的实际使用场景

**可读性硬性规则（必须遵守）：**

- 单段不超过 **150 字**；每段最多 **2 句话**，用句号断句
- 禁止用分号串联 3 个以上独立信息点
- 技术栈枚举、关键数字清单、因果链条 **拆到不同段落**
- `**加粗**` 每段最多 2 处，只标注真正关键的词
- 禁止在一段内同时写完整技术栈 + 迁移历史 + 结论

**反模式示例（不要这样写）：**

```markdown
### [标题](链接)

作者写了很长一段话，把 React 19 + RR7 + TanStack Query 技术栈、从 Next.js 迁移的历史、首屏优化策略、Evan You 点评、以及对读者的建议全部用分号串在一个段落里，形成难以扫读的文字墙。（❌ 单段 300+ 字）

4.4 内容排序

每个板块内的条目按以下优先级从高到低排序：

1. 影响面广：涉及主流框架/工具、影响大量开发者的内容排最前
2. 技术深度高：有独到见解、深入分析的内容优先于浅层资讯
3. 实用价值强：能直接改善开发者工作流、解决真实痛点的内容靠前
4. 话题热度高：社区讨论度高、本周热门话题的内容靠前

确保读者打开周刊时，第一眼看到的就是本期最值得关注的内容。

4.5 输出文件

将生成的内容写入 src/content/blog/weekly-{N}.md（项目根目录为 fe-weekly 所在路径）。

---

内容筛选偏好

在筛选阶段，优先选择以下类型的内容：

1. 有影响力的版本发布：主流框架/工具的大版本更新（React、Vue、Next.js、Node.js、Vite、TypeScript 等）
2. 实用的技术文章：性能优化、架构设计、最佳实践，而非纯新闻报道
3. 值得关注的新工具：解决真实痛点的工具和库
4. AI + 前端交叉内容：AI 辅助开发、AI 在前端的应用、LLM 相关的前端工具
5. 有深度的工程实践：大厂工程实践、大规模项目经验分享

避免选入：

• 纯广告/赞助商内容
• 过于小众的项目（除非特别有趣）
• 重复出现在多个源中的同一条目（去重）

---

注意事项

• 链接必须使用最终重定向后的 URL：使用项目内置脚本或 curl 命令解析最终地址，确保周刊中的所有链接都是直达原文的真实地址

解析重定向 URL

使用项目内置脚本 .agents/scripts/resolve-url.sh：

# 批量解析
.agents/scripts/resolve-url.sh 'https://link1' 'https://link2' 'https://link3'
# 输出: https://link1 -> https://final-url1

• 如果某个周刊源无法访问，跳过它并告知用户，继续处理其他源
• 去重：同一个链接/项目如果出现在多个源中，只保留一次
• 如果用户只说"写周刊"而没提供额外链接，直接进入抓取阶段
• 如果用户直接给了一组链接说"用这些写周刊"，可以跳过抓取阶段，直接用用户的链接生成