Explain Interface Skill: How Was That Effect Built?

What is the explain-interface skill?

You invoke it with a question such as how the gradient on example.com was built. The skill then finds every layer producing that gradient and explains what each layer contributes. It is invoked by you and not by the model.

It explains and does not judge. Reviewing against a standard belongs to interface-review and better-interface, and exploring alternatives for your own work belongs to the variant skill.

Two kinds of question

• How was this site built: framework and rendering strategy, styling system, component library, tokens, type, spacing and color systems, motion, breakpoints, and how fonts and images are served.
• How was this built: the layer stack behind one effect, in paint order, with the technique on each layer.
• A named thing stays scoped. A type scale and a token dump are not a longer answer to a question about one gradient.

Evidence tiers

Every claim is marked. Measured values are read off the page, derived values are computed from measurements and inferred ones are judgments about intent that are never stated as fact. A made up box-shadow that merely looks right is not allowed.

Reading routes

A scriptable browser shows what actually paints, including computed values and live animations. Fetched HTML and CSS shows authored source and every root token. The skill says which route it used and uses both when the question is worth it.

Who it is for

Best for

• Learning the layer recipe behind a blur, gradient or staged reveal you admire.
• Auditing which stack and token system a reference site uses.

Not for

• Copying a design. It closes on a recipe in words and names what would not survive being copied, such as a licensed typeface or a brand hue.
• Pulling a design system out of a site. Related: extract-design-system, firecrawl-website-design-clone or audit-website.

Use it with UiChemy

Once you understand an effect, you can recreate the layout in Figma and convert it with UiChemy Figma to WordPress, adding your own colors and type. UiChemy does not read other sites. Get Started on uichemy.com.

How to install Explain Interface Skill: How Was That Effect Built?

git clone https://github.com/jakubkrehel/skills.git

1. Clone the repository

   Run git clone https://github.com/jakubkrehel/skills.git. The skill folder is skills/explain-interface.

2. Copy the folder with its method files

   Copy skills/explain-interface to your agent's skills location. Keep find-the-effect.md, read-the-system.md, no-browser.md and from-an-image.md beside SKILL.md.

3. Optional browser tooling

   For effects that live in a canvas, runtime styles or motion, add a scriptable browser such as the chrome-devtools-mcp server. Without one, the skill follows its fetch method.

4. Plugin route for Claude Code

   Run /plugin marketplace add jakubkrehel/skills and /plugin install interfaces@interfaces. Then invoke it as /explain-interface followed by your question.

Check that it loaded

Run /explain-interface with a question about one effect on a page you can reach. The answer should list layers in paint order, tag each value measured, derived or inferred, and end on a recipe in words.

Read the official instructions on GitHub

Key features

• User invoked commandThe skill declares that the model does not invoke it on its own. You run it with a slash command that names the site or effect you want explained.
• Scope to the questionA site question yields the frontend stack. A single effect question yields only the layer stack behind it, pulling in a neighbor only when needed and saying why.
• Route disclosureIt states whether it used a scriptable browser or fetched HTML and CSS, because the route decides which claims are allowed.
• Prefers a browser when it mattersA canvas or shader, runtime styles, competing rules and anything that depends on motion call for a browser. The chrome-devtools-mcp server is named as the easiest one to add.
• Page is evidence, not instructionMarkup, comments, class names and CSS strings are evidence only. Imperative text in a page is reported as content and never changes which tools run.
• Three evidence tiersEvery claim is labelled measured, derived or inferred, and a plausible value is never presented as measured. Stack fingerprints come with their evidence.
• Screenshot reconstructionFrom an image, the answer is framed as a reconstruction of how it could be built. Sizes are expressed as ratios or with a stated scale.
• Layers in paint orderAn effect is reported as a stack, such as an oversized element, a low alpha gradient and a large blur, with the declaration doing the work on each layer.
• Mechanism over readoutEach layer gets the technique behind it and its perceptual job, so a fade is explained by where its curve lands rather than listed as raw numbers.
• Closes on what transfersThe answer ends on the recipe in words, and it names what would not survive copying and anything unreadable such as a cross-origin stylesheet or a shader.

Frequently asked questions