goon_plugin/docs/instructions-design.md

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.