#优质博文 #前端 #CSS #HTML
The Incredible Overcomplexity of the Shadcn Radio Button
是这样的，很多时候会有不必要的复杂性，还有向后兼容的很多逻辑，也没什么办法。但是也有的复杂性在大项目里是必要的。

AI 摘要：这篇文章通过拆解 Shadcn UI 框架中的 Radio Button（单选按钮）组件，指出当前前端开发中存在的“过度工程化”问题。作者发现，原本只需一行原生 HTML 就能实现的单选框，在 Shadcn 中被封装成了依赖 Radix UI、Lucide 图标库、Tailwind CSS 且长达 45 行的代码块。作者通过对比证明，利用现代 CSS（如 appearance: none 和伪元素）完全可以轻松实现自定义样式的原生单选框，从而减少 JavaScript 负载、降低认知负荷并提高性能。

author Paul Hebert

Paulmakeswebsites

The Incredible Overcomplexity of the Shadcn Radio Button

Radio buttons are built into web browsers. Why are we using a UI library that wraps another UI library that rebuilds radio buttons from scratch? Why does rendering a radio button require multiple dependencies and several kilobytes of JavaScript? How did we…

#优质博文 #Turbopack #Rust #前端 #工程化
深入解析 Next.js 的新一代打包工具 Turbopack 如何通过增量计算（Incremental Computation）和细粒度缓存实现极致的开发响应速度。
Inside Turbopack: Building Faster by Building Less

AI 摘要：本文深入探讨了 Turbopack 的核心技术——增量计算（Incremental Computation）。通过从 Webpack 等工具中吸取教训并借鉴 Rust 社区的 Salsa 框架，Turbopack 构建了一套基于“值单元（Value Cells）”的细粒度缓存系统。它不仅能自动追踪函数间的依赖关系，实现“按需”重算，还通过创新的“聚合图（Aggregation Graphs）”解决了大规模依赖图下的查询性能瓶颈。此外，Next.js 16.1 正式引入了持久化的文件系统缓存，进一步提升了大型项目的启动和冷启动效率。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 核心架构：增量计算（Incremental Computation）
• 传统的打包工具随着应用规模增长，构建速度呈线性下降（$O(n)$）；而 Turbopack 的构建耗时仅取决于变更的大小，而非应用总量。
• 增量计算虽然增加了复杂度和内存开销，但对于大型 Web 应用实现即时反馈（Fast Refresh）至关重要。
• 设计灵感源自十余年的研究，包括 Webpack 的经验以及 Salsa (Rust-Analyzer)、Parcel、Adapton 等系统的启发。

2. 细粒度缓存：值单元（Value Cells）
• 引入 Vc<...>（Value Cells）概念：将每一个执行片段（如读取文件、解析 AST、元数据处理）抽象为类似电子表格的单元格。
• 自动依赖追踪：类似于 SolidJS 的 Signals，当一个函数等待（await）一个 Vc 时，系统会自动建立依赖关系。
• 避免冗余计算：只有当函数真正读取的单元格发生变化时，才会触发重算，而非整个对象发生变化就重算。

3. 变更传播与需求驱动执行（Propagation & Demand-driven）
• 脏值标记（Marking Dirty）：当文件变更时，系统将依赖该文件的函数标记为“脏”，并向上冒泡传播，直到受影响的所有节点。
• 需求驱动（Demand-driven）：即使标记为脏，系统也会推迟重算，直到该数据被当前的“活跃查询”（如浏览器打开的页面）真正需要。
• 结果比对（Equality Check）：如果在传播过程中发现计算出的新值与旧值相等，则停止向上继续传播，从而减少不必要的重算。

4. 大规模优化：聚合图（Aggregation Graphs）
• 性能挑战：在拥有数百万个节点的精细图中，收集错误信息或等待子图计算完成会非常缓慢。
• 聚合层设计：在依赖图之上构建多层聚合图，对下层节点的信息（如错误、警告、状态）进行摘要总结。
• 快速遍历：通过减少需要访问的节点数量，使得系统能够在大规模依赖网络中快速响应全局查询。

