Social Reddit Card
- 1.6k installs
- 82k repo stars
- Updated July 28, 2026
- nexu-io/open-design
social-reddit-card is an agent skill that renders realistic Reddit post cards with vote rails for video overlays and story sharing.
About
The social-reddit-card skill from nexu-io open-design renders user content as a realistic Reddit post card for video overlays or social sharing. It defines canvas sizes 1280 by 720 or 800 by 600 with dark mode recommended for overlays, vote rail with up and down arrows, formatted vote counts like 12.3k, subreddit meta row, title and body, and action row with comments and share icons. Design rules require inline SVG icons, no external images, CSS gradient placeholders, IBM Plex Sans with Noto Sans SC for Chinese, and single-file HTML output. Use when developers need Reddit-style social cards from real content for marketing overlays or story shares.
- Reddit dark mode card with vote rail, subreddit meta, and action row.
- Canvas 1280x720 overlay or 800x600 single-card share formats.
- Inline SVG Snoo logo and icons — no external image links.
- Real user content with generated subreddit, username, and vote counts.
- Single-file HTML template inspired by hyperframes reddit-post.
Social Reddit Card by the numbers
- 1,604 all-time installs (skills.sh)
- +123 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #348 of 1,881 Marketing & SEO skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
social-reddit-card capabilities & compatibility
- Capabilities
- reddit card html generation · dark mode vote rail styling · inline svg icon rendering · content to card transformation
- Use cases
- ui design · marketing · frontend
What social-reddit-card says it does
Realistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing.
严禁外链图片; 图片占位用 CSS 渐变 + 描述。
npx skills add https://github.com/nexu-io/open-design --skill social-reddit-cardAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.6k |
|---|---|
| repo stars | ★ 82k |
| Security audit | 3 / 3 scanners passed |
| Last updated | July 28, 2026 |
| Repository | nexu-io/open-design ↗ |
How do I turn my story or post content into a realistic Reddit card for video overlay?
Render realistic Reddit post cards with vote rail and comment counts for video overlays or social story sharing.
Who is it for?
Creators making Reddit-style social cards for video overlays, story shares, or marketing mockups.
Skip if: Skip for live Reddit API integration or backend social posting without HTML card rendering.
When should I use this skill?
User asks for Reddit post card, vote rail overlay, or social Reddit template from content.
What you get
A single-file HTML Reddit post card with vote rail, comment count, and dark-mode styling from real content.
- Reddit post card image or markdown asset
- Video-overlay-ready social mockup
By the numbers
- Featured score of 42 in open-design metadata
- Supports 1280×720 or 800×600 aspect ratio outputs
Files
【模板: Reddit 帖子卡】 【意图】把一段故事 / 提问 / 段子, 渲染成 Reddit 帖子卡片, 用于视频叠加、社媒故事分享。Inspired by hyperframes reddit-post。
【画布】1280×720 (视频叠加) 或 800×600 (单卡分享); 背景透明或暗色 #0b1416。
【卡片结构】
- 外框: 圆角 16px, bg 白
#ffffff(light) 或#1a1a1b(dark, 推荐 video overlay), border 1px#edeff1/#343536。 - 左侧 vote rail (40-56px 宽):
- 上箭头 ▲ (16px,
#878a8c, hover 变橙#ff4500)。 - 票数 (Inter, 17px, weight 700, 居中, 颜色: 0 灰 / 正橙 / 负蓝); 大数字用
12.3k格式。 - 下箭头 ▼ (hover 变蓝
#7193ff)。 - 主体区:
- 顶部 meta row: 子版块图标 (CSS 圆形 + 字母) +
r/subreddit(粗) +· Posted by u/username · 3h(小字灰)。 - 标题 (Inter / IBM Plex Sans, 22-28px, weight 500, dark text)。
- 内容: 16px body 或 引用块或 1 张图 (CSS 渐变占位)。
- 底部 action row: 💬
1.2k Comments· 🏆 Awards · ⤴️ Share · ⋯ icon。 - 顶部右上角 Reddit Snoo logo (内联 SVG, 橙色
#ff4500)。
【字体】
- 主:
IBM Plex Sans→ fallbackInter, weight 400/500/700。 - 数字: 同主字体。
- 中文:
Noto Sans SC。
【设计细节】
- Light mode: bg
#fff, text#1c1c1c, secondary#7c7c7c。 - Dark mode (推荐): bg
#1a1a1b, text#d7dadc, secondary#818384, border#343536。 - 票数颜色: 正 =
#ff4500, 负 =#7193ff, 0 =#878a8c。 - 标题点击区可加微妙背景 hover。
- 严禁外链图片; 图片占位用 CSS 渐变 + 描述。
- 必须用用户提供的内容; 自动生成合理的 subreddit / username / 票数。
- 单文件 HTML; icon 内联 SVG (上下箭头、评论气泡、奖杯)。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Reddit Post · r/programming</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet" />
<style>
body { font-family: 'IBM Plex Sans','Noto Sans SC',system-ui,sans-serif; background: radial-gradient(circle at 30% 20%, #1a2026 0%, #050507 80%); }
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-12">
<article class="w-[720px] rounded-2xl flex" style="background:#1a1a1b;border:1px solid #343536;box-shadow:0 30px 60px -20px rgba(0,0,0,0.6)">
<!-- vote rail -->
<aside class="w-12 py-4 flex flex-col items-center gap-1.5 shrink-0" style="background:#161617;border-right:1px solid #343536;border-top-left-radius:1rem;border-bottom-left-radius:1rem">
<button class="text-[#878a8c] hover:text-[#ff4500]"><svg viewBox="0 0 24 24" class="w-5 h-5" fill="currentColor"><path d="M12 4l8 10h-5v6h-6v-6H4z"/></svg></button>
<span class="font-bold text-[15px]" style="color:#ff4500">12.3k</span>
<button class="text-[#878a8c] hover:text-[#7193ff]"><svg viewBox="0 0 24 24" class="w-5 h-5" fill="currentColor"><path d="M12 20l-8-10h5V4h6v6h5z"/></svg></button>
</aside>
<!-- body -->
<div class="flex-1 p-5 min-w-0" style="color:#d7dadc">
<!-- meta -->
<div class="flex items-center gap-2 text-[12px]" style="color:#818384">
<div class="w-5 h-5 rounded-full flex items-center justify-center text-white text-[10px] font-bold" style="background:#ff4500">r/</div>
<span class="font-bold" style="color:#d7dadc">r/programming</span>
<span>·</span>
<span>Posted by u/code_quality_guy · 4h ago</span>
<span class="ml-auto text-[10px] uppercase tracking-wider px-2 py-0.5 rounded" style="background:#272729;color:#d7dadc">TIL</span>
</div>
<!-- title -->
<h1 class="mt-3 text-[22px] font-medium leading-snug" style="color:#d7dadc">TIL my code reviewer asks LLMs to roast my PRs before approving</h1>
<!-- body -->
<p class="mt-3 text-[15px] leading-relaxed" style="color:#d7dadc">
So I started doing this thing where I run my diff through Claude with the prompt "be brutally honest, find anything that would embarrass me at code review". The team lead picked up on the patterns and now does it as a first-pass before he even reads the PR.
</p>
<p class="mt-3 text-[15px] leading-relaxed" style="color:#d7dadc">Productivity up, ego down. 10/10 would recommend.</p>
<!-- actions -->
<div class="mt-4 flex items-center gap-3 text-[12.5px] font-semibold" style="color:#818384">
<button class="flex items-center gap-1.5 hover:text-[#d7dadc] px-2 py-1 rounded hover:bg-[#272729]">
<svg viewBox="0 0 24 24" class="w-4 h-4" fill="currentColor"><path d="M20 2H4a2 2 0 00-2 2v12a2 2 0 002 2h4l4 4 4-4h4a2 2 0 002-2V4a2 2 0 00-2-2z"/></svg>
<span>1.2k Comments</span>
</button>
<button class="flex items-center gap-1.5 hover:text-[#d7dadc] px-2 py-1 rounded hover:bg-[#272729]">
<svg viewBox="0 0 24 24" class="w-4 h-4" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4.5 2 7L12 16l-6.5 4.5 2-7L2 9h7z"/></svg>
<span>7 Awards</span>
</button>
<button class="flex items-center gap-1.5 hover:text-[#d7dadc] px-2 py-1 rounded hover:bg-[#272729]">
<svg viewBox="0 0 24 24" class="w-4 h-4" fill="currentColor"><path d="M18 8a3 3 0 11-2.83-3H15l-7 4-1.17-1A3 3 0 113 11l5-3-4-3a3 3 0 11.83-1.83L9 6l7-4z"/></svg>
<span>Share</span>
</button>
<button class="ml-auto px-2 py-1 rounded hover:bg-[#272729]">⋯</button>
</div>
</div>
</article>
</body>
</html>
TIL my code reviewer asks LLMs to roast my PRs before approving
So I started doing this thing where I run my diff through Claude with the prompt "be brutally honest, find anything that would embarrass me at code review". The team lead picked up on the patterns and now does it as a first-pass before he even reads the PR. Productivity up, ego down.
Posted in r/programming by u/code_quality_guy · 4h ago Upvotes: 12.3k · Comments: 1.2k · Awards: 7
Related skills
Seo AuditRun structured SEO audits on their SaaS site or content hub and receive a prioritized action plan.167k41.1kCopywritingGenerate, rewrite, or strengthen persuasive website and landing-page copy that converts visitors into users.158k41.1k
Viral Short FormQuickly generate high-retention hooks, scripts, and outlines for TikTok, Reels, YouTube Shorts, and carousels.132k64Viral HooksWrite and critique viral hooks for short-form video opening sequences.123k64Viral Captions And CtasOptimize social media captions and CTAs for viral short-form video reach and saves.123k64Viral Youtube ShortsWrite and diagnose YouTube Shorts for Shorts Feed and long-form funnel.123k64How it compares
Use for static Reddit-style overlay cards when you need quick marketing mockups instead of building custom UI components or calling Reddit APIs.
FAQ
What canvas sizes are supported?
1280 by 720 for video overlay or 800 by 600 for single-card sharing.
Can I use external images?
No — images use CSS gradients and inline SVG; external image links are forbidden.
Is social-reddit-card safe to install?
Review the Security Audits panel on this page before installing in production.