explain-interface
by jakubkrehel14 days ago4.8kAnswers "how was this built?" about an interface. Give it a URL and name the thing you're curious about, and it reads the layers that produce the effect. Reads the whole frontend instead when you don't name a thing. From a screenshot it reconstructs rather than reads and says so.
Install
Show step-by-stepHide step-by-step
Open your terminal
- Mac: Press ⌘ Space, type "Terminal", press Enter
- Windows: Press Win R, type "cmd", press Enter
Paste the command above and press Enter
Use the Copy command button, then paste in your terminal (Mac: ⌘V, Windows: Ctrl V).
Restart Claude Code
Close and reopen Claude Code, or start a new session, so it picks up the new skill.
Where it lives
Comments
"Introducing a new skill: /explain-interface When I'm curious how something was built on the web, I often use DevTools to try to figure it out. Now you can use..."
"Introducing a new skill: /explain-interface When I'm curious how something was built on the web, I often use DevTools to try to figure it out. Now you can use..."
Related skills
requesting-code-review
Use when completing tasks, implementing major features, or before merging to verify work meets requirements
systematic-debugging
Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes
subagent-driven-development
Use when executing implementation plans with independent tasks in the current session
test-driven-development
Use when implementing any feature or bugfix, before writing implementation code