explain-interface

Topics in the source

• Explain interface
• 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

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. | 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 | | How was this built? | The layer stack behind one effect, in paint order, with the technique on each layer | 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

This is an excerpt. Refer to the complete source and its current requirements.