# Explain Interface

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

- Repository: https://github.com/jakubkrehel/skills (10031 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-25
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add jakubkrehel/skills --skill explain-interface -g -a claude-code -y`
Codex: `npx skills add jakubkrehel/skills --skill explain-interface -g -a codex -y`
Cursor: `npx skills add jakubkrehel/skills --skill explain-interface -g -a cursor -y`
Gemini CLI: `npx skills add jakubkrehel/skills --skill explain-interface -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add jakubkrehel/skills`

## Description

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

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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 question | What you produce | Method |
| --- | --- | --- |
| 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 served | [read-the-system.md](read-the-system.md) |
| How was **this** built? | The layer stack behind one effect, in paint order, with the technique on each layer | [find-the-effect.md](find-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 browser | Fetched HTML and CSS |
| --- | --- | --- |
| Gives you | What actually paints: computed values, paint order, pseudo-elements, live animations | The source: authored declarations, responsive and state variants, generated utilities, every `:root` token |
| Blind to | Any width or state you did not visit | Which rule wins, resolved pixel values and anything injected at runtime |

The rest: https://github.com/jakubkrehel/skills/blob/HEAD/skills/explain-interface/SKILL.md