product-images
CommunityShowcase screenshots beautifully on landing pages.
Design & Creative#screenshots#visual-design#ui-patterns#landing-page#product-images#browser-frame#phone-frame
AuthorAnanyaBanerjee
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Present product screenshots and app images beautifully on landing pages, helping teams communicate value without design tools. It outlines how to present hero images, features, and device frames with clean HTML/CSS patterns.
Core Features & Use Cases
- Browser Frame style: wraps a screenshot in a realistic browser chrome to showcase web apps.
- Phone Frame style: wraps a screenshot in a mobile device frame for mobile apps.
- Floating / Perspective styles: creates depth with layered, tilted, or floating compositions for hero sections.
- Use Case: drop in your screenshots and apply a chosen presentation style to render polished visuals on marketing pages.
Quick Start
Drop your screenshots into the page and apply one of the built-in styles to render polished visuals.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: product-images Download link: https://github.com/AnanyaBanerjee/front-end-expert/archive/main.zip#product-images Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.