@WillNessAI:我基于 @mattpocockuk 的 grilling 技能构建了一个专注于前端的变体,它改善了我构建新应用和……

X AI KOLs Timeline 工具

摘要

WillNessAI 为 Claude 构建了一个专注于前端的 Matt Pocockock 的 grilling 技能变体,支持多种变体的快速原型设计和迭代反馈,并将其集成到他的 Wayfinder 工作流中。

我构建了 @mattpocockuk 的 grilling 技能的一个变体,专注于前端,它改善了我构建新应用和组件的方式。 一般思路: 1. 以 /grilling 和 /prototype 为基础 2. 告诉 Claude 构建 5 个截然不同的原型 3. 告诉 Claude 包含一个选择器,让你可以实时切换每个变体 4. 每轮你选择你最喜欢的(一个或多个)并留下反馈,然后 Claude 会沿着设计树的每个分支深入,帮助你聚焦到想要的设计 然后,我将其添加到了 /wayfinder 中,所以每当我创建一个新地图并且有新颖的前端工作时,就会创建一个工单,专门引用需要调用 /grilling-frontend-prototyping。 这不会是我最后一次构建酷炫技能并将其添加到 Wayfinder;这是一个非常强大的规划工作模式。 你可以在这里找到我的技能:https://github.com/will-ness-ai/skills/blob/main/skills/engineering/grilling-frontend-prototyping/SKILL.md…
查看原文
查看缓存全文

缓存时间: 2026/07/16 22:23

我构建了 @mattpocockuk 的“审问(grilling)”技能的一个变种,专门用于前端开发,这改善了我构建新应用和组件的方式。总体思路:1. 以 /grilling/prototype 为基础 2. 让 Claude 构建 5 个截然不同的原型 3. 让 Claude 包含一个选择器,让你能在各个变体之间实时切换 4. 每轮你选择最喜欢的一个(或多个)并留下反馈,然后 Claude 会沿着设计树的每个分支走下去,帮你聚焦到想要的设计。然后,我还把它加到了 /wayfinder 里,所以每当我创建新的地图(map)且有新的前端工作时,就会自动创建一个工单,专门引用 /grilling-frontend-prototyping 需要被调用。这不会是我最后一次构建酷技能并加到 Wayfinder 里;这是一个非常强大的规划工作模式。你可以在这里找到我的技能:https://github.com/will-ness-ai/skills/blob/main/skills/engineering/grilling-frontend-prototyping/SKILL.md…


will-ness-ai/skills

来源:https://github.com/will-ness-ai/skills

面向真正工程师的技能