5. 持久化存储：文件系统缓存（File System Caching）
• 在 Next.js 16.1 版本中，文件系统缓存已转为稳定版并默认开启。
• 将内存中的依赖图、聚合图及 Vc 结果持久化到磁盘，使得 next dev 在重启后能快速恢复状态。
• 解决了复杂的数据序列化与一致性挑战，显著缩短了大型项目的冷启动时间。

author Anthony Shew, Benjamin Woodruff, Tobias Koppers

nextjs.org

Inside Turbopack: Building Faster by Building Less

Learn how we built Turbopack with incremental computation to scale development and builds to massive Next.js applications.

#优质博文 #前端 #工程化 #Rolldown #Vite #新动态

Rolldown 正式发布 1.0 发布候选版本（RC），作为 Vite 未来的核心打包工具，它在保持 Rollup 兼容性的同时，凭借 Rust 实现了 10-30 倍的速度提升。此 RC 标志着 API 的稳定性。在 1.0 之前不会有任何破坏性改动。

Announcing Rolldown 1.0 RC

author VoidZero Team

void(0)

Announcing Rolldown 1.0 RC

Rolldown 1.0 RC is here: A Rust-powered bundler that combines the best features of prior tools with unmatched speed and compatibility

#优质博文 #前端 #锚点定位 #CSS #JavaScript #course #动画
介绍如何利用 CSS 锚点定位（CSS Anchor Positioning）实现元素跟随交互目标移动的“随动”（Follow-the-leader）模式。
una.im | Follow-the-leader pattern with CSS anchor positioning

AI 摘要：文章探讨了 CSS 锚点定位（CSS Anchor Positioning）API 的一种高级用法：通过动态更新 anchor-name（锚点名称），让一个定位元素（Follower）在多个潜在锚点之间平滑切换。这种“随动”模式不仅支持纯 CSS 的悬浮（hover）和焦点（focus）触发，还能结合 JavaScript 状态管理或最新的 ::scroll-marker 伪元素，实现极简且高性能的导航高亮、焦点跟随等视觉交互效果。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 技术核心原理 (The Technique)
• 动态锚点绑定：创建一个具有固定 position-anchor 名称的跟随元素，并在交互（如 :hover ）时将对应的 anchor-name 赋值给当前目标，实现定位目标的动态切换。
• 平滑过渡动画：利用 CSS transition 作用于 top、left 等属性，使跟随元素在不同锚点间移动时产生平滑的动画效果。
• 定位限制：目前 position-area 属性尚不支持动画过渡，因此实现平滑移动仍需依赖绝对定位属性（如 top, left, right, bottom）。

2. 实际应用案例
• 操作栏 (Action Bar)：结合 JavaScript 处理点击状态，并利用 CSS 处理悬浮和焦点态，实现一个类似“放大镜”或“高亮框”在导航项间流转的视觉效果。
• 轮播图滚动指示器 (Carousel Scroll Markers)：展示了纯 CSS 的方案，利用 ::scroll-marker 伪元素和 :target-current 伪类，在用户滚动时自动更新锚点名称，驱动指示器跟随。

3. 兼容性与进阶技巧 (Compatibility & Tips)
• 浏览器支持：该技术基于 CSS Anchor Positioning API，目前已在 Chromium 内核浏览器上线，并被列入 Interop 2025，WebKit (Safari) 也即将支持。
• 体验优化：通过伪元素技巧（Pseudo element trick）可以防止鼠标在元素间移动时因间隙导致的状态丢失。
• 性能优势：相比于传统依赖 JS 计算 getBoundingClientRect() 的方案，该方法将布局计算交给浏览器内核，性能更优且代码更简洁。

author una.im

#优质博文 #AI #独立开发
不会编程的人能靠 AI 独立开发应用吗？
作者认为，AI 确实大幅降低了“将想法翻译成代码”的技术门槛，但“不会编程”、“靠 AI”和“应用”这些词语的边界远比想象中模糊。在与 AI 协作的过程中，使用者会不自觉地习得编程概念，AI 更多是作为博学但死板的“徒弟”或“翻译官”，帮助有逻辑、有想法的人实现愿景，而非代替思考和定义问题。

