《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个斜杠命令即开即用：/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

《用 React、GSAP 和 AI 打造 Maxima Therapy 网站》

标签：#前端 #React #GSAP #TailwindCSS #ReactRouter #AI辅助开发 #创意编程 #Lottie #MatterJS #ScrollTrigger

总结：

本文是 Codrops 上的一篇案例复盘，记录了团队为神经多样性支持机构 Maxima Therapy 打造高互动、高插画风格网站的全过程。文章详细介绍了技术栈选型（Sanity + React Router + GSAP + TailwindCSS）、多个核心交互模块的实现思路（可拖拽轮播、SVG 水波纹、物理绳索、形状变形、贴纸动效），以及 AI（Claude Code）在实际开发中的辅助作用与局限。对于想在前端项目中融合创意动画与 AI 提效的开发者来说，这是一份非常接地气的实战参考。

文章要点：

- 技术栈选型很务实：团队选了 React Router（而非 Next.js）做静态生成，搭配 Sanity 做 CMS、Cloudflare Pages 托管，理由是配置更轻量；GSAP + Lenis 负责动画和滚动平滑，TailwindCSS 负责样式，TypeScript 做类型检查
- 首页轮播的交互设计很巧妙：把四个节目板块拆成四个旋转的 <div>，只有当前可见的板块才响应交互；切换时触发路由变化，但轮播组件通过布局隔离避免了不必要的重渲染
- SVG 水波纹效果用 AI 辅助生成：Claude Code 帮忙把原始 SVG 路径转换成带 50 个控制点的系统，再结合 GSAP 实现鼠标触发的涟漪动画——AI 在创意编码这类"繁琐但规则明确"的任务上表现不错
- Lottie 动画与 Canvas 背景混合：通过离屏 Canvas 绘制固定图案，再用 Lottie 的 Canvas 渲染模式做遮罩，最后用 globalCompositeOperation 合成，实现了滚动联动的背景效果
- 物理引擎让页面更有生命力：招聘页用 Matter.js 模拟"supports"单词被两根绳索悬挂的物理效果，绳索由复合体堆叠而成，SVG 文字根据物理模拟结果实时位移
- AI 是"得力助手"但不是"万能替身"：Claude Code 在 SVG 优化、Sanity 数据模型扩展、TypeScript 类型生成上帮了大忙，但也会出现结果不一致、擅自改动数据获取模式、甚至"幻觉"出不存在 SVG 路径的情况；团队建议把 AI 用在范围明确的小任务上
- ScrollTrigger 让滚动交互管理很轻松：配合 useGSAP hook 自动清理，避免了手动写 Intersection Observer 的繁琐，实现了文字显现、图片揭示、SVG 播放等丰富的滚动动效

文章URL：

https://tympanus.net/codrops/2026/04/06/building-the-maxima-therapy-website-react-gsap-and-dabbling-with-ai/

Codrops

Building the Maxima Therapy Website: React, GSAP, and Dabbling with AI | Codrops

A behind-the-scenes look at how we built Maxima Therapy with playful interactions, creative code, and a little AI help along the way.

《从基础学科到通用人工智能：25学科知识地图》

标签：#AI教育 #知识图谱 #AGI #跨学科学习 #深度学习 #机器学习 #强化学习 #认知科学 #DataWhale

总结：
这是一份由DataWhale社区维护的AI跨学科知识导航页，将支撑通用人工智能的25门基础学科按数学、计算、认知、决策、物理哲学五大簇组织，并提供多条能力形成路径（表示训练、结构关系、智能体控制、自然智能与AGI），帮助学习者从"学科目录"走向"能力路径"，降低跨学科学习成本，避免在庞杂专题中迷路。

