blog-post

A long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".

跳到安装

仓库: skeletorflet/opencode-supreme-setup
最近来源活动: 2026年5月19日 18:56
检测到的 SKILL.md 语言: 英语
星标: 47
分支: 2

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

直接命令不会经过审查 Prompt；运行前请先检查来源。

npx skills add https://github.com/skeletorflet/opencode-supreme-setup --skill blog-post

命令会保持在同一行。复制前请横向滚动并检查完整内容。

想先保存到本地？可下载 SkillsMP 当前能够提供的文件。

检查来源文件

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

文件资源管理器

4 个文件

SKILL.md

来源说明 · 只读预览

返回搜索返回安装

8-bit-orbit-video-template

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.

2026-05-19

ad-creative

Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad iteration.

2026-05-19

agent-browser

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.

2026-05-19

查看这个仓库的全部 Skills

Blog Post Skill

Produce a single long-form article page — editorial layout, no chrome.

Workflow

Read the active DESIGN.md (injected above). Lean into the typography tokens — long-form is 70% type, 20% image, 10% chrome.

Pick the topic from the brief and write a real article — at least 600 words across 4–6 H2 sections. No lorem ipsum.

Sections, in order:

Masthead — small wordmark + 4–6 nav links, plain.
Article header — category eyebrow, headline (display token, large), deck (1–2 sentence subhead), author name + role + date.
Hero image — a 16:9 placeholder block using a DS-tinted gradient or solid fill (no external images). Add a 1-line caption underneath.
Body — alternating prose paragraphs with at least:
- 1 pull quote (large display type, accent rule on the inline-start edge so the layout flips correctly under dir="rtl").
- 1 figure (image placeholder + caption).
- 1 list (numbered or bulleted).
- 1 inline blockquote.
Author footer — author avatar (initials in a circle), bio paragraph.
Related — 3 cards linking to other posts. Each card: tiny image block, title, 1-line excerpt, date.

Write a single HTML document:

<!doctype html> through </html>, CSS inline.
Article body uses the DS body font, centered, max-width per DS layout rule (typically 680–720px).
Drop caps (first-letter) only if the DS mood is editorial / serif — skip on tech-y DSes.
data-od-id on the headline, hero, body, pull quote, related grid.

Self-check:

Type hierarchy is unambiguous — H1 is clearly the headline; H2s are section dividers; pull quotes do not compete with H1.
Line length 60–75 chars for body prose.
Accent appears at most twice (eyebrow + pull-quote rule, or one link).
The page reads like a magazine, not a marketing landing.

Output contract

Emit between <artifact> tags:

<artifact identifier="post-slug" type="text/html" title="Article Title"> <!doctype html> <html>...</html> </artifact>

One sentence before the artifact, nothing after.

Blog Post Skill

Produce a single long-form article page — editorial layout, no chrome.

Workflow

Read the active DESIGN.md (injected above). Lean into the typography tokens — long-form is 70% type, 20% image, 10% chrome.

Pick the topic from the brief and write a real article — at least 600 words across 4–6 H2 sections. No lorem ipsum.

Sections, in order:

Masthead — small wordmark + 4–6 nav links, plain.
Article header — category eyebrow, headline (display token, large), deck (1–2 sentence subhead), author name + role + date.
Hero image — a 16:9 placeholder block using a DS-tinted gradient or solid fill (no external images). Add a 1-line caption underneath.
Body — alternating prose paragraphs with at least:
- 1 pull quote (large display type, accent rule on the inline-start edge so the layout flips correctly under dir="rtl").
- 1 figure (image placeholder + caption).
- 1 list (numbered or bulleted).
- 1 inline blockquote.
Author footer — author avatar (initials in a circle), bio paragraph.
Related — 3 cards linking to other posts. Each card: tiny image block, title, 1-line excerpt, date.

Write a single HTML document:

<!doctype html> through </html>, CSS inline.
Article body uses the DS body font, centered, max-width per DS layout rule (typically 680–720px).
Drop caps (first-letter) only if the DS mood is editorial / serif — skip on tech-y DSes.
data-od-id on the headline, hero, body, pull quote, related grid.

Self-check:

Type hierarchy is unambiguous — H1 is clearly the headline; H2s are section dividers; pull quotes do not compete with H1.
Line length 60–75 chars for body prose.
Accent appears at most twice (eyebrow + pull-quote rule, or one link).
The page reads like a magazine, not a marketing landing.

Output contract

Emit between <artifact> tags:

<artifact identifier="post-slug" type="text/html" title="Article Title"> <!doctype html> <html>...</html> </artifact>

One sentence before the artifact, nothing after.

name	blog-post
description	A long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
triggers	["blog","blog post","article","essay","case study","newsletter","博客","文章"]
od	{"mode":"prototype","platform":"desktop","scenario":"marketing","featured":11,"preview":{"type":"html","entry":"index.html"},"design_system":{"requires":true,"sections":["color","typography","layout","components"]},"craft":{"requires":["typography","typography-hierarchy","typography-hierarchy-editorial","rtl-and-bidi"]}}

blog-post

来源信息

安装方式

检查来源文件

同仓库更多 Skills

同仓库更多 Skills

Blog Post Skill

Workflow

Output contract

Blog Post Skill

Workflow

Output contract