author So!azy

So!azy

不会编程的人能靠 AI 独立开发应用吗？

从群里一个有趣的提问说起，聊聊 AI 时代关于开发门槛的一些思考。

#优质博文 #css #gsap #动画 #前端
利用 GSAP 的 Flip 插件在 CSS 网格（Grid）布局之间创建平滑且响应式的转场动画。
Animating Responsive Grid Layout Transitions with GSAP Flip

AI 摘要：本文详细讲解了如何使用 GSAP Flip 插件来实现动态网格布局的平滑切换。通过结合 HTML 的数据属性（Data Attributes）控制、CSS Grid 的灵活响应式设计以及 GSAP 的状态捕捉能力，开发者可以轻松地在不同列数和尺寸的布局间创建自然的流体动画。文章提供了从基础逻辑到进阶视觉增强（如随机错位和模糊滤镜）的完整代码实现方案。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. HTML 结构与数据属性设计
• 导航面板：通过按钮的 data-size 属性存储目标网格尺寸（如 50%、100% 等）。
• 容器同步：网格容器使用 data-size-grid 属性与按钮状态同步，驱动 CSS 样式变化。
• 灵活项设计：每个网格项利用内联 CSS 变量 --aspect-ratio 定义宽高比，确保在布局变动时比例一致。

2. CSS Grid 响应式布局实现
• 属性选择器驱动：通过 [data-size-grid='...'] 动态调整 grid-template-columns 的列数。
• 响应式适配：利用媒体查询（Media Queries）在不同屏幕宽度下覆盖列数设置。
• 视觉优化：为图片设置 aspect-ratio 属性和滤镜过渡效果，提升交互手感。

3. GSAP Flip 核心逻辑（基础版）
• 状态捕获：在布局改变前使用 Flip.getState() 记录所有网格项的当前位置和尺寸。
• 布局触发：更新容器的 dataset 属性，瞬间改变 DOM 元素的 CSS 布局。
• 动画还原：调用 Flip.from() 让元素从旧位置平滑过渡到新位置，并使用 expo.inOut 缓动函数。
• 交互锁定：通过布尔值变量 animated 防止动画运行期间的重复点击干扰。

4. 进阶效果与视觉增强（进阶版）
• 错位动画（Stagger）：引入 stagger 参数并配合随机排序（random order），使元素不再同时移动，增加视觉律动感。
• 容器特效：在 Flip 动画执行的同时，对整个网格容器应用模糊（Blur）和亮度（Brightness）的补间动画。
• 性能考量：使用 will-change: filter 等属性优化渲染性能，确保复杂转场时的帧率稳定。

author Iqbal Muthahhary

Codrops

Animating Responsive Grid Layout Transitions with GSAP Flip | Codrops

We’ll explore how to use GSAP’s Flip plugin to animate dynamic grid layout changes, showing how grid items can resize and rearrange fluidly.

#碎碎念
怎么感觉每当我觉得钱不够用想坐个班看看蠢蠢欲动的时候，国内大厂就业现状之类的就会蹦出个事情按住我蠢蠢欲动的心，说：老老实实 remote 吧👿
感觉我确实有时候也很向往大厂和别的公司的一些活，但是我觉得我卷不来

#博客更新 #碎碎念
最近把我们的 Electron 应用配置上了 Mac 端的 TestFlight，用 GitHub Actions 实现自动化构建和上传。踩了不少坑，记录一下整个流程。
用 GitHub Actions 自动化 Electron 上架 MAS（Mac App Store）

#优质博文 #AI #开源 #Ollama
当安全团队因合规性禁用云端 AI 工具（如 Cursor / Claude Code）时，OpenCode 配合 Ollama 可提供了本地运行的替代方案，这篇文章简要介绍了一下。
虽然我没有这种烦恼，但是 mark 一下。
Your security team blocked Cursor and Claude Code—time to switch to OpenCode

