Tips and tools for preparing web app screenshots

We take screenshots of our web apps to use in marketing materials and documentation all the time, but it's always a chore and the results could be better.

Anyone have tips or favorite tools to suggest (ideally tools for macOS)?

Our use-cases for screenshots are:

1. taking screenshots in the right aspect ratios for Twitter and LinkedIn
2. recording videos or GIFs, either for documentation or social media (with the right aspect ratios and resolutions)
3. placing screenshots of web apps into smartphone or laptop "frames" for use in presentations

Thanks in advance for any advice!