sanfu

When you have an agent write code for you, you sometimes get back more than you asked for. Ask for a date input and it installs flatpickr, writes a wrapper component, adds a stylesheet, and opens a discussion about time zones. Something that works comes out, but the amount to read and the amount to maintain both grow.

ponytail is a ruleset for curbing that behavior. Dietrich Gebert publishes it under the MIT license, and in the three months since its release on June 12, 2026 it has reached 132,417 stars and 7,085 forks (figures as of September 9, 2026). Its version as a Claude Code plugin is 4.9.0. The GitHub repository description reads: "Make your AI agent think like the laziest senior developer in the room. The best code is the code you didn't write."

When I audited this site's (notes.rewheel.dev) SEO, the technical items were almost a perfect score. The sitemap, robots.txt, canonical, OGP, and JSON-LD were all in place, and the Lighthouse SEO score was 100 on every page. Yet only Performance was stuck at 58-63.

As I dug in, what was dragging it down were two of the Core Web Vitals — LCP (loading speed) and CLS (layout shift). And the causes were in different places than I first suspected. LCP was how the Japanese Web font was loaded; CLS was not the body images but the header logo. This article is a record of pinpointing those causes by measurement and fixing them without adding measures that do not work.

When you open the top page of this site, "Reinvent Notes," a car running across the screen catches your eye. It is a key visual I built from scratch for the Docusaurus hero: I componentized SVG line art with React and drive the tire rotation and the background parallax entirely with CSS.

I used no flashy animation library — just svgr (bundled with Docusaurus) and pure CSS. It also follows the theme's light / dark switch, and for people who have prefers-reduced-motion enabled, it shows a still image.

I wrote this article with the goal that even someone who just started Web development can follow it to the end. So I explain from the basics, in order — "what is an SVG," "what is viewBox," "what is CSS mask" — and then read the implementation. It gets long, but I broke down each mechanism so it makes sense, so feel free to skip to whichever chapter interests you.

Once you start adopting Claude Code at work, there comes a stage where even reading the official documentation makes it hard to see "what to adopt next" and "which one fits my level." The features Anthropic itself ships exceed 30 kinds; the workflows the community publishes number 12 or more; and the tips from Claude Code's developers like Boris Cherny and Thariq are scattered across 80-plus.

What helps organize that is shanraisshan/claude-code-best-practice, which won GitHub Trending #1 in March 2026. It is a repository published and continuously updated under the MIT license by Shayan Raisshan (organizer of the Claude Pakistan community, a Claude Community Ambassador). As of this writing (May 25, 2026), it is a curation collection with 445 files and a 585-line README.

I changed this blog's domain from notes.rasshii.dev to notes.rewheel.dev. I also renamed the site from "Tech Notes" to "Reinvent Notes", with the tagline "Learn by reinventing the wheel."

"I upgraded the model to the latest version, but it still repeats the same mistakes." "No matter how I tune the prompt, I hit a wall somewhere." When you try to put an AI agent to work, you always run into this wall. In many cases this is not a problem with the model itself; it stems from the design quality of the environment surrounding the model (= the harness). In this post I organize the idea of harness engineering — which was rapidly systematized starting in February 2026 — together with configuration examples from my own ~/.claude/ directory.

I started this blog. I will keep sharing personal technical notes, built with Docusaurus + Vercel.