| name | fe-weekly-creator |
| description | "创建前端周刊（fe-weekly）的完整工作流。当用户提到"写周刊"、"创建周刊"、"生成周刊"、"本周周刊"、"fe-weekly"、"前端周刊"、"weekly"时使用此 skill。也适用于用户说"帮我整理本周前端资讯"、"汇总本周技术新闻"、"抓取最新周刊内容"等场景。" |
前端周刊创建器 (fe-weekly-creator)
帮助用户从多个技术周刊源自动抓取、筛选、生成中文前端周刊。
工作流程概览
整个流程分为 4 个阶段：抓取 → 合并 → 筛选 → 生成。
阶段一：抓取素材
从以下 6 个周刊源抓取最新一期内容（使用 read_web_page/web_fetch 工具）：
核心源（前端，每期必查）
- JavaScript Weekly —
https://javascriptweekly.com/issues/latest
- Frontend Focus —
https://frontendfoc.us/issues/latest
- Node Weekly —
https://nodeweekly.com/issues/latest
- React Status —
https://react.statuscode.com/latest
AI 源（补充）
- TLDR AI —
https://tldr.tech/ai
- 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 确定期号和日期
- 读取项目目录
src/content/blog/，找到最大的 weekly-N.md 中的 N
- 新期号 = N + 1
- 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 个话题中提取。
板块顺序
- 本周快讯（可选，
## 本周快讯）— 独立的一周要闻，非下文的总结
- 技术文章（
## 技术文章）
- 工具推荐（
## 工具推荐）
- 版本发布（
## 版本发布）
本周快讯格式
- 关键词使用中文：
[关键词](链接) 中的「关键词」用中文书写，便于读者扫读。
- 该板块为独立的一周要闻列表，与下方技术文章/工具/版本发布无总结关系。
## 本周快讯
- [关键词](链接) 一句话描述。
- [关键词](链接) 一句话描述。
卡片式格式（技术文章 / 工具推荐 / 版本发布通用）
- 标题必须使用中文：卡片标题
### [标题](链接) 中的「标题」一律用中文呈现。若原文为英文标题，需翻译或提炼为简洁的中文标题再写入，不要直接保留英文。
- 正文用 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 内容排序
每个板块内的条目按以下优先级从高到低排序：
- 影响面广：涉及主流框架/工具、影响大量开发者的内容排最前
- 技术深度高：有独到见解、深入分析的内容优先于浅层资讯
- 实用价值强：能直接改善开发者工作流、解决真实痛点的内容靠前
- 话题热度高：社区讨论度高、本周热门话题的内容靠前
确保读者打开周刊时，第一眼看到的就是本期最值得关注的内容。
4.5 输出文件
将生成的内容写入 src/content/blog/weekly-{N}.md（项目根目录为 fe-weekly 所在路径）。
内容筛选偏好
在筛选阶段，优先选择以下类型的内容：
- 有影响力的版本发布：主流框架/工具的大版本更新（React、Vue、Next.js、Node.js、Vite、TypeScript 等）
- 实用的技术文章：性能优化、架构设计、最佳实践，而非纯新闻报道
- 值得关注的新工具：解决真实痛点的工具和库
- AI + 前端交叉内容：AI 辅助开发、AI 在前端的应用、LLM 相关的前端工具
- 有深度的工程实践：大厂工程实践、大规模项目经验分享
避免选入：
- 纯广告/赞助商内容
- 过于小众的项目（除非特别有趣）
- 重复出现在多个源中的同一条目（去重）
注意事项
- 链接必须使用最终重定向后的 URL：使用项目内置脚本或
curl 命令解析最终地址，确保周刊中的所有链接都是直达原文的真实地址
解析重定向 URL
使用项目内置脚本 .agents/scripts/resolve-url.sh：
.agents/scripts/resolve-url.sh 'https://link1' 'https://link2' 'https://link3'
- 如果某个周刊源无法访问，跳过它并告知用户，继续处理其他源
- 去重：同一个链接/项目如果出现在多个源中，只保留一次
- 如果用户只说"写周刊"而没提供额外链接，直接进入抓取阶段
- 如果用户直接给了一组链接说"用这些写周刊"，可以跳过抓取阶段，直接用用户的链接生成
