npm - @hiai-gg/hiai-opencode - Versions diffs - 0.2.1 → 0.2.2 - Mend

@hiai-gg/hiai-opencode 0.2.1 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (477) hide show

package/skills/apple-hig/SKILL.md ADDED Viewed

@@ -0,0 +1,43 @@
+---
+name: apple-hig
+description: |
+  Apple Human Interface Guidelines as 14 agent skills covering platforms, foundations, components, patterns, inputs, and technologies for iOS, macOS, visionOS, watchOS, and tvOS.
+triggers:
+  - "apple hig"
+  - "human interface"
+  - "ios design"
+  - "macos design"
+  - "visionos design"
+od:
+  mode: design-system
+  category: design-systems
+  upstream: "https://github.com/raintree-technology/apple-hig-skills"
+---
+# apple-hig
+> Curated from raintree-technology.
+## What it does
+Apple Human Interface Guidelines as 14 agent skills covering platforms, foundations, components, patterns, inputs, and technologies for iOS, macOS, visionOS, watchOS, and tvOS.
+## Source
+- Upstream: https://github.com/raintree-technology/apple-hig-skills
+- Category: `design-systems`
+## How to use
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To run the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/raintree-technology/apple-hig-skills
+```
+Then ask the agent to invoke this skill by name (`apple-hig`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/skills/article-magazine/SKILL.md ADDED Viewed

@@ -0,0 +1,46 @@
+---
+name: article-magazine
+zh_name: "杂志文章"
+en_name: "Magazine Article"
+emoji: "📖"
+description: "Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay."
+zh_description: "Huashu / huashu-md-html 风格杂志文章版式, 将 Markdown 或笔记转成精排长文 HTML。"
+en_description: "Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay."
+category: article
+scenario: marketing
+aspect_hint: "A4 / 长页面"
+featured: 11
+tags: ["blog", "essay", "newsletter", "公众号", "博客", "文章"]
+example_id: sample-article-trq212-html
+example_name: "杂志文章 · HTML 取代 Markdown"
+example_format: markdown
+example_tagline: "灵感来自 @trq212 的推文"
+example_desc: "围绕「AI 时代 HTML > Markdown」的延伸评论, 含原推附注与可点击链接"
+example_source_url: "https://x.com/trq212/status/2052809885763747935"
+example_source_label: "@trq212 / x.com"
+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: "Use the Magazine Article template to turn my content into a Huashu / huashu-md-html-inspired long-form HTML essay. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
+  example_prompt_i18n:
+    zh-CN: "用「杂志文章」模板把我的内容做成一份「Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"
+---
+【模板: 杂志文章】
+- 顶部 hero: 大标题 (text-5xl/6xl) + 可选副标题 + 作者 / 阅读时间 / 日期元数据。
+- 正文: 单栏, 最大宽度约 700px, 居中。段落 `text-lg leading-relaxed text-neutral-700 dark:text-neutral-300`。
+- H2 / H3 标题用 serif 字体, 让正文与标题有视觉对比。
+- 引用块使用左侧粗 accent 色边线 + 斜体。
+- 代码块: 圆角 + 深色背景 + 浅色文字, 显示语言标签。
+- 列表项使用自定义 bullet（小方块 / accent 圆点）。
+- 章节之间用 `<hr>` 分隔, 但样式做成中央居中的小 ornament。
+- 文末加一个简单的 "如果觉得有用，欢迎转发" 行动卡片。

package/skills/article-magazine/example.html ADDED Viewed

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>我读完 @trq212 那条推之后, 把所有 markdown 都换成了 HTML</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Sans+SC:wght@300;400;500;600&family=Noto+Serif+SC:wght@500;700;900&display=swap" rel="stylesheet">
+<style>
+  :root { --ink:#1a1a1a; --paper:#fafaf7; --line:#e7e5e0; --mute:#6b6760; --accent:#b8553a; --twitter:#1d9bf0; }
+  body { font-family:'Inter','Noto Sans SC',sans-serif; background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; }
+  .serif { font-family:'Noto Serif SC',Georgia,serif; }
+  .ornament { display:flex; align-items:center; justify-content:center; gap:14px; margin:48px 0; color:var(--mute); }
+  .ornament::before, .ornament::after { content:""; flex:1; max-width:60px; height:1px; background:var(--line); }
+  .article p { font-size:1.0625rem; line-height:1.8; color:#262421; margin:1.1em 0; max-width:65ch; }
+  .article h2 { font-family:'Noto Serif SC',serif; font-size:1.875rem; font-weight:700; margin:2.4em 0 0.8em; letter-spacing:-0.01em; }
+  .article blockquote { border-left:3px solid var(--accent); padding:0 0 0 20px; margin:1.6em 0; font-style:italic; color:var(--mute); font-family:'Noto Serif SC',serif; font-size:1.0625rem; line-height:1.7; }
+  .article a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
+  .grain::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:0.4; background-image:radial-gradient(circle at 12% 18%, rgba(106,92,56,0.05), transparent 45%), radial-gradient(circle at 88% 72%, rgba(106,92,56,0.04), transparent 50%); }
+</style>
+</head>
+<body class="grain">
+<article class="article max-w-[720px] mx-auto px-6 pt-20 pb-32">
+  <!-- Source banner — clearly attributes the inspiration -->
+  <a href="https://x.com/trq212/status/2052809885763747935" target="_blank" rel="noopener" class="!no-underline group block mb-10 rounded-2xl border border-[var(--line)] bg-white/70 hover:bg-white transition-colors p-4 flex items-start gap-4">
+    <div class="shrink-0 w-10 h-10 rounded-full bg-[var(--twitter)] grid place-items-center text-white">
+      <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
+    </div>
+    <div class="min-w-0 flex-1">
+      <div class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--mute)] mb-1">灵感来自 / Source</div>
+      <div class="text-[14px] font-medium text-[var(--ink)] leading-snug">@trq212 关于 "在 AI 时代, HTML 已经取代 markdown 成为最终形态" 的推文</div>
+      <div class="text-[12px] text-[var(--mute)] mt-1 break-all group-hover:text-[var(--accent)] transition-colors">x.com/trq212/status/2052809885763747935  ↗</div>
+    </div>
+  </a>
+  <div class="text-[11px] font-medium tracking-[0.22em] uppercase text-[var(--accent)] mb-5">Essay · 2026.05 · 评论 / 延伸</div>
+  <h1 class="serif text-[3rem] leading-[1.08] font-black tracking-tight mb-5">
+    我读完 <a href="https://x.com/trq212/status/2052809885763747935" target="_blank" rel="noopener" class="italic font-bold !no-underline" style="color:var(--accent)">@trq212</a> 那条推之后,<br/>
+    把所有 markdown 都换成了 HTML
+  </h1>
+  <p class="text-[1.125rem] leading-relaxed text-[var(--mute)] font-light max-w-[60ch] mb-8">
+    简而言之: 在 AI 写作 / 编辑器 / 代理时代, markdown 这个 "中间态" 已经撑不住了 —— HTML 才是面向读者的最终形态。
+  </p>
+  <div class="flex items-center gap-3 text-[12px] text-[var(--mute)] pb-12 border-b border-[var(--line)]">
+    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-[#c96442] to-[#e9b94a]"></div>
+    <span class="font-medium text-[var(--ink)]">Tom Pan</span>
+    <span>·</span><span>5 月 11 日</span>
+    <span>·</span><span>4 分钟阅读</span>
+  </div>
+  <h2>让我点头的三个观察</h2>
+  <p><span class="serif font-bold text-[1.5rem] float-left mr-2 leading-none mt-1.5" style="color:var(--accent)">第</span>一, 我们对 markdown 的爱, 主要是写起来爽。但读者从来没投过票。读者拿到的永远是某个 markdown 渲染器吐出来的结果 —— 而那个渲染器属于平台, 不属于你。</p>
+  <p>第二, 截图发推这件事, markdown 输了。随便挑一段 markdown, 截图发出去都是被 GitHub 默认主题压扁的灰白方块。HTML 可以是壁纸级图片。</p>
+  <p>第三, 公众号 / 知乎 / 小红书 / Notion / 飞书 —— 每一家解释 markdown 的方式都不一样。你写一份, 5 个平台得调 5 次。<strong class="font-semibold text-[var(--ink)]">HTML + 内联 CSS, 一次粘贴, 任何平台都还原</strong>。</p>
+  <h2>但 HTML 太啰嗦, 这是真的</h2>
+  <p><code class="px-1.5 py-0.5 rounded bg-[#f0ece5] text-[0.92em] font-mono text-[#7a3d27]">&lt;div class="..."&gt;</code> 写多了想吐, 这是事实。之前没人愿意花成本写 HTML, 因为同样的内容, markdown 30 秒, HTML 30 分钟。</p>
+  <blockquote>变量是 —— AI 把这 30 分钟降到 30 秒了。<br/>你写 markdown, AI 把它升级成可交付的 HTML。你管最终形态, AI 管啰嗦细节。</blockquote>
+  <h2>我们顺手做了一个工具</h2>
+  <p>灵感来自原推, 加上 Claude Code 团队的实践, 我们做了 <a href="#">HTML Anything</a>。左侧贴 markdown / CSV / JSON, 选一个模板 (杂志、PPT、海报、小红书、数据报告 …), 按 ⌘+Enter —— 本地的 Claude / Cursor / Codex 在你<strong class="font-semibold text-[var(--ink)]">已经登录</strong>的 session 里跑, 几秒后右侧就是一份可以直接复制到公众号 / 推特 / 知乎的 HTML。</p>
+  <p>不需要 API Key, 不浪费 token (二次编辑只跑 diff)。</p>
+  <h2>结论</h2>
+  <p>如果你也觉得 "markdown → 编辑器手动重排" 这件事浪费了你的人生 —— 看一眼原推, 看一眼 Claude Code 团队的迁移, 然后试试任何一个能把 markdown 自动升格为 HTML 的工具。</p>
+  <div class="ornament"><span class="serif italic">·  ·  ·</span></div>
+  <div class="rounded-2xl border border-[var(--line)] bg-white/60 p-6 mt-12 flex items-start gap-4">
+    <div class="text-2xl shrink-0">📩</div>
+    <div>
+      <div class="font-semibold text-[var(--ink)] mb-1">题图致敬: 推文中那个 "everything is HTML" 的瞬间。</div>
+      <div class="text-[13px] text-[var(--mute)]">阅读原推 → <a href="https://x.com/trq212/status/2052809885763747935" target="_blank" rel="noopener" style="color:var(--accent)">x.com/trq212/status/2052809885763747935</a></div>
+    </div>
+  </div>
+</article>
+</body>
+</html>

package/skills/article-magazine/example.md ADDED Viewed

@@ -0,0 +1,38 @@
+# 我读完 @trq212 那条推之后, 把所有 markdown 都换成了 HTML
+> 灵感原文: https://x.com/trq212/status/2052809885763747935
+>
+> 简而言之: 在 AI 写作 / 编辑器 / 代理时代, markdown 这个"中间态"已经撑不住了 —— HTML 才是面向读者的最终形态。
+## 让我点头的三个观察
+第一, 我们对 markdown 的爱, 主要是写起来爽。但读者从来没投过票。
+读者拿到的永远是某个 markdown 渲染器吐出来的结果 —— 而那个渲染器属于平台, 不属于你。
+第二, 截图发推这件事, markdown 输了。
+随便挑一段 markdown, 截图发出去都是被 GitHub 默认主题压扁的灰白方块。HTML 可以是壁纸级图片。
+第三, 公众号 / 知乎 / 小红书 / Notion / 飞书 —— 每一家解释 markdown 的方式都不一样。
+你写一份, 5 个平台得调 5 次。HTML + 内联 CSS, 一次粘贴, 任何平台都还原。
+## 但 HTML 太啰嗦, 这是真的
+`<div class="...">` 写多了想吐, 这是事实。
+之前没人愿意花成本写 HTML, 因为同样的内容, markdown 30 秒, HTML 30 分钟。
+变量是 —— **AI 把这 30 分钟降到 30 秒了**。
+你写 markdown, AI 把它升级成可交付的 HTML。你管最终形态, AI 管啰嗦细节。
+## 我们顺手做了一个工具
+灵感来自原推, 加上 Claude Code 团队的实践, 我们做了 [HTML Anything](https://github.com/your-org/html-anything)。
+左侧贴 markdown / CSV / JSON, 选一个模板 (杂志、PPT、海报、小红书、数据报告 …), 按 ⌘+Enter ——
+本地的 Claude / Cursor / Codex 在你**已经登录**的 session 里跑, 几秒后右侧就是一份可以直接复制到公众号 / 推特 / 知乎的 HTML。
+不需要 API Key, 不浪费 token (二次编辑只跑 diff)。
+## 结论
+如果你也觉得 "markdown → 编辑器手动重排" 这件事浪费了你的人生 —— 看一眼原推, 看一眼 Claude Code 团队的迁移, 然后试试任何一个能把 markdown 自动升格为 HTML 的工具。
+> 题图致敬: 推文中那个 "everything is HTML" 的瞬间。

package/skills/canvas-design/SKILL.md ADDED Viewed

@@ -0,0 +1,45 @@
+---
+name: canvas-design
+description: |
+  Create beautiful visual art in PNG and PDF documents using design philosophy and aesthetic principles for posters, illustrations, and static pieces.
+triggers:
+  - "canvas design"
+  - "visual art"
+  - "poster design"
+  - "create poster"
+  - "illustration"
+  - "海报"
+  - "插画"
+od:
+  mode: image
+  category: image-generation
+  upstream: "https://github.com/anthropics/skills/tree/main/canvas-design"
+---
+# canvas-design
+> Curated from Anthropic's official skills repository.
+## What it does
+Create beautiful visual art in PNG and PDF documents using design philosophy and aesthetic principles for posters, illustrations, and static pieces.
+## Source
+- Upstream: https://github.com/anthropics/skills/tree/main/canvas-design
+- Category: `image-generation`
+## How to use
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To run the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/anthropics/skills/tree/main/canvas-design
+```
+Then ask the agent to invoke this skill by name (`canvas-design`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/skills/design-templates/audio-jingle/SKILL.md ADDED Viewed

@@ -0,0 +1,132 @@
+---
+name: audio-jingle
+description: |
+  Audio generation skill — jingles, beds, voiceover, and sound effects.
+  Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax
+  TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or
+  AudioCraft. Output is one MP3/WAV file saved to the project folder.
+triggers:
+  - "music"
+  - "jingle"
+  - "bed"
+  - "voiceover"
+  - "tts"
+  - "sound effect"
+  - "音乐"
+  - "配音"
+  - "音效"
+od:
+  mode: audio
+  surface: audio
+  scenario: marketing
+  preview:
+    type: html
+    entry: example.html
+  design_system:
+    requires: false
+  example_prompt: |
+    A 30-second upbeat indie-pop jingle for a coffee shop launch — warm
+    electric piano lead, brushed drums, gentle bass, a single sun-soaked
+    "ahhh" choir on the chorus. No vocals. Loop-friendly tail.
+---
+# Audio Jingle Skill
+Three sub-modes. The active project's `audioKind` decides which one
+runs:
+| `audioKind` | Models we route to | Plan focus |
+|---|---|---|
+| `music` | Suno V5 (default), Udio, Lyria 2 | genre + tempo + instrumentation |
+| `speech` | MiniMax TTS (default), Fish, ElevenLabs V3 | script + voice + pacing |
+| `sfx` | ElevenLabs SFX (default), AudioCraft | texture + impact + duration |
+## Resource map
+```
+audio-jingle/
+├── SKILL.md
+└── example.html
+```
+## Workflow
+### Step 0 — Read the project metadata
+`audioKind`, `audioModel`, `audioDuration` (seconds), and (for speech)
+`voice`. Branch by `audioKind` and use the values verbatim — no
+clarifying form unless something is marked `(unknown — ask)`.
+Important: `voice` is provider-specific. For `minimax-tts`, `--voice`
+must be a valid MiniMax `voice_id` (for example `male-qn-qingse`), not
+a natural-language description. If you only have a prose voice brief
+("warm female narrator", "neutral Mandarin"), keep that in your plan
+but omit `--voice` so the daemon's default voice id applies, or ask the
+user to choose a specific id.
+### Step 1 — Plan
+**Music**
+- Genre + reference artists (1-2)
+- Tempo (BPM) + key
+- Instrumentation (3-5 instruments max)
+- Vocals: yes / no / hummed / choir
+- Mood arc (intro → chorus → outro)
+**Speech**
+- Script (final, not draft — TTS runs verbatim)
+- Voice target + pacing
+  For MiniMax this means a real `voice_id`, not prose in `--voice`
+- Pronunciation hints for proper nouns / acronyms
+**SFX**
+- Texture (impact / whoosh / ambience / foley)
+- Duration + envelope (sharp attack vs. gentle swell)
+- Layering note (single hit vs. stacked)
+State the plan in 2-3 sentences before dispatching.
+### Step 2 — Compose the prompt
+Use the format the upstream model prefers. Bind `audioDuration` to the
+API parameter directly; never put "make it 30 seconds" in prose.
+### Step 3 — Dispatch via the media contract
+Use the unified dispatcher — do **not** call provider APIs by hand:
+```bash
+"$OD_NODE_BIN" "$OD_BIN" media generate \
+  --project "$OD_PROJECT_ID" \
+  --surface audio \
+  --audio-kind "<music|speech|sfx>" \
+  --model "<audioModel from metadata>" \
+  --duration <audioDuration seconds> \
+  [--voice "<provider voice id (speech only)>"] \
+  --output "<short-slug>-<duration>s.mp3" \
+  --prompt "<assembled prompt from Step 2 — for speech, the literal script>"
+```
+The command prints one line of JSON: `{"file": {"name": "...", ...}}`.
+The bytes land in the project; the FileViewer renders the audio
+transport controls automatically.
+### Step 4 — Hand off
+Reply with: plan summary, the filename returned by the dispatcher, and
+one sentence on what to try if the user wants a variation (e.g. "swap
+tempo from 92 to 108 BPM" rather than "make it different").
+## Hard rules
+- TTS runs your script **literally**. Proof it before dispatching —
+  even one stray comma changes the cadence.
+- MiniMax TTS rejects free-form voice prose in `--voice`. Use a real
+  MiniMax `voice_id` (for example `male-qn-qingse`) or omit the flag
+  and let the daemon's default voice apply.
+- Music: under 30s = single section; 30–90s = intro + body; 90s+ =
+  full arc. Don't try to fit a 3-act song into 15 seconds.
+- SFX: prefer one well-described layer over a paragraph of "make it
+  cool" — generators reward specific texture words.
+- Save the file every turn. The audio viewer shows transport controls
+  the moment the file lands.

package/skills/design-templates/audio-jingle/example.html ADDED Viewed

@@ -0,0 +1,128 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Audio jingle — example</title>
+    <style>
+      :root {
+        --bg: #f5efe5;
+        --panel: #ffffff;
+        --ink: #1c1b1a;
+        --muted: #8b8579;
+        --accent: #c96442;
+        --grid: #e6dfd1;
+      }
+      * { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink);
+        font-family: 'Iowan Old Style', 'Charter', Georgia, serif; }
+      body { min-height: 100dvh; display: grid; place-items: center; padding: 32px; }
+      .card {
+        width: min(640px, 92vw);
+        background: var(--panel);
+        border-radius: 8px;
+        padding: 26px 28px 22px;
+        box-shadow: 0 16px 40px rgba(28,27,26,0.10), 0 1px 2px rgba(28,27,26,0.05);
+        border: 1px solid rgba(28,27,26,0.06);
+      }
+      .row1 { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
+      .icon {
+        width: 44px; height: 44px; border-radius: 50%;
+        background: var(--accent); color: #fff;
+        display: grid; place-items: center;
+        box-shadow: 0 6px 18px rgba(201, 100, 66, 0.35);
+      }
+      .icon svg { width: 22px; height: 22px; }
+      .title { margin: 0; font-size: 20px; line-height: 1.2; }
+      .sub { font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+        font-size: 11px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 2px; }
+      .wave {
+        display: flex; align-items: end; gap: 3px;
+        height: 96px; padding: 0 4px;
+        border-top: 1px dashed var(--grid);
+        border-bottom: 1px dashed var(--grid);
+      }
+      .wave span {
+        flex: 1; background: linear-gradient(180deg, var(--accent), #a4502f);
+        border-radius: 2px;
+        animation: bob 2s ease-in-out infinite;
+        animation-delay: var(--d, 0s);
+      }
+      @keyframes bob {
+        0%, 100% { height: var(--h, 30%); }
+        50% { height: calc(var(--h, 30%) * 1.6); }
+      }
+      .transport {
+        margin-top: 14px;
+        display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px;
+        align-items: center;
+      }
+      .play {
+        width: 36px; height: 36px; border-radius: 50%;
+        background: var(--ink); color: #fff;
+        display: grid; place-items: center;
+      }
+      .timeline {
+        height: 4px; border-radius: 2px;
+        background: linear-gradient(90deg, var(--accent) 0 32%, var(--grid) 32% 100%);
+      }
+      .time {
+        font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+        font-size: 11px; color: var(--muted);
+        letter-spacing: 0.08em;
+      }
+      .badge {
+        font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+        font-size: 10px; color: var(--accent);
+        letter-spacing: 0.18em; text-transform: uppercase;
+        padding: 4px 8px; border-radius: 999px;
+        background: rgba(201, 100, 66, 0.1);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="card">
+      <div class="row1">
+        <div class="icon" aria-hidden>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+        </div>
+        <div>
+          <h1 class="title">A 30s coffee-shop launch jingle.</h1>
+          <div class="sub">suno-v5 · 92 BPM · loop-friendly tail</div>
+        </div>
+      </div>
+      <div class="wave" aria-hidden>
+        <span style="--h:24%;--d:0s"></span>
+        <span style="--h:38%;--d:.05s"></span>
+        <span style="--h:52%;--d:.1s"></span>
+        <span style="--h:64%;--d:.15s"></span>
+        <span style="--h:48%;--d:.2s"></span>
+        <span style="--h:70%;--d:.25s"></span>
+        <span style="--h:42%;--d:.3s"></span>
+        <span style="--h:58%;--d:.35s"></span>
+        <span style="--h:36%;--d:.4s"></span>
+        <span style="--h:62%;--d:.45s"></span>
+        <span style="--h:26%;--d:.5s"></span>
+        <span style="--h:50%;--d:.55s"></span>
+        <span style="--h:34%;--d:.6s"></span>
+        <span style="--h:46%;--d:.65s"></span>
+        <span style="--h:58%;--d:.7s"></span>
+        <span style="--h:30%;--d:.75s"></span>
+        <span style="--h:44%;--d:.8s"></span>
+        <span style="--h:54%;--d:.85s"></span>
+        <span style="--h:28%;--d:.9s"></span>
+        <span style="--h:48%;--d:.95s"></span>
+      </div>
+      <div class="transport">
+        <div class="play" aria-hidden>
+          <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M6 4v16l14-8z"/></svg>
+        </div>
+        <div class="timeline" aria-hidden></div>
+        <span class="time">00:09 / 00:30</span>
+        <span class="badge">MP3</span>
+      </div>
+    </div>
+  </body>
+</html>

package/skills/design-templates/blog-post/SKILL.md ADDED Viewed

@@ -0,0 +1,80 @@
+---
+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
+  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 Skill
+Produce a single long-form article page — editorial layout, no chrome.
+## Workflow
+1. **Read the active DESIGN.md** (injected above). Lean into the typography
+   tokens — long-form is 70% type, 20% image, 10% chrome.
+2. **Pick the topic** from the brief and write a real article — at least 600
+   words across 4–6 H2 sections. No lorem ipsum.
+3. **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.
+4. **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.
+5. **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.