x-image-cards

Create X/Twitter cards that look like images, not marketing banners. Use when asked to "create OG images", "set up X cards", "make social cards", or "twitter card without text".

1.78x

Quality

95%

Does it follow best practices?

Impact

91%

1.78x

Average score across 6 eval scenarios

Securityby

Passed

No known issues

Evaluation results

100%

65%

Add Social Card Support to a Next.js Blog

Social card meta tag setup

Criteria

Without context

With context

Zero-width space in og:title

100%

Page title preserved

100%

og:image:width is 1200

100%

og:image:height is 600

100%

twitter:card is summary_large_image

100%

og:image URL uses .png extension

100%

twitter:image present

100%

og:image present

100%

twitter:image uses .png URL

100%

No og:title description text

100%

Without context: $0.1247 · 43s · 8 turns · 13 in / 2,238 out tokens

With context: $0.2742 · 1m 1s · 14 turns · 18 in / 3,088 out tokens

78%

56%

Build an OG Image Generation Route for a Blog

OG image generation with correct dimensions

Criteria

Without context

With context

Uses @vercel/og

100%

OG_SCALE constant

100%

Physical width 2400

100%

Physical height 1200

100%

Safe margin padding 100

High contrast colors

100%

URL route uses .png extension

2:1 aspect ratio

100%

Content-Type image/png

100%

Container width/height 100%

100%

Without context: $0.1955 · 52s · 11 turns · 18 in / 3,054 out tokens

With context: $0.2916 · 1m 4s · 17 turns · 22 in / 3,489 out tokens

96%

-2%

Design OG Image System for a High-Traffic Content Platform

Pre-generation OG image architecture

Criteria

Without context

With context

Pre-generation approach

100%

Crawler timeout risk addressed

100%

Binary/BYTEA storage

100%

Express .png route pattern

75%

100%

Cache-Control header

100%

Content-Type image/png

100%

Image generated on content creation

100%

Instant response for crawlers

100%

Schema extended for image storage

100%

42%

Avoids on-demand generation

100%

Without context: $0.2833 · 1m 47s · 9 turns · 12 in / 6,147 out tokens

With context: $0.2994 · 1m 30s · 15 turns · 20 in / 4,952 out tokens

Repository: NeverSight/skills_feed
Commit: 5342bca

Evaluated: 13 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Add Social Card Support to a Next.js Blog Build an OG Image Generation Route for a Blog Design OG Image System for a High-Traffic Content Platform

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.