Home / All Skills / Design & Motion / deck-obsidian-claude
English (EN)简体中文 (ZH)日本語 (JA)
Design & Motion · nexu-io/html-anything

deck-obsidian-claude

GitHub-dark + purple-blue ambient glow + tri-color gradient headings + GitHub-style code

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit
Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0（仓库根 LICENSE = Apache License, Version 2.0；GitHub API license.spdx_id = Apache-2.0；模板目录内无独立 LICENSE 文件）Commit 553ed98c28
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Directly borrows the GitHub Dark color palette (#0d1117 background / #161b22 surface / #30363d border), naturally aligning code blocks and status colors with developers' visual habits without reinventing a dark theme system.

next/src/lib/templates/skills/deck-obsidian-claude/example.html
--oc-bg:#0d1117;
Borrowing established product palettes is a low-cost, high-recognition approach: the target audience's eyes are already accustomed to this contrast level.

'Purple-blue ambient glow' = two overlaid radial-gradient layers (purple at 28%/38%, blue at 72%/62%), illuminating from the top-left and bottom-right respectively to create a diagonal atmospheric feel instead of a uniform gradient.

next/src/lib/templates/skills/deck-obsidian-claude/example.html
.tpl-obsidian-claude-gradient .oc-cbg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 28% 38%,rgba(124,58,237,.25) 0%,transparent 60%),radial-gradient(ellipse at 72% 62%,rgba(88,166,255,.18) 0%,transparent 60%)}
Two offset light sources provide more volume and depth than a single gradient layer without degrading center text contrast.

'60px grid mask' = bidirectional 1px lines (#30363d 40%) + 60px spacing + a radial mask preserving only the center, matching the fixed 60px defined in SKILL.md.

next/src/lib/templates/skills/deck-obsidian-claude/example.html
.tpl-obsidian-claude-gradient .oc-cgrid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(48,54,61,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(48,54,61,.4) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse at center,black 35%,transparent 80%)}
The grid contributes to an 'engineering aesthetic', but the mask fades it out toward the edges to avoid competing with body text.

