screenshot-beautifier

Beautify raw screenshots with rounded corners, shadows, and backgrounds.

Updated May 11, 2025
One-click install
npx skills add https://github.com/djliden/devrel-claude-code-plugin --skill screenshot-beautifier
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: screenshot-beautifier
Source: https://github.com/djliden/devrel-claude-code-plugin/tree/main/devrel-autonomy/skills/screenshot-beautifier
Command: npx skills add https://github.com/djliden/devrel-claude-code-plugin --skill screenshot-beautifier

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires ImageMagick, and includes scripts (resource) components.

What problem does it solve?

This Skill beautifies raw screenshots from tests and demos into polished images suitable for blogs, docs, and presentations by adding rounded corners, shadows, and stylized backgrounds.

Core Features & Use Cases

  • Rounded corners & shadows: Convert raw PNGs into professional-looking images.
  • Background options: Solid, gradient, or transparent backgrounds to fit your design.
  • Presets & batch processing: macos, gradient, minimal, dark, white presets and the ability to process multiple files.
  • Use Case: Prepare a blog hero image from a Playwright run or convert several test screenshots into a cohesive gallery.

Quick Start

Run the beautify script on a screenshot: ./scripts/beautify.sh screenshot.png macos screenshot_polished.png

Frequently Asked Questions about screenshot-beautifier

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add rounded corners and shadows to screenshots?

Rounded corners and shadows transform raw screenshots into polished images. This Skill applies macOS-style rounded corners, drop shadows, and styled backgrounds using ImageMagick masks and composition, converting test or demo screenshots into professional visuals for blogs and documentation.

Can I batch process multiple screenshots at once?

Yes, batch processing is supported. The Skill processes multiple files in one operation, applying consistent styling—rounded corners, shadows, and background presets—across all screenshots, ideal for converting galleries of test or demo images.

What background options are available for beautified screenshots?

Five presets are included: macos, gradient, minimal, dark, and white. You can apply solid, gradient, or transparent backgrounds to match your design needs, with full output customization to fit blog posts, presentations, or documentation.

Do I need ImageMagick to use this screenshot beautifier?

Yes, ImageMagick 7 is required. The Skill uses ImageMagick's rounded-corner masks, shadow generation, and background composition to transform raw PNGs into polished images with professional styling.

What's the best way to prepare Playwright screenshots for documentation?

Extract screenshots from Playwright test runs, then pass them to this Skill with your chosen preset—macos, gradient, minimal, dark, or white—to add rounded corners, shadows, and backgrounds, producing publication-ready images for blogs and docs.

Can I customize the output appearance beyond the preset styles?

Yes, the Skill supports output customization alongside presets. You control the final look by selecting preset styling, background type, and output parameters to match your specific design and branding requirements.