Is it compatible with Tailwind CSS?

Yes, the skill is built using Tailwind CSS classes and shadcn/ui components, ensuring seamless integration with modern Next.js design systems.

Can I use this for bulk image exports?

Absolutely. The grid includes an optional 'Download All as ZIP' feature that can be connected to your preferred client-side ZIP utility.

How does the comparison slider work?

It uses a dynamic CSS clip-path based on mouse or touch coordinates to reveal the original image versus the reformatted variant in real-time.

Does this skill support custom aspect ratios?

Yes, the component relies on a platform-specs contract. You can define any custom dimensions, labels, or safe zones within that specification to support unique requirements.

Aspect Ratio Grid

Name: Aspect Ratio Grid
Author: mattwoodco

bymattwoodco

•

Design Tools

Generates a responsive preview grid for testing and displaying images across various social media aspect ratios and safe zones.

This skill provides a robust React component set for Next.js applications that allows developers to visualize how a single image translates across multiple social media platforms. It features a sophisticated comparison slider for crop vs. outpaint analysis, visual safe zone overlays to ensure content is not obscured by platform UI elements, and integrated controls for individual or bulk asset management. It is an essential tool for developers building AI-driven media platforms or internal marketing dashboards.

Key Features

01Interactive draggable before/after comparison slider for asset verification

02Dynamic safe zone overlays for social media platform compliance

03Integrated actions for per-platform regeneration and bulk ZIP downloads

04Comprehensive state management for pending, generating, and error statuses

053 GitHub stars

06Responsive grid layout with 2, 3, and 4-column support

Use Cases

01Creating internal marketing dashboards to verify social media asset safe zones

02Implementing 'original vs. edited' comparison views in CMS platforms

03Building a multi-platform preview tool for AI image generation services

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mattwoodco/skills aspect-ratio-grid

For use in Claude.ai and ChatGPT

Download Skill