AI 摘要：vercel-labs/agent-skills 是一个 GitHub 仓库，汇集了专为 AI 编程代理（AI Coding Agents）设计的“技能”（Skills）。这些技能通过预打包的指令和脚本，增强了代理在代码开发、审查和部署方面的能力。目前包含 react-best-practices（专注于 React/Next.js 性能优化）、web-design-guidelines（审查 UI 代码的无障碍性、性能和用户体验）以及 vercel-deploy-claimable（快速将应用部署到 Vercel）等核心技能。通过简单的命令行安装后，AI 代理可自动识别并利用这些技能来完成相关任务，极大地提升了自动化开发和部署的效率。

GitHub

GitHub - vercel-labs/agent-skills: Vercel's official collection of agent skills

Vercel's official collection of agent skills. Contribute to vercel-labs/agent-skills development by creating an account on GitHub.

很多朋友知道我是远程工作以后都表示了极大的羡慕。我想这里面很多的“羡慕”是有点不切实际的美好幻想，就和想象的诗和远方一样。线下工作还是远程工作并不是工作的第一性的原理。远程工作从来就不是完美的乌托邦，它只是剥开了“工作”的包装盒。它剥离了通勤的疲惫、办公室的政治、以及那些为了看起来很忙而进行的‘表演性工作’。当物理的束缚消失，工作便赤裸裸地还原为最本质的模样——不是你坐班了多久，而是你交付了什么。

AI 摘要：文章作者分享了半年多的远程工作体验，指出其带来了工作地点自由、人才密度提升、时间安排灵活、无需通勤及更舒适的个人工作空间等显著优势，甚至略微提升了工作效率。然而，远程工作也伴随着代价，主要体现在工作与生活界限模糊、团队社交与默契缺失（“茶水间时刻”消失）以及工作场景单一带来的“空间窒息感”。作者总结认为，远程工作并非完美乌托邦，它剥离了传统办公的束缚，回归到以交付结果为核心的本质，但要求个体建立更强的自我秩序以对抗孤独与边界模糊。

AI 摘要：作者回顾入职一个月在 LobeHub 进行的性能与开发体验优化。主要内容包括：替换 react-layout-kit、移除 CSS-in-JS 动态样式以降低渲染与内存开销；优化首屏返回速度并大幅提升消息列表渲染性能；重构 Tooltip、Popover 等基础组件；削减 Electron App 体积约 100MB；改进 i18n 与 IPC 开发体验；并计划未来将 Next.js 迁移至 Vite，以显著降低开发期内存占用。

innei.in

记 LobeHub 的性能和 DX 优化

距离去新的工作差不多一个多月了。这段时间刚入职，其实都挺忙的，而且公司也正在筹划发布 2.0 的版本，所以我加入的时候刚好算是个好时机（忙到起飞）。 这一个月基本都是在冲刺。我发现，我每次换一个公司，刚进去的一段时间都会去做一些项目中的性能优化，以及对一些开发体验不友好的事情，做过多的调教。 尤

AI 摘要：本文讲述了作者在使用 AI 编码代理开发 Outlyne（一个 AI 驱动的网站构建器）过程中，遭遇的一个由 AI 代理错误删除注释后引发的隐藏 bug。该 bug 导致应用程序中出现了无限的 React 组件递归渲染，并通过 React 19 的 <Activity> 组件巧妙地隐藏起来，直到用户浏览器因内存耗尽而崩溃。作者通过深入调试，最终找到了问题的根源，并强调了将关键代码约束（structural invariants）转化为自动化测试的重要性，而非仅仅依赖注释。

AI 摘要：本文通过基准测试对比了 JavaScript 中 Array of Objects (AoS) 和 Object of TypedArrays (SoA) 两种数据存储模式的性能。实验发现 SoA 模式比 AoS 模式快 4 倍。文章深入分析了这种性能差异并非仅源于 TypedArrays 的优势，而是多种因素共同作用的结果，包括对象属性查找开销、内存布局、缓存效率以及循环开销等。最终结论是，消除对象开销、减少循环迭代次数、利用属性访问提升（property access hoisting）以及 TypedArray 提供的性能保证是 SoA 模式性能更优的关键。

