DEOWL-kan

How They Built It — Development skill for Claude Code

Development community

You saw a screen you liked.

How to install How They Built It

This entry records only its repository, not the path inside it, so there is no exact command to give. Open DEOWL-kan/how-they-built-it and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What How They Built It does

You saw a screen you liked. Measure how it was actually built — asset types, motion timing, gradient structure, SDKs — and get numbers you can build from. A Claude Code / agents.md skill.

Alternatives in Development

Fidelity — Measure how faithfully a clone reproduces a site — pixel-diff plus motion-fidelity into one 0-100 score, a let 3.6k ★
Backpass — You don't write AGENTS.md 1.1k ★
18 — Build a fullscreen loading screen component in React (Next.js 14, TypeScript) 152 ★

README

how-they-built-it

**You saw a screen you liked. This measures how it was actually built, and hands you numbers you can build from.**

A [Claude Code](https://claude.com/claude-code) skill — and an [agents.md](https://agents.md) workflow for Codex, Cursor, Windsurf, Gemini CLI and the rest. The scripts are plain Python, so it also works with no agent at all.

[中文说明](README.zh-CN.md) · Android + web · MIT

Why not just look at it?

Looking gets you "it uses a big photo and soft light" — which nobody can build from, and which is **usually wrong**. A 2.7-second eased crossfade reads to the human eye as *"changes every 2.5 seconds with a 0.6-second fade."* That is a 4× error, and it went into a design document before anyone measured it.

You want to know	How it gets answered
Is that background a video, a Lottie, or five JPEGs?	The app package's asset inventory
How long is that transition, and what curve?	Per-frame difference over a screen recording
Does that gradient have grain, or can I just draw it in CSS?	Neighbour-pixel delta statistics
Where is the light actually centred?	Chroma peak on a downsampled grid
Will my text still pass contrast on it?	WCAG against the measured extremes
On-device or cloud? Which SDKs did they buy?	Native libs, hosts and API paths in the package

Anything that cannot be measured is labelled as inference. **That distinction is the whole point.**

What it looks like

Point it at a package and ask what a screen is made of:

apk_assets.py output: five bg_loop JPEGs under login, concluding the background is a crossfade not a video, plus a warning that onboarding and login assets are different screens

That background had been assumed to be video. Five JPEGs and a crossfade, about 1.2 MB — which changes the entire production plan. The shouting block at the bottom is the mistake this tool exists to preve