@WillNessAI:我基于 @mattpocockuk 的 grilling 技能构建了一个专注于前端的变体,它改善了我构建新应用和……
摘要
WillNessAI 为 Claude 构建了一个专注于前端的 Matt Pocockock 的 grilling 技能变体,支持多种变体的快速原型设计和迭代反馈,并将其集成到他的 Wayfinder 工作流中。
查看缓存全文
缓存时间: 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 秒设置)
- 运行 skills.sh 安装器:
npx skills@latest add mattpocock/skills - 选择你想要的技能,以及你想将它们安装到哪个编码 agent 上。确保你选择了
/setup-matt-pocock-skills。 - 在你的 agent 中运行
/setup-matt-pocock-skills。它会:- 询问你想使用哪个问题跟踪器(GitHub、Linear 或本地文件)
- 询问你分流(
/triage)工单时会应用哪些标签(标签使用) - 询问你希望将创建的任何文档保存在哪里
- 搞定——你就可以开始了。
安装为 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 详细询问你正在构建的内容。
解决方案:使用:
/grill-me—— 用于非编码场景/grill-with-docs—— 与/grill-me相同,但添加了更多好东西(见下文)
这些是我最受欢迎的技能。它们帮助你在开始之前与 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-me和grill-with-docs背后的可复用循环。
相似文章
@mattpocockuk: /grill-me 是我最受欢迎的技能。我每天收到 5-10 条消息,说它如何改善了人们的工作流程...
Matt Pocock 宣布了他的热门技能 '/grill-me' 的改进版本,该技能改变了人们的工作流程,尽管他不再用它来编写代码。
@lastbtnotleast: 我刚刚发现了@mattpocockuk的技能仓库,对/grill-with-docs这个技能着迷了。我喜欢它的简洁性……
发现了Matt Pocock的技能仓库,重点介绍了用于AI工作流的/grill-with-docs技能,赞赏其简洁性,但指出从markdown文件中丢失了结构化数据的问题。
@mattpocockuk: 这里有一些非常聪明的想法:1. 使用 /wayfinder 作为自定义技能的协调器 2. 使用多阶段…
Matt Pocock 分享了关于使用 /wayfinder 作为自定义技能的协调器,以及使用多阶段原型设计方法(与 Claude 配合)来改进前端应用开发的想法。
@mattpocockuk: 重新措辞 /grill-me,使其现在真正可以在任何地方使用——不仅仅是工程领域。"设计树" -> "决策树" "每…
Matt Pocock 更新了 /grill-me 技能,通过将 'design tree' 等术语重新措辞为 'decision tree',使其超越工程领域可用。技能仓库为 AI 编码代理提供可组合的技能,以提升对齐度并减少冗余。
@mattpocockuk:我刚刚尝试并非常喜爱的一个工作流:1. 使用 /grill-with-docs,讨论一个新的 UI 功能 2. 它问我一个除非做原型开发否则无法回答的问题 …
Matt Pocock 分享了一个利用 Claude Code 的 /grill-with-docs 和 /prototype 命令的工作流,用于迭代 UI 设计,并在继续之前总结从原型开发中学到的经验。