skills.sh (https://skills.sh/mattpocock/skills)

我每天用于真正工程工作的 agent 技能——不是“氛围编码”。开发真正的应用很难。像 GSD、BMAD 和 Spec-Kit 这类方法试图通过掌握流程来帮忙,但这样做反而剥夺了你的控制权,并且让流程中的漏洞难以解决。这些技能设计得小巧、易于调整且可组合。它们适用于任何模型。它们基于数十年的工程经验。随意摆弄它们,让它们变成你自己的。享受吧。

如果你想随时了解这些技能的更新以及我创建的任何新技能,可以加入大约 60,000 名开发者的邮件列表: 订阅新闻简报 (https://www.aihero.dev/s/skills-newsletter)

快速入门(30 秒设置)

  1. 运行 skills.sh 安装器:
    npx skills@latest add mattpocock/skills
    
  2. 选择你想要的技能,以及你想将它们安装到哪个编码 agent 上。确保你选择了 /setup-matt-pocock-skills
  3. 在你的 agent 中运行 /setup-matt-pocock-skills。它会:
    • 询问你想使用哪个问题跟踪器(GitHub、Linear 或本地文件)
    • 询问你分流(/triage)工单时会应用哪些标签(标签使用)
    • 询问你希望将创建的任何文档保存在哪里
  4. 搞定——你就可以开始了。

安装为 Claude Code 插件

更喜欢即插即用、无需手动维护的安装方式?这些技能也作为原生 Claude Code 插件 (https://code.claude.com/docs/en/plugins) 提供。不再将可编辑文件复制到你的仓库中,而是将整个技能集作为托管包安装,当我发布新版本时它也会自动更新——你订阅而不是复刻。

在 Claude Code 中:

/plugin marketplace add mattpocock/skills
/plugin install mattpocock-skills@mattpocock

或者从你的 shell 中:

claude plugin marketplace add mattpocock/skills
claude plugin install mattpocock-skills@mattpocock

然后,像快速入门中一样,每个仓库运行一次 /setup-matt-pocock-skills

两种安装方式,两种理念:

  • skills.sh (https://skills.sh/mattpocock/skills):将技能复制到你的项目中,以便你可以修改它们,让它们完全属于你自己。
  • 插件:将它们作为只读、始终最新的包保留,你不能编辑——当你只想用我的默认配置并跟随其演进时,这是最佳选择。

使用 Codex 或其他 agent?skills.sh 安装器 (https://skills.sh/mattpocock/skills) 今天已经可以将这些技能安装到 Codex 和其他遵循 Agent-Skills 标准的 harness 中。原生 Codex 插件正在计划中——参见 .agents/adr/0002-ship-as-a-claude-code-plugin.md

为什么会有这些技能

我构建这些技能是为了解决我在 Claude Code、Codex 和其他编码 agent 中常见的失败模式。

#1:Agent 没有做我想要的事情

“没有人确切知道他们想要什么”

— David Thomas & Andrew Hunt,《程序员修炼之道》 (https://www.amazon.co.uk/Pragmatic-Programmer-Anniversary-Journey-Mastery/dp/B0833F1T3V)

问题:软件开发中最常见的失败模式是目标不一致。你以为开发者知道你想要什么,然后你看到他们构建的东西——才发现它完全没理解你的意思。在 AI 时代也是如此。你和 agent 之间存在沟通鸿沟。解决方案是审问环节——让 agent 详细询问你正在构建的内容。

解决方案:使用:

这些是我最受欢迎的技能。它们帮助你在开始之前与 agent 对齐,并深入思考你正在做的变更。每次你想要做一个变更时都使用它们。

#2:Agent 过于啰嗦

“使用通用语言(ubiquitous language),开发者之间的对话以及代码的表达都源自同一个领域模型。”

— Eric Evans,《领域驱动设计》 (https://www.amazon.co.uk/Domain-Driven-Design-Tackling-Complexity-Software/dp/0321125215)

问题:项目开始时,开发者与构建软件的最终用户(领域专家)通常使用不同的语言。我也在与我的 agent 之间感受到了同样的张力。Agent 通常被直接丢进项目,然后要求它们边做边弄懂行话,因此它们用 20 个词来说本来 1 个词就能说清楚的事。

解决方案:共享语言。它是一个帮助 agent 解码项目行话的文档。

示例: 这里有一个来自我的 course-video-manager 仓库的 CONTEXT.md (https://github.com/mattpocock/course-video-manager/blob/076a5a7a182db0fe1e62971dd7a68bcadf010f1c/CONTEXT.md) 示例。 哪种读起来更容易?

  • 之前:“当课程某个章节中的一课被‘实体化’(即被分配一个文件系统中的位置)时,会出现一个问题”
  • 之后:“实体化级联存在问题”

这种简洁性在每次会话中都会带来回报。这已经内置于 /grill-with-docs 中。它是一个审问会话,但帮助你和 AI 构建共享语言,并将难以解释的决策记录在 ADR 中。这有多强大难以用言语形容。这可能是这个仓库中最酷的技巧。试试看。

共享语言除了减少啰嗦之外,还有很多其他好处:

  • 变量、函数和文件的命名一致,使用共享语言
  • 因此,agent 更容易浏览代码库
  • agent 在思考上花费更少的 token,因为它拥有了更简洁的语言

#3:代码运行不起来

“始终迈出小而审慎的步伐。反馈速度是你的速度极限。永远不要承担过大任务。”

— David Thomas & Andrew Hunt,《程序员修炼之道》 (https://www.amazon.co.uk/Pragmatic-Programmer-Anniversary-Journey-Mastery/dp/B0833F1T3V)

问题:假设你与 agent 已经对齐了要构建的内容。如果 agent 仍然产出垃圾怎么办?这时要审视你的反馈循环。如果没有反馈来验证它生成的代码实际运行如何,agent 就会像盲人一样飞行。

解决方案:你需要常规的反馈循环组合:静态类型、浏览器访问和自动化测试。对于自动化测试,红-绿-重构循环至关重要。这意味着 agent 首先编写一个失败的测试,然后修复测试。这有助于给予 agent 一致的反馈水平,从而产生更好的代码。

我已经构建了一个 /tdd 技能,可以插入任何项目。它鼓励红-绿-重构,并给予 agent 充分的指导,说明什么构成好的和坏的测试。

对于调试,我还构建了一个 /diagnosing-bugs 技能,将最佳调试实践封装成一个简单的循环。

#4:我们构建了一团泥球

每天都投资于系统的设计。”

— Kent Beck,《解析极限编程(第二版)》 (https://www.amazon.co.uk/Extreme-Programming-Explained-Embrace-Change/dp/0321278658) “最好的模块是深层的。它们允许通过简单的接口访问大量功能。”

— John Ousterhout,《软件设计哲学》 (https://www.amazon.co.uk/Philosophy-Software-Design-2nd/dp/173210221X)

问题:大多数使用 agent 构建的应用都复杂且难以修改。因为 agent 可以极大地加速编码,它们也加速了软件熵。代码库以前所未有的速度变得复杂。

解决方案是对 AI 驱动的开发采取一种激进的新方法:关心代码的设计。这已经内置到这些技能的每一层中:

  • /to-spec 在创建设计规格之前,询问你正在触碰哪些模块
  • 关键是,/improve-codebase-architecture 帮助你拯救一个已经变成泥球的代码库。我建议每几天在你的代码库上运行一次。

总结

软件工程基础比以往任何时候都更重要。这些技能是我将这些基础浓缩为可重复实践的最佳尝试,帮助你发布职业生涯中最好的应用。享受吧。

参考资料

这些技能在一个维度上区分:谁可以调用它们。 用户调用的技能只有在你输入时才能触发(例如 /grill-me);它们的工作是编排。 模型调用的技能可以由你调用,或者当任务适当时由 agent 自动调用;它们体现了可复用的纪律。 用户调用的技能可以调用模型调用的技能,但绝不能调用另一个用户调用的技能。

工程类技能

我日常用于代码工作。

用户调用

  • ask-matt —— 询问哪种技能或流程适合你的情况。一个路由,覆盖此仓库中所有用户调用的技能。
  • grill-with-docs —— 审问会话,同时构建你的项目领域模型,精炼术语并内联更新 CONTEXT.md 和 ADR。
  • triage —— 通过一个有状态机的分流角色来推动问题。
  • improve-codebase-architecture —— 扫描代码库寻找深化机会,以可视化 HTML 报告呈现,然后对你选择的任何一个进行审问。
  • setup-matt-pocock-skills —— 为此仓库配置工程技能(问题跟踪器、分流标签、领域文档布局)。每个仓库只运行一次,然后再使用其他工程技能。
  • to-spec —— 将当前对话转化为设计规格,并发布到问题跟踪器。无需访谈——仅综合你已经讨论过的内容。
  • to-tickets —— 将任何规划、设计规格或对话分解为一组跟踪子弹(tracer bullet)工单,每个工单声明其阻塞边——作为文本写入本地文件,或作为真实跟踪器上的原生阻塞链接。
  • implement —— 构建设计规格或工单集所描述的工作,在预先商定的 seam 处驱动 /tdd,并在提交前用 /code-review 收尾。
  • wayfinder —— 规划一大块工作(超过一个 agent 会话能容纳的范围),在问题跟踪器上形成一张由调研工单组成的共享地图——一次解决一个,直到通往目的地的路径变得清晰。

模型调用

  • prototype —— 构建一个一次性的原型来回答设计问题——对于状态/逻辑问题,是一个可运行的终端应用;或者对于 UI 问题,是几个从单个路由切换的截然不同的变体。
  • grilling-frontend-prototyping —— 通过多轮原型和审问裁决来收敛到前端外观——每轮在一个模拟应用中有 5 个变体,从整体外观向下走到单个组件,遍历可视化设计树。
  • diagnosing-bugs —— 针对硬 bug 和性能回归的纪律性诊断循环:复现 → 最小化 → 提出假设 → 插桩 → 修复 → 回归测试。
  • research —— 针对高信任度的主要来源调查一个问题,并将发现作为带有引用的 Markdown 文件捕获到仓库中,作为后台 agent 运行。
  • tdd —— 测试驱动开发,包含红-绿-重构循环。一次一个垂直切片地构建功能或修复 bug。
  • domain-modeling —— 主动构建并精炼项目的领域模型——对照词汇表挑战术语,使用边界用例进行压力测试,并内联更新 CONTEXT.md 和 ADR。
  • codebase-design —— 用于设计深层模块的共享纪律和词汇:大量行为通过小接口暴露,放置在干净的 seam 处,并通过该接口进行测试。
  • code-review —— 对自某个固定点以来的 diff 进行二维审查:标准(是否遵循仓库的编码标准,加上 Fowler 代码坏味基线?)和 规格(是否忠实地实现了源问题/PRD?),作为并行的子 agent 运行,以免互相污染。
  • resolving-merge-conflicts —— 逐块处理进行中的 git merge 或 rebase 冲突,通过追溯每边主要来源的意图来解决,然后完成操作——从不使用 --abort

生产力类技能

通用工作流工具,不特定于编码。

用户调用

  • grill-me —— 就一个规划或设计接受无休止的提问,直到决策树的每个分支都得到解决。
  • handoff —— 将当前对话压缩为交接文档,以便另一个 agent 继续工作。
  • teach —— 在多次会话中教授用户一项新技能或概念,使用当前目录作为有状态的教授工作空间。
  • writing-great-skills —— 编写和编辑优秀技能的参考:使技能可预测的词汇和原则。

模型调用

  • grilling —— 就一个规划、决策或想法无休止地采访用户,直到决策树的每个分支都得到解决。grill-megrill-with-docs 背后的可复用循环。

相似文章