'Tri-color gradient headings' = linear-gradient(135deg, #a855f7 → #60a5fa → #34d399) + background-clip:text; the purple-to-blue-to-mint green spectrum aligns with common colors in Claude and developer ecosystems.

next/src/lib/templates/skills/deck-obsidian-claude/example.html
.tpl-obsidian-claude-gradient .oc-g{background:linear-gradient(135deg,#a855f7 0%,#60a5fa 55%,#34d399 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
The gradient is applied only to heading text while keeping body text solid—restricting visual focus to one place to avoid visual clutter.

'GitHub-style code + purple left-border highlight callouts': code blocks use a #010409 dark background + four token classes (.cp green / .cc blue / .ca purple / .cm dim gray), matching GitHub's syntax highlighting conventions.

next/src/lib/templates/skills/deck-obsidian-claude/example.html
.tpl-obsidian-claude-gradient .oc-code{background:#010409;border:1px solid var(--oc-border);border-radius:12px;padding:20px 24px;font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.85;width:100%;max-width:860px;text-align:left;color:#e6edf3}
Code is the core content of this tutorial deck; replicating a familiar color scheme significantly reduces reading effort.

'Purple pill tags' = pill labels + semi-transparent purple background (rgba(124,58,237,.14)) + 1px purple border, used for topic labeling (MCP / agent, etc.); four-color badges (.oc-bp/.oc-bb/.oc-bg/.oc-bo) are also available for status tagging.

next/src/lib/templates/skills/deck-obsidian-claude/example.html
.tpl-obsidian-claude-gradient .oc-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--oc-accent3);background:rgba(124,58,237,.14);border:1px solid rgba(168,85,247,.3);padding:5px 16px;border-radius:999px;margin-bottom:22px}
Tags act as navigational anchors for tutorial decks: readers use pills to quickly discern 'which topic this slide covers'.

The page skeleton follows a 'tutorial structure' rather than a 'product pitch': COVER / SECTION / comparison cards / step-by-step pages / code pages / STATS / QUOTE-CTA / THANKS, with example content covering an MCP setup guide connecting Obsidian to Claude Desktop.

next/src/lib/templates/skills/deck-obsidian-claude/example.html
<!-- 3. CONTENT — compare cards -->
The frontmatter's scenario: engineering and tags (github, dark, purple, mcp, agent) are reflected in concrete content types.

Runtime execution is fully handled by the host: zero executables in the template directory, zero <script> tags in examples; prompts are assembled by the host and passed to the local agent CLI.

next/src/lib/agents/invoke.ts
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
The skill itself consists purely of prompts + static preview assets.

2Core Capabilities

01Developer tutorial deck positioning (similar to GitHub Blog / Linear Changelog)
02GitHub-dark background + purple-blue radial ambient glow + 60px grid mask
03Centered layout + purple pill tags
04Tri-color gradient headings (#a855f7 → #60a5fa → #34d399)
05GitHub-style code palette (cp/cc/ca/cm four token types)
06Four-color status badges (purple/blue/green/orange semi-transparent pills)
07Comparison card grid (2-column / 3-column, centered fixed width)
08Step-by-step and configuration code slides (including MCP server setup examples)

3External Dependencies

KindDependency / Endpoint
networkGoogle Fonts（JetBrains Mono / Inter / Noto Sans SC）
network宿主共享指令声明的 Tailwind CDN（宿主侧要求，非本模板要求）
package示例配置文本里提到的 MCP server 包（仅作为教程代码示例出现，skill 不安装也不运行）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Can be auto-loaded
For Administrators
Register source and version
Evidence & Triggers (File Paths & Excerpts)
  • SKILL.md: Pure prompt instructions and rule text, with no script execution or external impact
Audit Notes: Evaluation target = the skill's own directory (next/src/lib/templates/skills/deck-obsidian-claude/): contains only SKILL.md and example.html, with no executable files such as .sh/.py/.mjs/.ts, no package.json, and no install scripts; contains no code accessing credentials / environment variables / cookies, and no disk write instructions (HTML is emitted by the model in response text and written to disk by the host frontend). Count of <script> in example = 0. SKILL.md contains purely layout and content rules, specifying no generation backend or API to be accessed at runtime; per Batch 4 guidelines (generated artifact references are not rated, pure instruction templates are rated green), this template is classified as pure instruction. The only endpoints appearing in the directory are the following (all belong to artifact examples or their metadata, fetched client-side by the browser, not initiated by skill code): 127.0.0.1:27123 (seen in example.html); fonts.googleapis.com (seen in example.html). Host-side behaviors are not rated here and are separately noted under verdict.risks: the convert route spawns a local agent CLI and passes prompts via stdin (next/src/lib/agents/invoke.ts), shared instructions require CDN imports of Tailwind / Google Fonts (next/src/lib/templates/shared.ts), and preview iframes use sandbox="allow-scripts allow-same-origin" (next/src/components/template-picker.tsx).

5Second-Pass Verification

  • [ok] 示例中的 127.0.0.1:27123 是否构成网络调用 — 不构成。该字符串只出现在 <pre> 的 MCP 配置示例文本里（OBSIDIAN_HOST 的值）；全文件 <script> 计数为 0，没有 fetch/XHR/Image/iframe 等任何请求代码，也没有 WebSocket。它是教程文案，不是运行时外发。
  • [ok] 「60px 网格 mask」是否兑现 — .oc-cgrid 的 background-size:60px 60px + mask-image radial-gradient，与 SKILL.md 的 60px 一致。
  • [ok] 「三色渐变标题」是否为真渐变 — .oc-g 使用 #a855f7 → #60a5fa → #34d399 的 135° 渐变 + background-clip:text。
  • [ok] 「GitHub 风代码 palette」是否真为四类 token — .cp / .cc / .ca / .cm 四个类分别对应绿 / 蓝 / 紫 / 暗灰，落在 #010409 深底代码块内。
  • [ok] 教程内容中的凭据写法是否安全 — 配置示例的 OBSIDIAN_API_KEY 用 xxxxxxxxxxxxxxxx 占位，未嵌入任何真实密钥；这是示例文案的良好实践。
  • [ok] 目录内是否有脚本 / 凭证读取 / 写盘 — 目录仅 SKILL.md + example.html；<script> 计数 0；无 env/凭证访问代码、无写盘代码。
  • [ok] pin commit 与路径 — HEAD = 553ed98c283f9c0f489902d035416a972d6a9699；skill.path = next/src/lib/templates/skills/deck-obsidian-claude，含 SKILL.md。

6Verdict & Scenarios

  • Color scheme borrowed from established product systems
  • High utility for code presentation slides
  • Complete tutorial structure
  • Zero JS and zero outbound requests
    • Best for: Suitable for developer tool tutorials, integration guides, changelog-style release notes, and MCP / agent ecosystem content: scenarios requiring a 'GitHub Blog look-and-feel + embeddable code'.
    Not for: Not suitable for light brand themes or formal business occasions (template hardcodes GitHub Dark); not suitable for marketing-driven launches (lacks large imagery and animations, focusing on code and steps); not suitable for high-fidelity print deliverables.
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload deck-obsidian-claude.tar.gz
    sha256: b2eadd1665cf47d9…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.