AI 摘要：本文全面介绍了 Vitest Browser Mode，这是一种在真实浏览器环境中运行前端测试的新兴技术。它结合了端到端（E2E）测试的真实性与组件测试的隔离性，能够直接利用所有 Web API，无需模拟，并提供可视化的调试界面。作者预测 Vitest Browser Mode 将在未来几年内成为前端工程师必备的测试工具。文章详细阐述了 Vitest Browser Mode 的工作原理、测试编写方式（类比 React Testing Library 和 Playwright）、核心概念、配置方法（推荐使用 Playwright provider）、安装步骤以及如何运行测试，并提供了一个完整的示例。

AI 摘要：本文详细介绍了 HTML 中用于管理文本换行的四种主要方式：<br> 元素、<wbr> 元素、­ (soft hyphen) 字符以及   (non-breaking space) 字符。文章分析了每种方法的适用场景、优缺点，并强调了在大多数情况下，CSS 提供了更强大、更灵活的解决方案，例如使用 display 属性、overflow-wrap、text-wrap 和 white-space 等 CSS 属性来控制文本的换行和断行行为，以提升内容的可访问性、可维护性和用户体验。

Them’s the Breaks - HTMHell

A collection of bad practices in HTML, copied from real websites.

AI 摘要：TanStack Pacer 是一个专为前端应用设计的轻量级库，旨在解决常见的异步事件时序问题，例如防抖、节流、批处理和速率限制。文章通过构建一个类似 Pinterest 的无限滚动图片画廊，详细展示了如何在 React 应用中集成并使用 Pacer 的核心功能，以优化用户界面性能并避免 RxJS 带来的复杂性，从而提供了一个更易学、更小巧、更符合 React 生态的解决方案。

LogRocket Blog

Moving beyond RxJS: A guide to TanStack Pacer - LogRocket Blog

Build a React infinite scroll gallery with TanStack Pacer. Learn debouncing, throttling, batching, and rate limiting without RxJS complexity.

Zola Chat 和 prompt-kit 作者 @Ibelick 沉淀了他使用 Tailwind + shadcn-ui 生态（Base UI）+ framer-motion 进行 AI 编程时的 Skill , 用来约束 AI 过度设计和给出明确的设计方向。

或许每个项目都应该又一个类似的 UI Skill 来约束项目的设计风格，我准备给项目也加一下

AI 摘要：作者在为 RSS feed 链接添加 UTM 参数以追踪流量时，意外导致 RSS 聚合器将所有文章视为新内容而重复添加。文章深入解释了 RSS feed 的工作原理，强调了 URL 作为唯一标识符的局限性，并介绍了 RSS 规范中的 guid 字段，阐述了如何使用 guid 来提供独立的、不易变的唯一标识，从而避免因链接变更而导致内容重复的问题。尽管作者的错误无法在已订阅的聚合器中修复，但文章强调了在设计 RSS feed 时使用 guid 的重要性。

1. RSS Feed 的工作原理与问题
• RSS feed 是一种机器可读的内容列表，常用于订阅更新。
• RSS 聚合器通过轮询 feed 来获取更新，并通常使用 URL 作为条目的唯一标识。
• 当作者在 RSS feed 的链接中添加 utm_medium=rss 参数后，聚合器将其视为新的、不同的链接，导致所有文章被重复添加。
2. 唯一标识符的必要性与 GUID 字段
• URL 可能会发生变化（例如，进行重构或添加追踪参数），而 RSS 聚合器不遵循重定向。
• guid (Globally Unique Identifier) 字段是 RSS 规范中用于为条目提供独立、不易变唯一标识的元数据。
• guid 字段没有规定格式，聚合器将其视为不透明字符串，确保其唯一性是源的责任。
3. 解决方案与教训
• 通过在 RSS feed 中为每个条目设置 guid 字段，可以保持 link 字段的灵活性，同时确保条目的唯一性。
• 作者的错误在于没有从一开始就正确使用 guid 字段，导致已订阅的聚合器中存在重复内容，并且无法修复。
• 这是一个关于 RSS、RFC 阅读和前瞻性思考的宝贵教训。

TheOrangeOne

GUIDs - How I messed up my RSS feed

If you're reading this post through an RSS aggregator, or were directed here from one, you may have already seen the issue I'm about to describe, and already swore my name. If you didn't, I'd recommend subscribing, for completely unbiased reasons. This is…

AI 摘要：Addy Osmani 在 Google 14 年的职业生涯中，总结出 21 条经验教训，这些经验并非关于特定技术，而是关于如何在工程领域取得成功，包括关注用户问题、团队协作、代码清晰度、避免不必要的创新、人际关系的重要性，以及认识到时间比金钱更宝贵等。这些经验强调了解决实际问题、与人合作以及持续学习的重要性，是工程师职业生涯中宝贵的指导。

