# Instructions UI design

## Placement
The instructions banner sits above the primary action button so new users can read the steps before interacting with the popup.

## Structure
- Short kicker: “Quick start”
- Heading: “How to use VidPlex”
- Expand/collapse toggle for users who want a smaller popup
- Ordered list of the core tasks
- One warning line for edge cases
- One short learn-more line that points to the README and audit notes

## Copy strategy
The microcopy avoids jargon and keeps each step tied to a visible control:
- Find Videos
- Open Viewer
- Clear

## Accessibility strategy
- A labelled region exposes the whole panel to assistive tech
- The toggle reflects the current visibility state
- The collapsed state removes the body from the layout entirely

## Notes
This design intentionally favors clarity over density because extension popups are small and users typically need the instructions only once.