From fe963cae99d986dae3199fe56403f99e87db7c6c Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Fri, 19 Jun 2026 01:26:36 +0300
Subject: [PATCH] Add Modern Web Guidance as the rung-3 lookup for web tasks
 (#82)

Scoped, optional reference to Modern Web Guidance so the agent can look
up native platform features on web work, filling the gap at rung 3 of
the ladder. Three additive changes, no compact-ruleset surgery:

- skills/ponytail/SKILL.md: "Web tasks: rung 3 lookup" section after the
  ladder. Runtime source only, not byte-compared, so no six-file sync.
- README.md: one "Pairs well with" line, matching the Caveman pattern.
- examples/web-platform-lookup.md: a <dialog closedby> vs Radix
  before/after in the date-picker.md style.

Lookup, not license: MWG suggests, the ladder filters. Absent CLI
changes nothing. No new INVARIANT phrase; rule-copy check stays green.

Co-authored-by: Claude <noreply@anthropic.com>
---
 README.md                       |  2 ++
 examples/web-platform-lookup.md | 64 +++++++++++++++++++++++++++++++++
 skills/ponytail/SKILL.md        | 10 ++++++
 3 files changed, 76 insertions(+)
 create mode 100644 examples/web-platform-lookup.md

diff --git a/README.md b/README.md
index 1c95619..5145b91 100644
--- a/README.md
+++ b/README.md
@@ -42,6 +42,8 @@ With ponytail:
 
 More survivors in [examples/](examples/).
 
+> **Pairs well with** [Modern Web Guidance](https://github.com/GoogleChrome/modern-web-guidance) for web work: ponytail decides *whether* to lean on the platform, MWG is how the agent looks up *which* native feature does the job. See [examples/web-platform-lookup.md](examples/web-platform-lookup.md).
+
 ## Numbers
 
 The honest measurement is a real agent doing real work: a headless Claude Code session editing [tiangolo's full-stack-fastapi-template](https://github.com/fastapi/full-stack-fastapi-template) (a real FastAPI + React repo), scored on the `git diff` it leaves behind. Twelve feature tickets, the same agent with and without the skill, n=4, Haiku 4.5.
diff --git a/examples/web-platform-lookup.md b/examples/web-platform-lookup.md
new file mode 100644
index 0000000..135fea0
--- /dev/null
+++ b/examples/web-platform-lookup.md
@@ -0,0 +1,64 @@
+# Web Platform Lookup
+
+**Task:** "Add a modal dialog that closes when you click the backdrop."
+
+Rung 3 of the ladder is "native platform feature covers it?" On web work the
+trap is that the agent forgets what the platform already does and reaches for a
+library. When ponytail has [Modern Web Guidance](https://github.com/GoogleChrome/modern-web-guidance)
+on hand, rung 3 gets a lookup: `modern-web search "modal dialog light dismiss"`.
+
+## Without Ponytail
+
+```bash
+npm install @radix-ui/react-dialog
+```
+
+```jsx
+import * as Dialog from "@radix-ui/react-dialog";
+
+export default function Modal({ open, onOpenChange, children }) {
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="overlay" />
+        <Dialog.Content className="content">
+          {children}
+          <Dialog.Close className="close">×</Dialog.Close>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+```
+
+A dependency, a portal, an overlay node, and controlled open state, to put a
+box on top with a backdrop.
+
+## With Ponytail
+
+`modern-web search "modal dialog light dismiss"` →
+`modern-web retrieve light-dismiss-a-dialog`. The platform has it:
+
+```html
+<!-- ponytail: <dialog> + closedby, browser does the backdrop, focus trap, and Esc -->
+<dialog closedby="any">
+  <p>...</p>
+</dialog>
+```
+
+```js
+document.querySelector("dialog").showModal();
+```
+
+**1 dependency + portal/overlay machinery → 0 dependencies + a `<dialog>`.**
+The `::backdrop` is free, focus is trapped and restored for you, `Esc` closes
+it, and `closedby="any"` adds click-outside dismissal. The browser team did the
+work.
+
+## The point
+
+MWG suggests the cutting edge, ponytail keeps only the rung that holds. The
+lookup found `light-dismiss-a-dialog`; the ladder took it because it deletes a
+dependency. The same search would have offered scroll-driven animations and
+view transitions for other tasks, and the ladder would have skipped them when
+the task didn't need them. Lookup, not license.
diff --git a/skills/ponytail/SKILL.md b/skills/ponytail/SKILL.md
index 0e473d1..ef47607 100644
--- a/skills/ponytail/SKILL.md
+++ b/skills/ponytail/SKILL.md
@@ -40,6 +40,16 @@ Stop at the first rung that holds:
 The ladder is a reflex, not a research project. Two rungs work → take the
 higher one and move on. The first lazy solution that works is the right one.
 
+## Web tasks: rung 3 lookup
+
+On web work, rung 3 is where the laziest win hides: a native element or CSS
+behavior the agent forgot exists. If a web task turns on whether the platform
+covers it (a date input, dialog, popover, view transition, container query),
+and the `modern-web` CLI is available, look it up: `modern-web search "<task>"`,
+then `modern-web retrieve <id>`. It is a lookup, not a license, the answer
+still goes through the ladder. MWG suggests the cutting edge; you keep only the
+rung that holds. Not installed? Skip it, the ladder runs fine without it.
+
 ## Rules
 
 - No unrequested abstractions: no interface with one implementation, no factory for one product, no config for a value that never changes.