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 culprits 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 culprits 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 read the implementation on top of that foundation. 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.