Now vibe coding, so learning hammer FE ?
《为特定场景"投影"React：从60KB到7KB的极致裁剪实验》
标签：#前端 #工程化 #React #TanStackStart #AICoding #PerformanceOptimization #Vite #RSC #BundleSize
总结：
TanStack作者Tanner Linsley发现React 19在Vite打包后仍占约60KB gzip，远大于TanStack全家桶总和。受"代码即物化视图"理念启发，他借助AI代理在一天内生成了一个针对TanStack Start需求定制的React"投影"——保留完整公共API，但移除并发调度、时间切片等不需要的功能，核心仅7.08KB gzip。该项目已在其个人博客和tanstack.com生产环境运行，JS体积减少33%至85%，渲染性能提升2到3倍，验证了当代码生成成本骤降时，为特定场景定制依赖库投影的可行性。
文章要点：
- 作者发现React打包后仍有约60KB，比TanStack全家桶加起来还"胖"，成了整个技术栈里"最不能删却又最大块头"的存在
- 本想用Preact"瘦身"，但它和React 19在use()、服务端动作、hydration等边缘地带已经"渐行渐远"，补丁叠补丁让人望而却步
- 一个超酷的观点启发了他：如果写代码能像查数据库一样"按需生成"，那代码本身只是"理念"的一种展示形式，我们完全可以为不同场景生成不同版本的React
- 借助AI代理，只用一天就"捏"出了一个迷你版React，保留了你熟悉的hooks、JSX、Suspense和SSR，但扔掉了并发调度、时间切片这些TanStack Start用不上的"重型装备"
- 设计得像乐高一样：7KB核心底座 + 8个可插拔功能（context、suspense、portal等），不需要的模块在构建时直接替换成空实现，不会混进最终包
- 真刀真枪上了生产环境：个人博客JS少了三分之一，首屏快了近两成；tanstack.com这种"重火力"站点也成功扛住，客户端JS砍掉近1MB
- 作者抛出思考题：当定制一个库的成本从几个月降到几天，继续默认 shipped 全套通用库，反而成了一种需要掂量的选择
- 他强调这不是要"取代React"，更像是Linux发行版或歌曲混音——同一个内核，根据不同听众的口味调出不同版本
文章URL：https://tannerlinsley.com/posts/projecting-react
标签：#前端 #工程化 #React #TanStackStart #AICoding #PerformanceOptimization #Vite #RSC #BundleSize
总结：
TanStack作者Tanner Linsley发现React 19在Vite打包后仍占约60KB gzip，远大于TanStack全家桶总和。受"代码即物化视图"理念启发，他借助AI代理在一天内生成了一个针对TanStack Start需求定制的React"投影"——保留完整公共API，但移除并发调度、时间切片等不需要的功能，核心仅7.08KB gzip。该项目已在其个人博客和tanstack.com生产环境运行，JS体积减少33%至85%，渲染性能提升2到3倍，验证了当代码生成成本骤降时，为特定场景定制依赖库投影的可行性。
文章要点：
- 作者发现React打包后仍有约60KB，比TanStack全家桶加起来还"胖"，成了整个技术栈里"最不能删却又最大块头"的存在
- 本想用Preact"瘦身"，但它和React 19在use()、服务端动作、hydration等边缘地带已经"渐行渐远"，补丁叠补丁让人望而却步
- 一个超酷的观点启发了他：如果写代码能像查数据库一样"按需生成"，那代码本身只是"理念"的一种展示形式，我们完全可以为不同场景生成不同版本的React
- 借助AI代理，只用一天就"捏"出了一个迷你版React，保留了你熟悉的hooks、JSX、Suspense和SSR，但扔掉了并发调度、时间切片这些TanStack Start用不上的"重型装备"
- 设计得像乐高一样：7KB核心底座 + 8个可插拔功能（context、suspense、portal等），不需要的模块在构建时直接替换成空实现，不会混进最终包
- 真刀真枪上了生产环境：个人博客JS少了三分之一，首屏快了近两成；tanstack.com这种"重火力"站点也成功扛住，客户端JS砍掉近1MB
- 作者抛出思考题：当定制一个库的成本从几个月降到几天，继续默认 shipped 全套通用库，反而成了一种需要掂量的选择
- 他强调这不是要"取代React"，更像是Linux发行版或歌曲混音——同一个内核，根据不同听众的口味调出不同版本
文章URL：https://tannerlinsley.com/posts/projecting-react
Tanner Linsley
Projecting React
An AI-generated projection of React's public API, shaped around what a TanStack Start app needs. ~9KB client, 2–3× faster on our workloads. Powers this blog today; capable of running tanstack.com end-to-end with no known regressions. An experiment, not a…
《AI编码代理生产级工程技能集》
标签：#AI辅助编程 #开发工具 #AI_Agent #工程规范 #ClaudeCode #Cursor #代码审查 #测试驱动开发 #CI_CD
总结：
这是一个为AI编码代理（如Claude Code、Cursor、GitHub Copilot等）设计的生产级工程技能仓库，由Addy Osmani维护。它将资深工程师在真实项目中的工作流、质量门禁和最佳实践编码为20个结构化技能，覆盖从需求定义到上线发布的完整开发生命周期，让AI代理在每次编码时都能保持一致的专业水准，避免走"最短路径"而跳过测试、审查等关键环节。
文章要点：
- 六阶段开发流水线：从Define（定义需求）→ Plan（拆解任务）→ Build（增量编码）→ Verify（验证测试）→ Review（质量门禁）→ Ship（安全发布），像工厂流水线一样规范AI的每一步动作
- 7个斜杠命令即开即用：
- 20个实战技能全覆盖：从API设计、前端工程、TDD测试驱动，到性能优化、安全加固、Git工作流、CI/CD自动化，每个技能都自带步骤清单、验证标准和"反找借口"表格（比如AI想跳过测试时，会被技能里的反驳论据怼回去😄）
- 多工具无缝兼容：Claude Code一键插件安装，Cursor复制到rules目录，Gemini CLI、Windsurf、GitHub Copilot、Kiro等主流AI编程工具都能直接用，技能就是纯Markdown，通吃所有支持系统提示词的代理
- Google工程文化落地：融入了Hyrum定律、Beyonce规则、测试金字塔、Chesterton围栏等Google实战智慧，不是泛泛而谈的理论，而是嵌入到每一步工作流中的可执行标准
文章URL：https://github.com/addyosmani/agent-skills
标签：#AI辅助编程 #开发工具 #AI_Agent #工程规范 #ClaudeCode #Cursor #代码审查 #测试驱动开发 #CI_CD
总结：
这是一个为AI编码代理（如Claude Code、Cursor、GitHub Copilot等）设计的生产级工程技能仓库，由Addy Osmani维护。它将资深工程师在真实项目中的工作流、质量门禁和最佳实践编码为20个结构化技能，覆盖从需求定义到上线发布的完整开发生命周期，让AI代理在每次编码时都能保持一致的专业水准，避免走"最短路径"而跳过测试、审查等关键环节。
文章要点：
- 六阶段开发流水线：从Define（定义需求）→ Plan（拆解任务）→ Build（增量编码）→ Verify（验证测试）→ Review（质量门禁）→ Ship（安全发布），像工厂流水线一样规范AI的每一步动作
- 7个斜杠命令即开即用：
/spec写需求文档、/build增量开发、/test跑测试、/review代码审查……输入命令就能自动激活对应的技能组合，非常顺手- 20个实战技能全覆盖：从API设计、前端工程、TDD测试驱动，到性能优化、安全加固、Git工作流、CI/CD自动化，每个技能都自带步骤清单、验证标准和"反找借口"表格（比如AI想跳过测试时，会被技能里的反驳论据怼回去😄）
- 多工具无缝兼容：Claude Code一键插件安装，Cursor复制到rules目录，Gemini CLI、Windsurf、GitHub Copilot、Kiro等主流AI编程工具都能直接用，技能就是纯Markdown，通吃所有支持系统提示词的代理
- Google工程文化落地：融入了Hyrum定律、Beyonce规则、测试金字塔、Chesterton围栏等Google实战智慧，不是泛泛而谈的理论，而是嵌入到每一步工作流中的可执行标准
文章URL：https://github.com/addyosmani/agent-skills
GitHub
GitHub - addyosmani/agent-skills: Production-grade engineering skills for AI coding agents.
Production-grade engineering skills for AI coding agents. - addyosmani/agent-skills