文章要点：
- AI本质是跨学科汇流系统，从1943年McCulloch-Pitts神经元到2022年后大模型与Agent，历史脉络清晰展示了数学、工程、认知、哲学等学科的交汇
- 25门学科被系统分为五大簇：数学与形式基础（概率/线代/优化/信息论等）、计算与系统工程（数值分析/控制论/硬件并行等）、认知生物与语言（神经科学/心理学/语言学等）、决策交互与社会机制（运筹学/博弈论/经济学）、物理与哲学基础（统计物理/哲学）
- 提供了五条能力形成路径：表示与训练、结构与关系、不确定性与因果、控制与智能体、自然智能与AGI，让学习围绕"能力如何长出来"而非"学科如何分类"来组织
- 针对不同目标读者定制了四条入门路线：机器学习/深度学习、结构化AI/图学习、强化学习/智能体、推理/AGI，并精选10个优先专题作为"最短抓手"
- 核心定位是"导航页"而非"正文替代者"，强调通过横向跳转、反向链接和跨学科汇流点来提升学习效率，避免线性单学科推进

文章URL：https://github.com/datawhalechina/Path2AGI

GitHub

GitHub - datawhalechina/Path2AGI: 从基础学科到通用人工智能 - 跨学科知识图谱

从基础学科到通用人工智能 - 跨学科知识图谱. Contribute to datawhalechina/Path2AGI development by creating an account on GitHub.

《Optique：TypeScript 类型安全的 CLI 解析器》

标签：#CLI #TypeScript #ShellCompletion #ParserCombinator #NodeJS #Deno #Bun

总结：
Optique 是一款面向 TypeScript 的类型安全 CLI 解析器库，灵感源自 Haskell 的 optparse-applicative 与 TypeScript 的 Zod。它采用函数式组合子（combinator）架构，通过组合小型类型安全解析器构建复杂 CLI，TypeScript 自动推断解析结果类型。支持标志、选项、子命令、选项间依赖、环境变量绑定、交互式提示、配置文件集成、Shell 补全及 man 手册生成，并可在 Deno、Node.js 与 Bun 上运行。1.0.0 版本新增 @optique/env 环境变量包与 @optique/prompt 交互式提示包，同时修复了 Shell 补全、帮助输出与值解析中的数百项问题 。

文章要点：
- 类型安全组合子架构：用函数式组合子拼装小型解析器，TypeScript 自动推断解析结果类型，编译时保证安全，解析器结构本身即运行时校验规则 。
- 零重复定义的智能 Shell 补全：支持 Bash、zsh、fish、PowerShell、Nushell 五大 Shell，补全逻辑直接复用解析器结构，无需额外维护补全定义，选项、参数与 choice() 值自动同步 。
- 灵活的集成扩展：提供 @optique/env 环境变量回退、@optique/config 配置文件级联、@optique/prompt 交互式提示、@optique/zod 与 @optique/valibot 桥接，以及 @optique/temporal 日期时间解析等生态包 。
- 1.0 正式版成熟稳定：2026 年 4 月发布的 1.0.0 完成 API 清理，新增 fail<T>() 解析器、validateValue() 校验、normalize() 规范化与细粒度 hidden 控制，并修复了数百项补全、帮助与解析问题 。

文章URL：https://optique.dev/

optique.dev

Type-safe combinatorial CLI parser for TypeScript

《OpenAI Agents SDK：轻量级多智能体工作流框架》

标签：#AI #多智能体 #Python #OpenAI #MCP #智能体工作流 #LLM #实时语音 #沙箱环境

总结：
OpenAI Agents SDK 是一个轻量但功能强大的 Python 框架，用于构建多智能体工作流。它支持 OpenAI 的 Responses 和 Chat Completions API，同时兼容 100 多种其他 LLM，具有供应商无关性。框架围绕"智能体"这一核心概念展开，每个智能体都配备指令、工具、护栏和交接机制，让复杂任务可以像搭积木一样拆解协作。

