Aspect ratio design
Skill Dragoon0x/everything-design-taste/skills/aspect-ratio-design
Image and media aspect ratio standards, responsive aspect ratios, and consistent media sizing.From its SKILL.md
npx -y skills add Dragoon0x/everything-design-taste --skill aspect-ratio-designAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
0.9 KB, 224 tokens by cl100k_base, as published. Nobody here has run it
Aspect Ratio Design
Common Aspect Ratios
| Ratio | Use Case |
|---|---|
| 1:1 | Avatars, thumbnails, social posts |
| 4:3 | Product photos, presentations |
| 3:2 | Photography, cards |
| 16:9 | Video, hero images, banners |
| 21:9 | Ultrawide heroes, cinematic |
| 9:16 | Vertical video (Stories, Reels) |
Implementation
.media {
aspect-ratio: 16 / 9;
object-fit: cover;
width: 100%;
}
Rules
- Consistent ratios within a grid. Mixed ratios in a card grid = visual chaos.
- object-fit: cover for photos (crops to fill). contain for logos/icons.
- object-position to control crop focal point.
- Responsive ratios: wider on desktop, taller on mobile (e.g., 21:9 → 16:9 → 4:3).
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.