Competitor UI Teardown — Design skill for Claude Code

competitor-ui-teardown

**Reverse-engineer how a competitor's screen is actually built, and get specs you can hand to a designer.**

A [Claude Code](https://claude.com/claude-code) skill (also usable standalone — the scripts are plain Python).

[中文说明](#中文) · MIT

---

The problem

You see a screen in a competitor's app that looks expensive, and you want to know why.

Looking at it gets you "it uses a big photo and soft light" — which nobody can build from. Worse, **it's 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 straight into a design document before anyone measured it.

This skill measures instead of guessing:

Question	How it's answered
Is that background a video, a Lottie file, or five JPEGs?	Read the app package's asset inventory
How long is that transition, and what's its easing curve?	Per-frame difference over a screen recording
Does that gradient have grain, or can I just draw it in code?	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 contrast against the measured extremes

Anything that can't be measured gets labelled as inference. That distinction is the point.

What's in here

SKILL.md                  The workflow
references/pitfalls.md    Eight ways this goes wrong, all of them observed in practice
references/android.md     Device + package commands
scripts/apk_assets.py     Asset inventory, grouped by screen
scripts/frame_diff.py     Motion rhythm from a screen recording
scripts/image_probe.py    Grain / gradient structure / colour / contrast

Requirements: Python 3.8+ (standard library only), `ffmpeg` and `ffprobe` on PATH, plus `adb` if you're working with Android devices.

Use it as a Claude Code skill

git clone https://github.com/DEOWL-kan/competitor-ui-teardown.gi