文章要点：
- 智能体是核心乐高积木：每个智能体都自带"说明书"（指令）、"工具箱"（函数/MCP/托管工具）和"安全护栏"（输入输出校验），还能互相"交接"任务，像团队协作一样分工处理复杂流程
- 沙箱智能体让AI真正"动手干活"：0.14.0 版本新增的 Sandbox Agent 能在容器环境里操作文件系统、运行命令、打补丁，适合需要长时间执行且要保留工作状态的"重体力"任务
- 人在回路，安全可控：内置了人类介入机制，在关键节点可以暂停流程等人来确认，避免AI"自作主张"搞出大新闻
- 全链路可观测：自带 Tracing 追踪系统，能可视化查看每个智能体的思考过程、工具调用耗时和 Token 消耗，方便调试和优化
- 不挑模型，兼容百家：虽然是 OpenAI 出品，但设计上保持中立，支持接入 100+ 种 LLM，包括通过 LiteLLM 等适配层接入国产模型
- 实时语音也能玩：支持用 gpt-realtime-1.5 构建语音智能体，把实时语音能力也纳入多智能体协作体系

文章URL：https://github.com/openai/openai-agents-python

GitHub

GitHub - openai/openai-agents-python: A lightweight, powerful framework for multi-agent workflows

A lightweight, powerful framework for multi-agent workflows - openai/openai-agents-python

《基于Andrej Karpathy观察的Claude Code行为优化指南》

标签：#AI辅助编程 #ClaudeCode #LLM最佳实践 #代码质量

总结：该项目将Andrej Karpathy对LLM编程缺陷的观察转化为可落地的CLAUDE.md规范文件，通过"编码前思考、极简优先、精准修改、目标驱动"四大原则，系统性解决AI助手常见的过度假设、过度工程化和无关修改等问题，帮助开发者获得更精准、简洁、可控的AI编程辅助体验。

文章要点：
- 问题诊断：LLM常犯的错误包括擅自假设却不验证、过度复杂化代码、擅自修改无关代码等，Karpathy一针见血地指出了这些痛点
- 编码前思考原则：不确定时要主动提问而非猜测，有歧义时呈现多种解读，该拒绝时要敢于说"这样更简单"
- 极简优先原则：只做被明确要求的功能，不为单用场景造抽象，不把200行代码写成50行就算过关
- 精准修改原则：只碰该碰的代码，不动"看起来不顺眼"的邻居代码，自己的烂摊子自己收拾，但别碰别人留下的
- 目标驱动原则：把"加个验证"改成"写测试让非法输入失败，再让它通过"，给AI明确的验收标准，它会自己循环到达标
- 使用方式：支持Claude Code插件一键安装，或下载CLAUDE.md文件到项目根目录，Cursor用户也有对应规则文件可用
- 取舍提醒：这套规范偏向谨慎而非速度，简单改错别字不必上全套，但复杂任务能帮你避开返工噩梦

文章URL：https://github.com/forrestchang/andrej-karpathy-skills

GitHub

GitHub - forrestchang/andrej-karpathy-skills: A single CLAUDE.md file to improve Claude Code behavior, derived from Andrej Karpathy's…

A single CLAUDE.md file to improve Claude Code behavior, derived from Andrej Karpathy's observations on LLM coding pitfalls. - forrestchang/andrej-karpathy-skills

《Claude架构图生成器：AI一键绘制专业系统架构图》

标签：#AI工具 #Claude_Skill #架构可视化 #开发效率 #系统架构图

总结：
这是一款专为Claude AI设计的Skill工具，让用户只需用自然语言描述系统架构，即可生成精美的暗色系专业架构图。输出为独立的HTML/SVG文件，无需任何设计技能或额外软件，适合快速迭代和团队协作分享。

