EmerikoandClaude Opus 4.8
88431defba
Swap em dashes for commas/colons/periods in the README, skills, AGENTS.md and its five rule copies, examples, command files, and benchmark README. Rule copies stay in sync (same edit applied to all) and the invariant guard passes. Left untouched on purpose: the vendored caveman SKILL.md (verbatim third-party text), the dated benchmark writeups in results/ (historical records), and .js code comments. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
49 lines
1.2 KiB
Markdown
49 lines
1.2 KiB
Markdown
# Date Picker
|
|
|
|
**Task:** "Add a date picker to this form."
|
|
|
|
## Without Ponytail
|
|
|
|
```bash
|
|
npm install flatpickr
|
|
```
|
|
|
|
```jsx
|
|
import flatpickr from "flatpickr";
|
|
import "flatpickr/dist/flatpickr.min.css";
|
|
import { useEffect, useRef } from "react";
|
|
|
|
export default function DatePicker({ value, onChange, minDate, maxDate }) {
|
|
const inputRef = useRef(null);
|
|
const instanceRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
instanceRef.current = flatpickr(inputRef.current, {
|
|
defaultDate: value,
|
|
minDate,
|
|
maxDate,
|
|
dateFormat: "Y-m-d",
|
|
onChange: ([date]) => onChange(date),
|
|
});
|
|
return () => instanceRef.current?.destroy();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
instanceRef.current?.setDate(value, false);
|
|
}, [value]);
|
|
|
|
return <input ref={inputRef} className="date-picker" />;
|
|
}
|
|
```
|
|
|
|
One dependency, one wrapper component, two `useEffect` hooks, a cleanup function, and a CSS import, to pick a date.
|
|
|
|
## With Ponytail
|
|
|
|
```html
|
|
<!-- ponytail: browser has one -->
|
|
<input type="date">
|
|
```
|
|
|
|
**1 dependency + 30 lines → 0 dependencies + 1 line.** Native, accessible, localized, keyboard-navigable, mobile-friendly. The browser team already did the work.
|