Liad YosefandClaude
fe963cae99
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>
65 lines
2.0 KiB
Markdown
65 lines
2.0 KiB
Markdown
# 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.
|