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 ( + + + + + {children} + × + + + + ); +} +``` + +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 + + +

...

+
+``` + +```js +document.querySelector("dialog").showModal(); +``` + +**1 dependency + portal/overlay machinery → 0 dependencies + a ``.** +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 ""`, +then `modern-web retrieve `. 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.