文章要点：
- 零门槛使用：不需要设计基础，用大白话描述系统组件和连接关系，Claude就能帮你画出专业级架构图
- 多种输入方式：可以让AI分析代码库自动生成描述，也可以自己手写组件列表，还能直接问Claude要典型架构模板
- 精美视觉风格：采用暗色主题（Slate-950背景），组件按类型着色（前端青色、后端翠绿、数据库紫色、云服务琥珀色），自带网格底纹和JetBrains Mono字体
- 独立文件输出：生成单个HTML文件，内嵌CSS和SVG，任何浏览器都能直接打开，方便分享、打印或嵌入文档
- 实时迭代优化：生成后可以继续在对话中要求修改，比如"加上Redis缓存"或"调整布局"，Claude会即时更新图表
- 多平台安装：支持Claude.ai网页版（Pro/Max/Team/Enterprise）、Claude Code CLI、以及Projects知识库三种方式
- 丰富示例覆盖：内置Web应用（React+Node+PostgreSQL）、AWS无服务器（Lambda+API Gateway）、微服务（K8s+多语言服务）等典型场景模板

文章URL：https://github.com/Cocoon-AI/architecture-diagram-generator

GitHub

GitHub - Cocoon-AI/architecture-diagram-generator: Generate beautiful dark-themed system architecture diagrams as standalone HTML/SVG…

Generate beautiful dark-themed system architecture diagrams as standalone HTML/SVG files. Works as a Claude AI skill. - Cocoon-AI/architecture-diagram-generator

《在本地终端预览OpenGraph卡片》

标签：#前端 #OpenGraph #CLI工具 #Zig #Kitty图形协议 #开发工具

总结：
作者为解决OpenGraph调试痛点，开发了CLI工具og-check，可直接在终端内渲染本地开发环境的OG卡片预览，无需部署到公网或使用隧道服务。工具基于Zig编写，支持Kitty图形协议在终端内显示图片，并提供OpenGraph、Twitter Card、表格和JSON四种输出格式，同时可作为CI检查工具确保OG标签完整性。

文章要点：
- 传统OG调试流程繁琐：需要部署到公网或使用隧道工具，且Facebook等平台的调试器缓存机制会导致反复迭代困难
- og-check支持在本地终端直接预览OG卡片，包含图片渲染，将反馈周期从分钟级缩短到秒级
- 终端图片渲染基于Kitty图形协议，兼容Ghostty、iTerm2、WezTerm等主流终端，不支持的终端会自动降级为文本输出
- 工具内部使用Zig的std.http.Client抓取页面，解析meta标签并按命名空间分类（og:、twitter:等），通过zigdown渲染Markdown到终端
- 提供四种输出模式：OpenGraph预览（默认）、Twitter Card预览、表格视图、JSON格式，后者支持管道操作（如配合jq使用）
- 具备校验功能：当缺少必需的OG字段（title、type、image、url）时会输出错误并返回非零退出码，适合集成到CI流程作为布局模板检查
- 安装方式灵活：支持预编译二进制、源码编译（Zig 0.15+）和mise工具管理

文章URL：https://simonhartcher.com/posts/2026-04-15-testing-opengraph-on-localhost-from-the-cli/

Simon Hartcher

Testing OpenGraph on localhost from the CLI before you go public | Simon Hartcher

og-check fetches a URL and renders its OpenGraph and Twitter Card metadata directly in your terminal, images and all. Point it at localhost and skip the tunnel.

《用TanStack_Start构建博客（上篇）》

标签：#前端 #TanStack_Start #TanStack_Router #Server_Functions #静态预渲染 #Markdown博客 #代码高亮

总结：
本文通过实战案例演示如何使用 TanStack Start 框架构建一个 Markdown 博客系统。文章重点介绍了 Server Functions 解决同构加载器无法访问文件系统的问题、动态路由参数处理、以及使用 markdown-it 和 Shiki 实现带行号的高亮代码块，为开发者提供了完整的技术实现路径。

