skills.rest
mattwoodco
mattwoodcoCOMMUNITY
Explore all skills by this author →
Website𝕏@mattwoodcoGitHub

aspect-ratio-grid

Generate and display image previews across social platform aspect ratios.

3|Updated Feb 14, 2026
Search Tags:#design#social media#image#preview#download#aspect ratio
One-click install
npx skills add https://github.com/mattwoodco/skills --skill aspect-ratio-grid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aspect-ratio-grid
Source: https://github.com/mattwoodco/skills/tree/main/v1-skills/aspect-ratio-grid
Command: npx skills add https://github.com/mattwoodco/skills --skill aspect-ratio-grid

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires platform-specs, add-shadcn, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of adapting a single image for various social media platforms, ensuring optimal display and providing easy download options for each format.

Core Features & Use Cases

  • Multi-Platform Previews: View how an image appears across different social media aspect ratios.
  • Download & Regenerate: Download individual platform formats or regenerate them if needed.
  • Comparison View: Compare the original image against the generated version with a slider.
  • Use Case: You have a hero image for a blog post and need to create versions for Instagram, Twitter, Facebook, and LinkedIn. This Skill generates all formats and allows you to preview and download them efficiently.

Quick Start

Show platform formats for the current image.

Frequently Asked Questions about aspect-ratio-grid

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

FAQPage Schema
How do I preview an image across multiple social media aspect ratios?▼

You can preview an image across social media aspect ratios by generating multiple format views from a single source image, with each platform displaying its specific dimensions and safe zone overlays.

Can I download images for individual platforms like Instagram and Twitter separately?▼

Yes, you can download images for individual platforms like Instagram and Twitter separately, as the tool provides per-platform download options for every generated aspect ratio format.

Does this image preview tool support Next.js App Router and shadcn/ui components?▼

Yes, the image preview tool supports Next.js App Router and shadcn/ui components, utilizing platform-specs for metadata to ensure accurate visual rendering within your existing stack.

What's the best way to compare crop versus outpaint adjustments for social media formats?▼

The best way to compare crop versus outpaint adjustments is by using the built-in comparison slider, which visually contrasts the original image against the generated version for each platform format.

How do safe zone overlays work when generating social media previews?▼

Safe zone overlays work by visually marking critical boundary areas on the generated social media previews, ensuring your main image content remains visible and unobstructed across different platform interfaces.

Related Skills

Explore More Design & Creative Skills→
vanman2024vanman2024
10

tailwind-shadcn-setup

Automate Tailwind CSS and shadcn/ui setup for Next.js projects.

Community
Advanced
LutimiLutimi

ckm:banner-design

Generate multi-platform banner designs with export-ready assets and HTML/CSS integration.

Community
Advanced
supersterlingsupersterling
1

json-render-shadcn

Provide pre-built shadcn/ui components for json-render in React/Next.js apps.

Community
Intermediate
YSheldonYSheldon

photo-editor

Apply resize, crop, filter, and optimization tasks to images via Python or Node.

Community
Intermediate