AI 摘要：文章介绍了 OpenCode，这是一个支持本地 LLM（大语言模型）运行的开源 AI 编程助手。针对医疗、金融等对数据主权（Data Sovereignty）要求严苛的行业，OpenCode 通过集成 Ollama，确保代码不离开本地机器，从而规避了 Cursor 和 Claude Code 等云端工具带来的合规风险。虽然本地模型在逻辑推理和复杂调试上目前仍逊于云端模型，但在严格监管的环境下，它是目前最可行的 AI 辅助开发方案。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 合规挑战与解决方案
• 多数云端 AI 工具（AI coding tools）会将代码片段发送至第三方服务器，这违反了医疗（PHI）、金融（SOC 2）或政府行业的合规要求。
• OpenCode 作为开源替代方案，通过支持本地模型运行（Local model execution）确保数据隐私。
• 虽然本地模型在质量上不一定优于 Cursor，但在云端工具被封锁时，它是唯一的合规选择。

2. OpenCode 技术架构与配置
• OpenCode 提供终端 TUI（Text user interface）、VS Code 扩展和桌面应用。
• 核心功能是通过 Ollama 充当本地编排器，支持 Qwen 2.5 Coder 和 DeepSeek Coder 等模型。
• 需要手动调整上下文窗口（Context window）配置，默认的 4,096 token 往往不足以处理多文件编辑，建议提升至 16K–32K。

3. 性能评测与实战表现
• 代码重构（Refactoring）：本地模型需要更多的人工干预和显式指令（Explicit instructions），难以一次性完成高质量重构。
• 模式匹配（Pattern-matching）：在编写输入验证（Input validation）等标准任务时表现出色，能自动匹配项目规范。
• 复杂调试（Debugging）：在处理跨文件或涉及系统底层逻辑（如时区处理）的 Bug 时，本地模型容易出现幻觉（Hallucinations）并失败。

4. 行业应用场景建议
• 适用场景：医疗保健、金融机构和政府承包商，这些行业无法签署供应商的免责协议。
• 权衡取舍：选择本地模式意味着放弃了云端模型（如 Claude Sonnet 4）的高速度和深度架构理解能力，需要预留 2-3 倍的开发时间。
• 结论：如果条件允许，首选 Cursor；如果出于合规性必须本地化，OpenCode 是目前的最佳实践。

author Ikeh Akinyemi

LogRocket Blog

Your security team blocked Cursor and Claude Code—time to switch to OpenCode - LogRocket Blog

When security policies block cloud AI tools entirely, OpenCode with local models offers a compliant alternative.

#碎碎念 #折腾
Moe Copy AI 发了 v0.3.0，太感动了终于有大佬 @hakadao 帮忙改了一下最开始 AI 写的一坨的 UI 了，工作量巨大，现在 UI 清爽多了！（#26）

虽然现在还在陆续改，但是我也看不下去之前的了所以直接推了一版（（

更新日志 | 下载

#碎碎念 #游戏
抽到伊莫测试资格了，明天玩耍，内卷暂停，急急急急急急。
看着是类似幻兽帕鲁的感觉，有点期待

#优质博文 #CMS #Sanity #AI
"You should never build a CMS" | Sanity：Sanity 回应 Cursor 将 CMS 迁移至 Markdown 的热议，分享了许多非常好的使用 CMS 的理由。

感觉这个确实：

当同一条信息（如价格、法律条文）出现在多个地方时，Markdown 需要手动更新多处，而结构化内容只需修改一处。

AI 摘要：这篇文章是 Sanity 官方对 Lee Robinson（Cursor 团队）近期将内容从 CMS 迁移到 Markdown 文件这一趋势的深度回应。作者承认了传统 Headless CMS（无头内容管理系统）在复杂性、身份验证和 AI 接入方面的痛点，但指出“删除 CMS 并不等于删除了管理需求”。文章强调 Markdown 方案在处理非规范化数据、复杂语义协作和高级查询（Grep 的局限性）方面存在天然缺陷。Sanity 认为，真正的解法不是退回到原始的扁平文件，而是利用如 MCP（Model Context Protocol，模型上下文协议）等新技术，让 AI 直接与结构化内容 API 交互，构建真正面向 AI 的内容基础设施。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 现状反思：为何开发者想要逃离 CMS
• 承认 Headless CMS 带来的复杂性并没有为所有用户提供成比例的价值。
• 痛点分析：笨重的预览工作流（Preview workflows）、碎片化的身份验证（Auth fragmentation）以及高昂的存储成本。
• AI 接入障碍：传统的 API 验证屏蔽了 AI Agent，使其无法像读取本地代码库一样轻松访问 CMS 内容。