文章要点：
- TanStack Start 是基于 TanStack Router 的轻量级服务端框架，支持 SSR、API 端点和 Server Functions
- 使用 import.meta.glob 动态扫描 Markdown 文件，配合 gray-matter 解析文章元数据
- Server Functions 是同构应用的关键——无论 loader 在服务端还是客户端运行，都能保证文件读取逻辑始终在服务端执行
- 动态路由通过 $slug.tsx 文件命名实现，配合 createFileRoute 和 head 函数设置页面标题
- 使用 markdown-it + Shiki 实现代码高亮，通过自定义 transformer 支持 line-numbers 语法标记，结合 CSS counter 渲染行号
- 文章预告下篇将介绍静态生成和部署策略

文章URL：https://frontendmasters.com/blog/building-a-blog-in-tanstack-part-1-of-2/

Frontend Masters

Building a Blog in TanStack (Part 1 of 2)

TanStack Start is one of the newest web frameworks, and its popularity is rising quickly. Start is a thin server-side layer that sits atop TanStack Router and provides features like server functions, API endpoints, and server-side rendering. I wrote a three…

上面的的垂直文件组织方式去年就在实践，尤其是Agent编程下，内聚每个业务模块的工具到当前业务文件夹。

《垂直代码库：告别按类型分层，拥抱按业务域组织》

标签：#前端 #代码组织 #架构设计 #Monorepo #React #软件工程

总结：

本文主张前端代码库应从"水平分层"（按 components/hooks/utils 技术类型划分）转向"垂直切片"（按业务域/功能域组织）。作者以 Sentry 代码库十年演进为例，指出水平分层会导致代码分散、认知负荷高、耦合混乱；而垂直组织将同一业务域的组件、工具、类型内聚到一起，配合 Monorepo 的显式边界（exports/eslint-plugin-boundaries），能显著提升可维护性。虽然确定正确的垂直划分需要更多团队沟通，但这是支撑代码库长期演进的必要投资。

文章要点：

- 水平分层的隐患：把代码按 components / hooks / utils / types 分类虽然上手简单，但随着项目膨胀，同一业务逻辑会被拆得七零八落——比如 PageFilters 的组件、类型、工具函数散落在三个目录，改一个小需求要跳来跳去， cognitive load 直接拉满
- 垂直切片的核心思想：不按"技术类型"而按"业务域"分组，把同一个功能域（如 dashboard、profiling、billing）相关的组件、Hook、工具、类型全部收进一个目录；就像当年我们把 HTML/CSS/JS 从三层文件合并成组件一样，这次是更高维度的"关注点内聚"
- 与团队结构天然对齐：现代产品团队通常是端到端的功能团队（dashboard 团队、replay 团队），垂直代码结构让 CODEOWNERS 和包边界直接对应团队职责，谁负责什么一目了然
- 解决跨域复用焦虑：不是所有代码都严格属于某个页面，像 PageFilters 这种被多页面使用的通用能力，完全可以作为独立垂直域存在；关键是按"逻辑关联"而非"物理位置"来划分
- 用边界守护架构：垂直化后还需降低耦合，推荐通过 Monorepo + package.json#exports 显式暴露公共 API，或借助 eslint-plugin-boundaries 禁止深路径导入，把"私有实现"真正保护起来
- 没有银弹，但值得投入：确定合理的垂直域确实比"丢进 utils"更难，也可能出现不同团队重复造轮子；但作者认为这恰恰促进了团队沟通，而沟通本就是软件工程最难也最重要的部分

文章URL：

https://tkdodo.eu/blog/the-vertical-codebase

tkdodo.eu

The Vertical Codebase

Let's take a look at why the common, horizontal code structure is not ideal, where it breaks down, and what we can do about it.

卡片光效

https://www.npmjs.com/package/@stianlarsen/border-beam

Syncpack 是一个专门用于大型 JavaScript Monorepo 的命令行工具，用于强制保持跨包依赖版本一致性，支持自动检测、修复和格式化 package.json 文件。