1. 以用户为中心
• 真正的价值来自于深入理解并解决用户问题，而非仅仅热衷于技术本身。
• 通过参与客服、与用户交谈、观察用户痛点来深入理解问题。

2. 协作与对齐
• “对”固然重要，但“一起达成对”才是真正的挑战和价值所在。
• 避免成为“房间里最聪明的人”，应创造空间让他人参与，并对自己的观点保持适度怀疑。
• 绝大多数“慢”的团队实际上是“错位”的团队，即方向、接口或优先级不明确。

3. 行动与交付
• 完美的追求会阻碍进步，先行动、再完善、再优化。
• “行动导向”比“分析瘫痪”更能带来清晰度，可编辑错误页面，但无法编辑空白页面。
• AI 可以辅助快速迭代和反馈。

4. 清晰度而非技巧性
• 代码需要清晰易懂，以便他人（尤其是在紧急情况下）能够理解和维护。
• 为维护者（包括 2 AM 时的你）而非自己写代码。

5. 谨慎创新
• 创新是有成本的，应谨慎使用“创新代币”。
• 只在有独特价值的地方创新，其他地方应倾向于使用成熟、可靠的技术。

6. 价值的可视化与倡导
• 优秀的成果需要被看见，代码不会替你说话，人会。
• 要让你的影响对他人可见，尤其是在你不在场时。

7. 代码的最小化
• 最“好”的代码是你根本不需要写的代码。
• 在构建之前，思考“如果我们不这样做，会发生什么？”。

8. 兼容性即产品
• 在大规模系统下，即使是 bug 也会成为用户的依赖。
• API 设计实际上是 API 退休设计，需要考虑兼容性、时间和用户体验。

9. 聚焦可控因素
• 在大型组织中，很多变量不可控，应专注于自己的影响范围。
• 保持理智和高效的关键在于聚焦可控之事。

10. 抽象的代价
• 抽象会转移复杂性，而非消除它，当问题发生时，你仍需要理解底层。
• 持续学习“更低级”的知识，以应对抽象失效的情况。

11. 教学即学习
• 写作和教学是促进理解的有效方式，能暴露自己知识的不足。
• 尝试用简单的方式解释事物，是检验和深化理解的捷径。

12. “粘合剂”工作的价值与可见性
• 文档、入职、跨团队协调等“粘合剂”工作至关重要，但容易被忽视。
• 要将这些工作视为可见的影响，而非仅仅是“乐于助人”。

13. 避免轻易获胜
• 如果总是轻易获胜，可能意味着积累了“沉默的阻力”。
• 真正的对齐需要时间、理解和妥协，而非赢得争论。

14. 度量与目标
• 任何被量化的指标都会被“博弈”。
• 在衡量时，应同时关注速度和质量/风险，并注重趋势分析。

15. 承认未知
• 领导者承认“我不知道”能创造一个更安全的环境，鼓励团队成员也敢于提问。
• 好奇心和承认未知才能促进团队学习。

16. 人脉网络
• 人脉是你最重要的长期资产，远比任何一份工作都持久。
• 以好奇和慷慨的态度建立和维护人脉。

17. 性能提升源于移除
• 许多性能提升来自于移除不必要的工作，而非增加技术复杂度。
• 最快的代码是那些从不运行的代码。

18. 流程的本质
• 良好的流程应简化协调、降低失败成本，而非制造官僚主义。
• 如果流程的价值无法解释，它可能只是负担。

19. 时间价值
• 职业生涯后期，时间成为比金钱更宝贵的资源。
• 有意识地权衡时间和回报，避免过度追求金钱而牺牲宝贵的时间。

20. 复利效应
• 专业技能的提升需要刻意练习和时间积累，没有捷径。
• 将职业生涯视为复利增长，而非购买彩票，持之以恒会带来长远回报。

21. 核心思想
• 保持好奇心、谦逊，并始终记住工作关乎人（用户和团队成员）。
• 工程师的职业生涯足够长，可以从错误中学习，并分享经验。

Addyosmani

21 Lessons From 14 Years at Google

Lessons learned from 14 years of engineering at Google, focusing on what truly matters beyond just writing great code.

AI 摘要：本文总结了 ViteLand 生态在 2025 年 12 月的主要更新和社区动态，重点介绍了 Oxc 在代码校验和格式化方面的显著性能提升，以及 Vite、Vitest、Rolldown 各自的项目进展。同时，文章还预告了即将举行的相关技术活动，并展示了社区中涌现出的基于 ViteLand 工具的创新项目和迁移案例，表明整个生态正朝着更快速、更统一的方向发展。

