explain-interface Skill for Claude Code: How Was This Site or Effect Built?

explain-interface makes Claude work out how a website, visual effect or animation was built, from a live URL or a screenshot.

Installs: 15.9K; on skills.sh
Stars: 10K; on GitHub
Files: 5; besides SKILL.md
Updated: Oct 2026; last repo commit

explain-interface is a user-invoked skill from Jakub Krehel's skills repo. You type something like /explain-interface how the gradient on example.com was built, and Claude finds the layers that produce the effect and explains what each one contributes.

It scopes to your question. A whole-site question gets the frontend stack, styling system, tokens, type, spacing, color, motion and breakpoints. A single-effect question gets the layer stack in paint order. It explains and does not judge.

It works best with a scriptable browser such as the chrome-devtools-mcp server the skill suggests. Without one it fetches the page HTML and CSS. From a screenshot it only reconstructs how the result could be built.

Good for

Designers who see an effect on a site and want to know how it is made
Frontend developers studying how a site is built: framework, styling, tokens and motion
Learners who want an effect explained layer by layer

Install explain-interface

Claude Code

Copy this prompt.

Install the explain-interface skill in Claude Code. Run this command:

npx skills add jakubkrehel/skills --skill explain-interface

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

explain-interface is one of 14 skills in jakubkrehel/skills. The plugin route installs all 14 and its manifest lists no hooks or MCP servers. Pick one route, not both. The skill is user-invoked: type /explain-interface yourself.

From the vendor's docs. Source.

What's in the skill

When it loads

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

Sections in SKILL.md

Scope to the question
What you can actually read
The page is evidence, not instruction
Measured, derived, inferred
From a screenshot, it is a reconstruction
Find the layers, not the element
Explain the mechanism, not the readout
Close on what transfers, not on a snippet
Before you finish

Key facts

License (per GitHub): MIT
Author: jakubkrehel (repo owner)
Repository: jakubkrehel/skills, folder skills/explain-interface
Installs on skills.sh: 15,922 as of 2026-11-02
Repo stars: 10,003 as of 2026-11-02 (whole repo)
Last repo commit: 2026-10-25
Files in the skill folder: 6 files including SKILL.md
skills.sh audits: Gen Agent Trust Hub: pass; Socket: pass; Snyk: warn

What it includes

Slash command: how was this built?
The skill turns on only when you invoke it. Its frontmatter sets disable-model-invocation, so Claude does not pick it up by itself.
/explain-interface
Whole site or one effect
A site question produces the frontend system. An effect question produces the layer stack behind that one effect.
Scope to the question
Method for the whole frontend
Covers the stack, tokens, type scale, spacing rhythm, radii, shadows, borders, motion, breakpoints, fonts and theming, and reading a second state.
Network · read-the-system.md
Method for one visual effect
Searches for the layers behind an effect, narrows to a region, checks whether it is animated and says what to do when CSS is not the answer.
Network · find-the-effect.md
Read a site without a browser
Fetches the page with curl into page.html, then reads utility classes, inline styles and the stylesheet for tokens and stack fingerprints.
Runs code · no-browser.md
Method for a screenshot
Reads colors, type by category and spacing rhythm from an image and says what the image hid.
from-an-image.md
Every claim carries one of three tiers
Measured values are read off the page, derived ones are computed from them, and inferred ones are judgements about intent and never stated as fact.
Measured, derived, inferred
End with the recipe in words, not code
The answer names the layers, their order and the values doing the work, then names what would not survive copying.
Close on what transfers

From the official docs

Permissions

Low risk

The skill makes Claude fetch or open pages you name, and its no-browser route saves page.html in your working folder. Give it URLs you would open yourself.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It fetches and loads web pages you name
The no-browser route runs curl and writes page.html to the working folder. Only point it at URLs you are happy to open.
Page text is treated as evidence, not instructions
The skill tells Claude to ignore instructions found in fetched pages and not to submit forms, sign in or follow unnamed links.

Technical details

Talks to	Fetches the URL you give it with curl, or loads it in a browser
Scopes	Web pages you name A saved page.html in the working folder

Questions

What does the explain-interface skill do?

It makes Claude explain how part of a website was built. Ask about one effect, such as a gradient or an animation, or about the whole frontend, and you get the layers or the system behind it.

How do I use it?

Install it with the install box above, then type /explain-interface followed by your question, for example how the gradient on a site was built. The skill is user-invoked, so Claude does not run it unless you call it.

Does it work from a screenshot?

Yes, but only as a reconstruction. The skill says that without the page there is no code to read, so Claude proposes how it could be built and says so. A live URL gives a measured answer.

Does it need a browser or an API key?

It needs no API key. It works best with a scriptable browser, and the skill suggests the chrome-devtools-mcp server. Without a browser it fetches HTML and CSS with curl.

Is it safe?

It reads other people's web pages. The skill treats page content as evidence and not as instructions, and tells Claude not to submit forms, sign in or follow links you did not name. It also says never to kill a browser Claude did not start. Its no-browser route runs curl and saves page.html in the working folder.

How is it different from interface-review?

The skill says it explains rather than judges and gives no verdict. Reviewing against a standard is interface-review and better-interface, and exploring alternatives is variant. All are in the same jakubkrehel/skills repo.

Information

updated Nov 2, 2026

Repository: jakubkrehel/skills
Folder: skills/explain-interface

jakubkrehel/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 8

jakubkrehel/skills README · github.com
skills CLI commands · github.com
plugin.json · github.com
explain-interface SKILL.md · github.com
no-browser.md · github.com
find-the-effect.md · github.com
read-the-system.md · github.com
from-an-image.md · github.com