2. 核心争论：Markdown 的“内容即页面”陷阱
• 简单性的错觉：Markdown 适合一对一的简单页面，但无法处理内容的规范化（Normalization）。
• 维护噩梦：当同一条信息（如价格、法律条文）出现在多个地方时，Markdown 需要手动更新多处，而结构化内容只需修改一处。
• 实体与字符串：Markdown 本质上是字符串的堆砌，缺乏实体（Entities）概念，难以进行复杂的关联分析。

3. 工具边界：Git 与内容协作的错位
• 合并冲突的本质：代码合并是结构化的（Mechanical），而内容合并是语义化的（Semantic），Git 无法理解内容修改的意图。
• 实时协作需求：内容团队通常需要实时反馈，而非 Git 式的异步提交与拉取。
• 扩展性瓶颈：随着内容规模增长，Git 方案往往会演变成需要通过 Slack 协调修改或复杂的 PR 审核流程。

4. 技术深潜：Grep 无法替代结构化查询
• 检索局限性：Grep（全局正则表达式搜索）只能做简单的模式匹配，无法处理逻辑复杂的查询（如“查询某日期后发布的所有企业类案例”）。
• 查询语言的力量：展示了 GROQ 语言在处理复杂数据筛选时的优势，强调结构化数据才是 AI Agent 推理的最佳底座。

5. 未来趋势：面向 AI 的内容基础设施
• MCP 服务器的兴起：介绍 Sanity 推出的 MCP 服务器，使 AI Agent 能直接操作内容模式（Schema）并管理发布。
• 格式误区：区分“适合 AI 输入输出的格式（Markdown）”与“适合作为基础设施的格式（结构化数据）”。
• 真正的 AI 驱动：内容应是可查询的（Queryable）而非仅可搜索的（Grep-able），且应与展示层无关（Presentation-agnostic）。

Sanity.io

“You should never build a CMS” | Sanity

Lee Robinson migrated cursor.com off Sanity. He made good points. Here's what he missed.

#优质博文 #动画 #JavaScript #前端 #CSS
Anime.js v4.3 发布，引入强大的自动布局（Auto Layout）动画功能，支持平滑处理复杂的 CSS 布局变换。

这个真的好诶！跨框架造福前端人。

Introducing Auto Layout in Anime.js v4.3!

官方提供了 文档说明 和 发布日志，并在 CodePen 上发布了 示例集合

顺带一提，我很喜欢现在 Moe Copy AI 现在的内容提取功能～～现在可以直接选中提取推文串进行总结的，准备下个版本改改加一下常用的选择器，现在还是直接选中元素提取出来进行总结。

AI 摘要：Anime.js v4.3 版本正式推出了全新的自动布局（Auto Layout）功能，解决了长期以来 CSS 布局属性（如 display: flex/grid）难以实现平滑过度动画的痛点。该版本支持自动检测 DOM 位置变化、元素入场/出场动画以及子元素的交错效果。其 API 保持了以往的简洁性，支持任意缓动函数（Easing functions），并且动画过程可随时中断（Interruptible），兼容 Solid.js 等现代前端框架。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 核心功能亮点（Core Features）
• 支持对 display: flex、grid 以及 none 等属性进行动画化处理，实现无缝布局切换。
• 自动捕捉并平滑处理 DOM 元素的位置变化（Position changes）。
• 内置入场（Enter）与出场（Leave）动画支持。
• 提供可中断的动画（Interruptible animations）机制，确保交互响应灵敏。
• 支持子元素的交错动画（Staggered animations），提升视觉层次感。

