Skills

Explain Interface

Explains how a website, a visual effect or an animation was built, from a live URL or a...

Install

npx skills add jakubkrehel/skills --skill explain-interface -g -a claude-code -y
Repository
jakubkrehel/skills10k
Category
Design
Updated
10d ago
License
MIT
Context cost
Mediumabout 2,078 tokens
Runs scripts
No, instructions only

What it does

Explains how a website, a visual effect or an animation was built, from a live URL or a screenshot.

Explain interface

This skill answers how something on the web was built. /explain-interface how the gradient on example.com was built finds the layers producing that gradient and explains what each one contributes.

It explains rather than judges. There is no verdict, because how someone else built their interface is not a finding. Reviewing against a standard is interface-review and better-interface, and exploring alternatives for your own is variant. Name what you find in the vocabulary of the domain skill that owns it, such as better-typography for type or better-colors for palette.

Scope to the question

The questionWhat you produceMethod
How was this site built?The frontend: framework and rendering strategy, styling system, component library, tokens, the type, spacing and color systems, motion, breakpoints, how fonts and images are servedread-the-system.md
How was this built?The layer stack behind one effect, in paint order, with the technique on each layerfind-the-effect.md

Given a named thing, scope to it. A type scale and a token dump are not a longer answer to "how is the gradient built". Pull in a neighbour only where the effect cannot be explained without it, and say why.

Either question can be asked of a screenshot instead of a URL. See From a screenshot, it is a reconstruction.

What you can actually read

How you reach the page decides what you may claim. Say which route you used.

A scriptable browserFetched HTML and CSS
Gives youWhat actually paints: computed values, paint order, pseudo-elements, live animationsThe source: authored declarations, responsive and state variants, generated utilities, every :root token
Blind toAny width or state you did not visitWhich rule wins, resolved pixel values and anything injected at runtime
Read the whole SKILL.md on GitHub

More in Design