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>
This commit is contained in:
Liad Yosef
2026-06-19 00:26:36 +02:00
committed by GitHub
co-authored by Claude
parent b0c5820bb1
commit fe963cae99
3 changed files with 76 additions and 0 deletions
+2
View File
@@ -42,6 +42,8 @@ With ponytail:
More survivors in [examples/](examples/). 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 ## 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. 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.
+64
View File
@@ -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.
+10
View File
@@ -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 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. 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 ## Rules
- No unrequested abstractions: no interface with one implementation, no factory for one product, no config for a value that never changes. - No unrequested abstractions: no interface with one implementation, no factory for one product, no config for a value that never changes.