Skill6.7k estrellas del repoactualizado 11d ago

social-reddit-card

The social-reddit-card skill renders text content as a realistic Reddit post card with voting arrows, comment counts, and metadata. Use it to create shareable social media graphics, video overlays, or story cards in light or dark mode with customizable subreddits, usernames, vote counts, and engagement metrics formatted in a single self-contained HTML file.

Ver fuente Repositorio: html-anything

Instalar en Claude Code

Copiar

git clone --depth 1 https://github.com/nexu-io/html-anything /tmp/social-reddit-card && cp -r /tmp/social-reddit-card/next/src/lib/templates/skills/social-reddit-card ~/.claude/skills/social-reddit-card

Después abre una sesión nueva de Claude Code; el skill carga automáticamente.

Definición

SKILL.md

【模板: 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` → fallback `Inter`, 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 (上下箭头、评论气泡、奖杯)。

Del mismo repositorio

article-magazineSkill

Substack / Medium 高级感长文排版, 适合公众号、博客发布

blog-postSkill

杂志感长文, 含 masthead、hero、figures、pull quote、作者署名

card-twitterSkill

推特金句 / 数据卡, 适合配推文

card-xiaohongshuSkill

小红书风格知识卡片, 多张联排可滑动浏览

competitive-teardownSkill

定位图 + 功能矩阵 + 价格对比 + 机会窗口, 把竞品资料转成产品决策报告

dashboardSkill