2. 开发者资源与生态（Resources & Ecosystem）
• 确认了与 Solid.js 等框架的兼容性，具有广泛的框架适配潜力。
• 坚持 “极简 API（Dead simple API）” 的设计哲学，降低上手门槛。

author Julian Garnier

cosine - 前端人の日常频道

#tools #AI The Agent Skills Directory Vercel 公布了 skills.sh，是一个用于查找和共享代理技能的网站。 通过以下方式为任何代理添加技能： npx skills add <owner/repo> Source [以下是方便搜索索引的大纲 (AI 生成)，请读原文] 1. 前端开发与主流框架最佳实践 (Frontend Development & Frameworks) • Vercel & React 体系：包含 Vercel 官方推荐的…

#碎碎念 #AI #tools
Remotion 是跟 Slidev 一样的好东西！也出 skill 了，这个好诶，都很喜欢！

npx skills add remotion-dev/skills

完整提示历史记录

Source
Removal 现在拥有了 Agent Skills——只需使用 Claude Code 即可制作视频！

Gist

Claude Code Session

Claude Code Session. GitHub Gist: instantly share code, notes, and snippets.

#优质博文 #Markdown #前端
Creating “Edit” Links That Open Plain-Text Source Files in a Native App
好思路，通过自定义 URL 协议（如 vscode:// 或 obsidian://）在网站上添加隐藏的“编辑”按钮，直接调用本地编辑器修改 Markdown 文件。

AI 摘要：作者 Jim Nielsen 分享了如何优化其静态博客的编辑体验。通过利用 iA Writer 等原生应用支持的自定义 URL Scheme（URL 协议），他在博文页面中嵌入了一个隐藏的“编辑”链接。当他在阅读文章发现错误时，只需点击该链接，系统便会自动唤起本地编辑器并打开对应的 Markdown 源文件。作者还通过简单的 JavaScript 和 LocalStorage（本地存储）技术，确保该功能仅对自己可见，从而在不依赖复杂 CMS（内容管理系统）的情况下，将操作系统与本地文件系统转化为了高效的内容管理平台。

author Jim Nielsen

Jim Nielsen’s Blog

Creating “Edit” Links That Open Plain-Text Source Files in a Native App

The setup for my notes blog looks like this:

#优质博文 #React #前端
useOptimistic Won't Save You：深入探讨 React 19 的 useOptimistic hook，说明其必须结合 Transition 和 Action 状态管理才能真正处理复杂的竞态条件。
作者最后建议，这些复杂的底层 API 更多是为框架开发者设计的，普通开发者应倾向于使用成熟框架提供的抽象。

AI 摘要：本文分析了在 React 中实现乐观 UI (Optimistic UI) 的演进过程。作者通过对比传统的手动状态管理、使用 useRef 处理竞态条件，以及 React 19 的 useOptimistic 钩子，指出单纯使用该钩子并不能自动解决所有问题。要完美处理并发、竞态条件和错误回滚，开发者需要深入理解并发 React (Concurrent React) 的过渡、动作 (Actions) 以及 useActionState 等底层机制。作者最后建议，这些复杂的底层 API 更多是为框架开发者设计的，普通开发者应倾向于使用成熟框架提供的抽象。

author Colum

Columkelly

useOptimistic Won't Save You

Thoughts on the useOptimistic hook that was introduced in React 19

#碎碎念 #AI #杂谈
越用 AI 会越有种「啊他果然取代不了我」的感觉，尤其是他犯蠢的时候。

但是很多时候又很方便确确实实省下来了很多摸鱼时间，又爱又恨的感觉。

也不奇怪很多程序员会排斥 AI 写代码，因为架构上真的很容易犯蠢，写的代码但凡是个代码洁癖都会感觉哎呦还不如自己来写，但是重复性业务工作真的太省劲了。

虽然下沉市场和资本感觉都在 AI 狂欢，但我体感上的话，感觉其实平常程序员的生活是从写代码变成审计划和审代码改代码了，更爽了，写自己的东西更有劲了x