1. Oxc 的性能突破
• Oxlint 和 Oxfmt 在代码校验和格式化方面提供比 ESLint 和 Prettier 更快的速度（分别快 50-100 倍和 30 倍）
• Oxlint 已推出 1.0 版本，并新增了类型感知校验（type-aware linting）和兼容 ESLint 的 JS 插件
• Oxfmt 新增了对嵌入式语言和实验性导入排序的支持
• Bun、Vue、Preact、date-fns、Inquirer.js、Shopify、Miro、Airbnb 等多个项目已迁移至 Oxc
• Oxc 团队计划在 2026 年推出对动态配置（dynamic configs）的支持
• Oxc 在性能优化方面持续投入，实现了语义分析性能的提升

2. Vite 项目更新
• 发布了多个 Vite 8 beta 版本，修复了 bug 并提升了稳定性
• Vite 8 beta 提供了第二版原生插件（native plugins），改进了动态导入（dynamic import）和导入 glob（import glob）插件的对齐

3. Vitest 项目更新
• 新增实验性的 OpenTelemetry 支持，用于分析测试性能瓶颈
• Vitest UI、CLI 和 VS Code 扩展支持分析和分解导入，识别减慢测试速度的依赖
• 支持通过 experimental.fsCache 缓存转换后的文件，加速后续测试运行

4. Rolldown 项目更新
• 支持通过手动指定 tsconfig 来使用 TypeScript 项目引用（TypeScript project references）
• 优化了默认的代码块（chunking）算法，减少了生成的代码块数量
• 提供了 postBanner 和 postFooter 选项，用于在打包后的代码前后追加内容
• 插件的 resolveId 钩子支持通过 importerId 进行过滤，提高性能

5. 社区动态与合作
• Framer 发布了关于使用 Rolldown 改进性能的案例研究
• TypeScript.fm 和 Syntax.fm 播客讨论了 ViteLand 项目的更新和发展预测
• Ninja Squad 撰写了关于使用 Vitest 浏览器模式测试 Angular 的文章
• 社区涌现出多个基于 Oxc 和 Rolldown 的新工具和迁移案例，如：
• oxlint-plugin-complexity：用于校验代码复杂度的 Oxlint 插件
• Roll(down)phobia：基于 Rolldown 的包大小分析工具
• RSC Explorer：使用 Vite 8 和 Rolldown 构建的 RSC（React Server Components）工具
• Facetpack：使用 Oxc 替换 Babel 的 React Native 工具。
• MonkeyType：迁移到 Oxlint 以获得更快的类型感知校验速度
• create-better-t-stack：从 Biome 迁移到 Oxlint 和 Oxfmt
• Ultracite：提供基于 Oxc 的预设配置
• rollipop：完全基于 Rolldown 的 React Native 构建工具

void(0)

What’s New in ViteLand: December 2025 Recap

Our December 2025 recap features big Oxc releases: Oxfmt alpha builds and Oxlint's type-aware linting alpha, plus updates across Vite, Vitest, Rolldown, and community highlights.

AI 摘要：Dither Image Online 是一个免费的在线工具，旨在帮助用户轻松地将普通图像转换为具有复古和像素艺术风格的抖动（dithered）图像。该工具强调其快速、实时和本地处理的特性，确保用户隐私安全。它提供了多种抖动算法，如 Bayer、Crosshatch、Halftone 和 Contour，并允许用户调整参数以获得所需效果，无需上传图片到服务器，也无需复杂的 Photoshop 操作。

AI 摘要：Chrome 144 的 DevTools 发布包括 DevTools MCP 服务器更新（支持复用浏览器会话的 auto connection）、Network 面板重命名为 Request Conditions 并新增对单个请求的节流（throttling）、在 Styles 面板中可编辑 @font-face 与 @font-feature-values、以及 Elements 面板下在 shadow root 与 document root 可见 adopted stylesheets；文章同时回顾了 2025 年 DevTools 在 AI 助手、性能面板重构与 Web 平台调试工具方面的一系列改进，并提供了预览版本与反馈渠道信息。

Chrome for Developers

What's new in DevTools, Chrome 144  |  Blog  |  Chrome for Developers

Chrome DevTools MCP server, individual request throttling, adopted stylesheets and 2025 highlights.