Files

T

Liad YosefandClaude fe963cae99 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>

2026-06-19 00:26:36 +02:00

2.0 KiB

Raw Blame History

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 on hand, rung 3 gets a lookup: modern-web search "modal dialog light dismiss".

Without Ponytail

npm install @radix-ui/react-dialog

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:

<!-- ponytail: <dialog> + closedby, browser does the backdrop, focus trap, and Esc -->
<dialog closedby="any">
  <p>...</p>
</dialog>

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.

2.0 KiB Raw Blame History Unescape Escape

Web Platform Lookup

Without Ponytail

With Ponytail

The point

2.0 KiB

Raw Blame History