https://syncpack.dev/

Syncpack

Consistent dependency versions in large JavaScript Monorepos

《嵌套Promise的实际用途》

标签：#JavaScript #Promise #并发控制 #RWLock #函数式编程

总结：

文章探讨了JavaScript中Promise自动扁平化设计的利弊。作者回顾了Promise/A+规范制定时关于是否引入Monad和Functor概念的争论，并通过实现读者-写者锁（RWLock）的实际案例，展示了嵌套Promise在并发控制中的独特价值——它能让一个异步函数调用另一个异步函数，却不阻塞等待内层函数完成，从而实现精细的并发管理。

文章要点：

- Promise的then()方法同时承担了Functor的map和Monad的flatMap功能，会自动扁平化任意层级的嵌套Promise
- 函数式编程社区曾希望Promise能区分map()和flatMap()，但规范作者出于便利性考虑拒绝了这一提议
- 作者在开发EscoDB时遇到了一个真实场景：实现读者-写者锁（RWLock）需要协调多个读操作并发执行、写操作独占执行
- 通过显式返回{ promise: Promise<T> }结构来"绕过"Promise自动扁平化，实现了关键功能：保护"检查队列状态"和"放入任务"这两个动作的原子性，同时又不阻塞调度器等待任务实际执行完成
- 嵌套Promise代表"一个异步函数调用另一个异步函数，但不等待其完成"的语义，在主动管理并发控制时非常有用
- Promise扁平化本质上是"时间上的连接"（强制顺序执行），而嵌套Promise则保留了并行调度的可能性

文章URL：https://blog.jcoglan.com/2026/03/23/uses-for-nested-promises/

《Karpathy把私藏的知识管理方法开源了：让LLM帮你维护Wiki，自己只管提问》

标签：#AI #知识管理 #LLM_Knowledge_Base #Personal_Wiki #Obsidian #RAG #Agent

总结：

Andrej Karpathy 分享了他用 LLM 管理个人知识库的方法：将原始资料放入只读目录，由 LLM 自动生成和维护结构化的 Wiki，再通过 Obsidian 查看。这套"摄入-查询-检查"工作流让他在小规模数据下无需 RAG 也能高效检索，更重要的是体现了 AI 时代的新范式——分享想法而非代码，让每个人的 Agent 按需实现。这对知识工作者如何从"操纵代码"转向"操纵知识"具有启发意义。

文章要点：

- **三层架构设计超清晰**：原始资料放在 raw/ 目录保持只读，LLM 自动读取并编译成结构化的 Wiki 文档，最后用 Obsidian 当查看器来展示。整套系统就像"原料→加工厂→展示厅"一样分工明确！

- **四个核心操作好懂又实用**：Ingest（新资料进来时 LLM 自动更新相关页面）、Query（日常提问让 LLM 去 Wiki 里搜索综合回答）、Lint（定期检查知识库有没有矛盾或遗漏）、Extra Tools（比如 vibe coding 的小搜索引擎）。整个知识库会越用越丰富~

- **为什么不用 RAG？Karpathy 的回答很实在**：他的知识库大约 100 篇文章、40 万字，在这个量级下 LLM 自己维护的索引和摘要已经够用了，不需要复杂的向量检索。Wiki 本身就是一种"压缩过的知识表示"

- **从"分享代码"到"分享想法"**：他把这套方法写成"idea file"公开，认为在 Agent 时代，清晰的思路比具体代码更有价值。每个人把自己的 Agent 叫来，照着这个想法文件就能搭出适合自己的版本

- **工作重心正在悄悄转移**：Karpathy 说他最近的 token 消耗从"写代码"大幅转向"操纵知识"。这对咱们知识工作者也是个信号——让 LLM 当长期的知识管家，而不只是临时问答工具，效率会更高呢！

文章URL：https://mp.weixin.qq.com/s/EoGLi067d_3huZf-X0Q6Fg