Menu
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Based on SOC occupation classification
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/skeletorflet/opencode-supreme-setup --skill social-reddit-cardThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style.
Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad iteration.
Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages, filling forms, clicking buttons, taking screenshots, extracting page data, testing web apps, dogfooding Open Design previews, QA, bug hunts, or reviewing app quality. Prefer local Open Design preview URLs unless the user explicitly asks for external browsing.
| name | social-reddit-card |
| zh_name | Reddit 帖子卡 |
| en_name | Reddit Post Card |
| emoji | 🔺 |
| description | 拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享 |
| category | card |
| scenario | marketing |
| aspect_hint | 1280×720 或 800×600 |
| featured | 42 |
| tags | ["reddit","social","card","overlay","story"] |
| example_id | sample-social-reddit-card |
| example_name | Reddit 帖子 · r/programming |
| example_format | markdown |
| example_tagline | Reddit dark mode + vote rail |
| example_desc | 一条 AITA 风格故事 + 12.3k upvotes + 1.2k comments |
| example_source_url | https://hyperframes.heygen.com/catalog |
| example_source_label | hyperframes · reddit-post |
| od | {"mode":"prototype","surface":"web","platform":"desktop","scenario":"marketing","upstream":"https://github.com/nexu-io/html-anything","preview":{"type":"html","entry":"index.html","reload":"debounce-100"},"design_system":{"requires":false},"example_prompt":"用「Reddit 帖子卡」模板把我的内容做成一份「拟真 Reddit 帖子卡 + 上下投票 + 评论数, 适合视频叠加 / 故事分享」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"} |
【模板: Reddit 帖子卡】 【意图】把一段故事 / 提问 / 段子, 渲染成 Reddit 帖子卡片, 用于视频叠加、社媒故事分享。Inspired by hyperframes reddit-post。
【画布】1280×720 (视频叠加) 或 800×600 (单卡分享); 背景透明或暗色 #0b1416。
【卡片结构】
#ffffff (light) 或 #1a1a1b (dark, 推荐 video overlay), border 1px #edeff1 / #343536。#878a8c, hover 变橙 #ff4500)。12.3k 格式。#7193ff)。r/subreddit (粗) + · Posted by u/username · 3h (小字灰)。1.2k Comments · 🏆 Awards · ⤴️ Share · ⋯ icon。#ff4500)。【字体】
IBM Plex Sans → fallback Inter, weight 400/500/700。Noto Sans SC。【设计细节】
#fff, text #1c1c1c, secondary #7c7c7c。#1a1a1b, text #d7dadc, secondary #818384, border #343536。#ff4500, 负 = #7193ff, 0 = #878a8c。