ai 真的容易堆屎山，我现在每次写完让 opus 4.5 review 一遍 codex review 一遍都差不多了我再看才能好点儿，不过他们自己 review 的效果还是挺好的。

PS: 仅限前端/ Swift 领域，后端我只能通过同事的使用感受推测

#tools #AI
The Agent Skills Directory

Vercel 公布了 skills.sh，是一个用于查找和共享代理技能的网站。

通过以下方式为任何代理添加技能：

npx skills add <owner/repo>

Source

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 前端开发与主流框架最佳实践 (Frontend Development & Frameworks)
• Vercel & React 体系：包含 Vercel 官方推荐的 React 最佳实践和网页设计指南，是目前安装量最高的技能。
• Expo & React Native：涵盖了 Expo 框架的升级、UI 构建、数据获取、CI/CD 流程以及原生 UI 开发等全方位技能。
• Vue & Nuxt 生态：提供了 Nuxt 模块开发、Nuxt UI 使用、Motion 动画库集成以及针对 Vue 的专项支持。
• 3D 与可视化：如 Three.js 的动画、材质、着色器 (Shaders) 和光照等进阶开发技能。

2. AI 智能体元能力与 MCP 集成 (AI Agent Meta-skills & MCP)
• 技能创建工具：Anthropic 提供的 skill-creator 和 mcp-builder（模型上下文协议构建器），帮助开发者快速为 AI 编写新技能。
• 智能体架构：包括子智能体驱动开发 (Subagent-driven development)、并行智能体分发 (Dispatching parallel agents) 以及智能体开发框架。
• 平台集成：如 OpenRouter TypeScript SDK 集成、Stripe 最佳实践、Slack GIF 创建器等。

3. 安全、测试与底层审计 (Security, Testing & Code Audit)
• 漏洞扫描：由 Trail of Bits 提供的各类区块链（Solana, Substrate, TON, Cairo）漏洞扫描器。
• 模糊测试 (Fuzzing)：集成了 libFuzzer、AFL++、OSS-Fuzz 和 Atheris 等多种自动化测试工具。
• 代码质量保障：包含系统化调试 (Systematic debugging)、测试驱动开发 (TDD)、代码复查 (Code Review) 和代码成熟度评估。

4. 市场行销、内容创作与生产力 (Marketing, Content & Productivity)
• 营销自动化：涵盖 SEO 审计、文案编辑 (Copywriting)、定价策略、营销心理学以及落地页转化率优化 (CRO)。
• 多媒体与社交媒体：针对小红书 (XHS)、X (Twitter) 的图片和帖子生成工具，以及漫画、信息图表 (Infographic) 的创作技能。
• 办公文档处理：支持对 PDF、XLSX、DOCX、PPTX 等复杂文件格式的深度解析与处理。
• 知识管理：针对 Obsidian 的 Markdown 增强、JSON Canvas 以及基础库配置。

5. 开发者工具与自动化 (DevTools & Automation)
• Git 与工作流：如使用 Git Worktrees、处理开发分支、自动生成变更日志 (Changelog) 等。
• 认证与后端：Better Auth 的最佳实践及其在不同框架（如 Nuxt）中的集成。
• 数据库与云服务：Convex 框架的各种功能实现，如实时数据、函数调用、模式验证器 (Schema validator) 等。

Skills

The Agent Skills Directory

Discover and install skills for AI agents.

#优质博文 #React #性能优化 #JavaScript #course
How to Measure and Optimize React Performance | DebugBear：全面介绍了衡量和优化 React 应用性能的工具与技术，重点讲解了 React 19.2 的新特性以及各类运行时和构建时的优化策略。

