How They Built It — Development skill for Claude Code
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
- Skill Creator — Create new skills, modify existing skills, and measure skill performance 94.1k ★
- Fidelity — Measure how faithfully a clone reproduces a site — pixel-diff plus motion-fidelity into one 0-100 score, a let 3.6k ★
- Evo — turns your codebase into an autoresearch loop — discovers what to measure, instruments the benchmark, then run 1.4k ★
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:
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
Related Skills
No Fluff
Claude Skill that makes Claude answer like a busy operator: verdict first, one screen, real numbers, one next
Token Consumer
Measure and shrink the token cost of Claude Code skills, tier by tier: the always-on system-prompt tax, the pe
Benchmark Rerankers
Measure whether adding a reranker actually improves retrieval, by scoring reranked vs. un-reranked results on
Skill Usage Counter
Measure which Claude Code/Codex skills you actually invoke. Hook + backfill + report; privacy-safe.
Claimcheck Agents
List the coding agents claimcheck can measure, and what has actually been verified
18
Build a fullscreen loading screen component in React (Next.js 14, TypeScript). Uses Framer Motion for animatio
Related Agents
Session Replay
Visual session inspector — opens a session, views screenshots at key timestamps, diffs before/after states, an
Design Motion
Motion / Action Designer on the Atlas bench. Combines physical feel, interruption continuity, distance-aware t
Motion Auditor
Load when the user asks about animation timing, easing, springs, transitions, gestures, stagger, or "this feel
