Guide · Agent skill
How to use the Explain Interface agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Explain Interface skill is an agent skill that answers questions like how a gradient, glow or animation on a website was built. It works from a live URL or a screenshot and breaks the effect into its layers and techniques. This guide covers what the skill does, how to install it, how to trigger it, and what it needs and how it behaves.
Explain Interfacejakubkrehel/skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the explain-interface ZIP from this page.
- 2Unzip the skill. Extract the folder so it contains SKILL.md and the supporting files.
- 3Place it in your skills folder. Move it to ~/.claude/skills/ for personal use or to a project's .claude/skills/ folder.
- 4Or upload in the Claude apps. Go to Settings → Capabilities → Skills and upload the ZIP instead.
- 5Name the target. Choose a specific site and effect, such as a gradient or animation, and a URL if the page is live.
- 6Trigger the skill. Run /explain-interface with your question about how that effect was built.
- 7Read the answer's confidence. Check which claims are measured, derived or inferred and which route the skill used.
What the explain-interface skill makes the agent do
An agent skill is a folder of instructions that an agent loads when a request matches it. This one, named explain-interface, explains how something on the web was built. Given a named effect, it finds the layers producing it, in paint order, and describes the technique on each layer and what it contributes.
It can read a live page through a scriptable browser or through the page's HTML and CSS. If you only have a screenshot, it estimates a reconstruction and says that it is an estimate. For every claim it states whether the value was measured, derived from measurements, or inferred.
- Whole-site questions: framework and rendering approach, styling system, type, spacing, colour, motion and breakpoints.
- Single-effect questions: the layer stack behind one gradient, glow or animation.
- It explains rather than judges, so it gives no verdict on whether a design is good.
- It closes with the recipe in words and names what would not survive being copied, rather than providing code that rebuilds the effect.
Install the explain-interface skill
Download the ZIP from this page and unzip it. For a personal install, place the skill folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder.
If you use the Claude apps, you can instead upload the ZIP under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/explain-interface
- Project install: .claude/skills/explain-interface inside your project folder
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
Trigger the skill with a natural request
The skill is set so the model does not invoke it on its own, so you trigger it deliberately. The source shows a slash command form, /explain-interface, followed by your question about a named thing on a site.
Name the site and the effect specifically. The more precise the target, the more focused the answer.
- /explain-interface how the gradient on example.com was built
- Ask about one effect, such as the glow behind a button or the animation of a heading.
- Give a screenshot instead of a URL when the page is not live; expect an estimate rather than a reading.
/explain-interface how the gradient on example.com was builtChoose the route: browser or fetched source
The skill chooses how to reach the page and states which route it used, because that decides what it can claim. A scriptable browser shows what actually paints, including animations and runtime styles, but cannot see widths or states you did not visit. Fetched HTML and CSS show the authored source and every root token, but cannot resolve which rule wins or pixel values.
The browser route is best for canvas or shader effects, styles added at runtime, several competing rules, and motion. The source's requirements list a scriptable browser such as the chrome-devtools-mcp server or Playwright as optional for this route. Without a browser, the skill fetches the raw HTML and the stylesheets it links.
- Browser route needs a scriptable browser such as chrome-devtools-mcp or Playwright (optional).
- No-browser route needs network access to fetch the page HTML and CSS.
- The skill fetches raw bytes and works in a temporary directory, not your project.
Safety notes: scripts and network access
The skill does not run scripts, but it does use the network to fetch the page HTML and CSS, and it may use a browser. Treat any page it reads as untrusted content: the skill is written to report text on a page that addresses the reader rather than follow it, and it does not submit forms, sign in or follow links you did not name.
In a browser session, the skill interacts only to reach the state it is explaining, such as a hover or scroll. Its guidance also warns against killing a browser it did not start, because a broad pkill pattern can end the MCP's own browser and other sessions.
- Runs scripts: no
- Uses network: yes
- Does not follow links or submit forms that you did not name
- Quit only the browser process you launched, by its pid
Tips for useful answers
Ask about one named effect when you can. A whole-site question produces a long answer, and a single gradient or animation produces a focused explanation of its layers.
If the answer is a reconstruction, a live URL gives a better result. Note that some things cannot be read at all, such as a cross-origin stylesheet, a canvas or a WebGL shader; the skill names these as stopping points.
- Use a live URL whenever possible; screenshots only support estimates.
- Expect the explanation to end with what transfers and what does not, not with copyable code.
- Look for the mechanism: the answer explains why a layer looks the way it does.
What people use it for
- Working out the layers behind a gradient or glow on a landing page.
- Understanding how a staggered text reveal or fade-in animation is put together.
- Learning how a modern site uses its frontend stack, type and spacing systems at a high level.
- Estimating how a screenshot of an interface could have been built, clearly labelled as an estimate.
Frequently asked questions
How do I install the explain-interface skill?
Download the ZIP from this page and unzip it. Put the folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder, or upload the ZIP under Settings → Capabilities → Skills in the Claude apps.
Is the explain-interface skill free?
The source lists the licence as MIT. It does not state any price, so check the listing for anything beyond the licence.
What do I need to run it?
For the browser route you need a scriptable browser such as the chrome-devtools-mcp server or Playwright, which is optional. For the no-browser route you need network access to fetch the page HTML and CSS. It does not run scripts.
Can it tell me whether a website's design is good?
No. The skill explicitly declines to give verdicts because how someone else built their interface is not a finding. For a review against a standard, the source points to interface-review and better-interface.
Can it recreate an exact copy of a site?
No, and it is not designed to. The skill closes with the recipe in words and avoids code that rebuilds the effect, since such output would be a lookalike.
Does it work from a screenshot?
Yes, but the answer is a reconstruction, not an explanation of how the page was actually built. Screenshots cannot show exact code, tokens or motion, so use a live URL when you can.
How does it compare with other ways to inspect a page?
Browser developer tools show computed styles directly, while this skill organises the findings into layers, techniques and confidence tiers in plain language. It is best for understanding an effect rather than grading a design or producing a copy.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use explain-interface if you want a clear, honest account of how a visual effect or animation on a website was built, especially if you are learning front-end craft. Pick a different skill if you want a design critique, an exact copy of a site, or copyable code, since this one is built to avoid all three.
Download the skill