AI 摘要：文章深入探讨了如何应对 React 应用随规模增长而出现的性能退化问题。内容涵盖了从 React 19.2 新引入的性能轨道（Performance Tracks）到经典的 Profiler 工具的使用方法。作者详细讲解了运行时优化（如记忆化、虚拟列表和状态管理）、并发特性（useTransition 和 useDeferredValue）、包体积控制、服务端渲染（SSR）以及最新的 React Compiler。最后，文章强调了在生产环境中使用真实用户监控（RUM）来持续跟踪性能表现的重要性。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 衡量 React 性能的工具
• React 性能轨道 (React Performance Tracks)：介绍了 React 19.2 引入的新功能，在 Chrome DevTools 的性能面板中可视化调度器、组件渲染及服务器请求。
• React DevTools Profiler：讲解了如何使用火焰图（Flame Chart）定位瓶颈，并利用“记录组件渲染原因”功能排除不必要的重绘。
• Profiler API 与 Chrome 性能面板：介绍如何通过代码编程式地收集渲染时长，以及如何在主线程时间线中分析 JavaScript 的执行耗时。

2. 运行时优化策略
• 记忆化：详细对比了 memo()、 useMemo() 和 useCallback() 的使用场景，强调避免对简单计算过度使用。
• 代码分割：利用 lazy() 和 Suspense 实现组件按需加载，减少初始加载负担。
• 列表虚拟化：推荐使用 react-window 等库处理长列表，仅渲染可视区域内的 DOM 节点。
• 状态管理优化：提倡状态共存（State Colocation）原则，并建议在复杂场景下使用 Zustand 或 Jotai 等支持选择器优化的轻量库。

3. 并发特性与编译器
• 并发渲染挂钩 (Concurrency Hooks)：讲解了 useTransition 如何标记非紧急更新以保持 UI 响应，以及 useDeferredValue 如何延迟处理从父级传递的频繁变动的值。
• React Compiler：介绍了 2025 年推出的自动记忆化工具，它能在构建时自动优化组件，减少手动编写 useMemo 的需求。

4. 交付与架构优化
• 包体积控制：使用 Lighthouse Treemap 和 Webpack Bundle Analyzer 分析依赖，提倡按需引入（Tree Shaking）以减少解析耗时。
• 服务端渲染与流式传输 (SSR & Streaming)：探讨了 renderToPipeableStream 带来的流式 HTML 交付，以及 React 服务端组件（RSC）如何通过零客户端 JavaScript 提升性能。

Debugbear

How to Measure and Optimize React Performance | DebugBear

Learn how to measure the performance of your React app and identify what's slowing it down.

#优质博文 #CSS #JavaScript #前端
Bytes I can delete after all this time：由于 CSS 和 JS 的进步，越来越多的技术我们不再需要了，Remy Sharp 分享了一份我们可以抛弃的技术清单。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. CSS 布局与样式增强
• 使用 text-underline-offset 属性轻松控制文本下划线的距离，无需再用复杂的伪元素模拟。
• 在 Flexbox 布局中直接使用 gap 属性，告别过去需要通过处理 margin (外边距) 来设置间距的繁琐操作。
• 采用原生 CSS 嵌套 (Nesting) 和在选择器内嵌套媒体查询 (Media Queries)，使样式结构更清晰且无需预处理器。
• 利用 clamp(min, variable, max) 实现流体响应式尺寸，简化了复杂的断点计算。
• 使用 content: open-quote 结合 q 标签实现根据语言自动适配的本地化引号。

2. JavaScript 语法与交互优化
• 采用可选的 catch 绑定 (Optional catch binding)，在不需要错误对象时直接写 catch { ... }，避免定义未使用的变量。
• 指针事件 (Pointer Events) 的普及使得开发者可以用一套逻辑替代旧有的 click (点击) 和 touch (触摸) 事件的混合逻辑。
• 弃用旧的性能黑科技，如使用 ~~ 或 | 0 取整，现代引擎下 Math.floor() 的可读性更高且性能不再是瓶颈。

3. 资源优化与现代格式
• AVIF 图像格式已获得全面支持，相比 JPEG 可轻松实现 50% 以上的体积缩减。
• 提供了使用命令行工具 avifenc 批量转换图片的实用脚本示例。

author Remy Sharp

Remysharp

Bytes I can delete after all this time

For the last few years my work-work has mostly focused on back end software (particularly around APIs). This meant that any front end work I was doing was for …