Design & Motion · nexu-io/html-anything
deck-graphify-dark
Midnight gradient + floating orbs + SVG force-directed graph + JetBrains Mono
L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit
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
The cover consists of three superimposed layers: a 160° midnight gradient background (#08080f → #0e1020 → #08080f) + three blurred glowing orbs + an SVG connected graph layer, all implemented in CSS/SVG without requiring external image assets.
next/src/lib/templates/skills/deck-graphify-dark/example.html
.tpl-graphify-dark-graph .slide{background:linear-gradient(160deg,#08080f,#0e1020 50%,#08080f);color:var(--gd-text);padding:64px 88px;overflow:hidden}
The 'AI-native / dev-tool launch' visual tone stems from these three overlapping layers rather than a static background image.
The 'floating orbs' are implemented with radial-gradient circles + filter:blur(110px) + 22s ease-in-out alternating animations (staggered delays across three orbs): pure CSS animations with no canvas and no WebGL.
next/src/lib/templates/skills/deck-graphify-dark/example.html
.tpl-graphify-dark-graph .gd-orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.35;animation:gdDrift 22s ease-in-out infinite alternate}
Numerous templates in the same repository use this exact technique for ambient lighting, offering extremely low cost without blocking the main thread.
The 'SVG force-directed graph' is actually a static SVG with manually positioned coordinates (lines and circles with fixed x/y, though comments claim 'live force-directed'), with no layout calculations in the file: the force-directed layout is purely a visual aesthetic.
next/src/lib/templates/skills/deck-graphify-dark/example.html
<!-- live force-directed graph bg -->
This is the only discrepancy from the description in this template—see the discrepancy item under verification.second_pass.
The 'rainbow gradient title' is achieved via an 8-stop linear-gradient + background-clip:text + a 4s linear animation rotating the 200% background, keeping the text itself transparent to showcase only the gradient.
next/src/lib/templates/skills/deck-graphify-dark/example.html
.tpl-graphify-dark-graph .gd-rainbow{background:linear-gradient(90deg,#ff0080,#ff4d00,#ff9900,#ffe600,#00c853,#0091ea,#6200ea,#ff0080);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:gdRainbow 4s linear infinite}
This is the only title style using a rainbow gradient in this batch, paired with a dark background to deliver high contrast and visual emphasis for section divider slides.
'Glassmorphism card slide' = 3% semi-transparent white background + 10% 1px white border + backdrop-filter:blur(20px) saturate(160%) + top 50% gradient highlight + inner stroke shadow.
next/src/lib/templates/skills/deck-graphify-dark/example.html
.tpl-graphify-dark-graph .gd-glass{position:relative;overflow:hidden;border-radius:20px;padding:22px 26px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(20px) saturate(160%);box-shadow:0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08)}
Glassmorphism cards allow information blocks on dark backgrounds to form independent semantic layers while letting the blurred orb ambient light pass through.
CLI command presentation = JetBrains Mono 32px green text + dual-layer text-shadow (30px / 60px) creating a neon glow, serving as the core visual prop for the 'dev tool launch' aesthetic.
next/src/lib/templates/skills/deck-graphify-dark/example.html
.tpl-graphify-dark-graph .gd-cmd{font-family:'JetBrains Mono',monospace;font-size:32px;font-weight:700;color:var(--gd-green);text-shadow:0 0 30px rgba(126,211,164,.45),0 0 60px rgba(126,211,164,.15);letter-spacing:-.01em}
Encodes 'this command is important' via glow intensity rather than adding borders or background fills.
8 slide templates in the example: COVER / SECTION DIVIDER / CONTENT (plugin grid) / CODE / CHART (race diagram) / PIPELINE / CTA / THANKS; desktop grids use gd-grid-3 and gd-grid-4 for three-column and four-column layouts.
next/src/lib/templates/skills/deck-graphify-dark/example.html
<!-- 5. CHART — race diagram -->
Slide types cover the presentation sequence of a dev-tool launch: Positioning → Capabilities → Installation → Data → Workflow → Action.
Runtime is handled entirely by the host: the template directory contains zero executable files, and the prompt is assembled by assemblePrompt before being passed to the local agent CLI for execution.
next/src/lib/agents/invoke.ts
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
The skill itself is purely prompt + preview assets.
2Core Capabilities
01AI-native / Knowledge Graph / dev-tool launch positioning
02Cover: midnight gradient + floating blur orbs + SVG graph background
03Section slide: large rainbow gradient title
04Code / CLI slide: JetBrains Mono + neon glow
05Glassmorphism card slide
063-column / 4-column desktop grids (plugins, feature checklists)
07Pill tags (gd-tag) for keyword labeling
08SVG connected graph as decorative background (manually placed coordinates for line + circle)
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| network | Google Fonts（JetBrains Mono / Inter / Noto Sans SC / Space Grotesk） |
| network | 宿主共享指令声明的 Tailwind CDN（宿主侧要求，非本模板要求） |
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; no script execution or external impact.
Audit Notes: . Evaluation target = the skill directory itself (next/src/lib/templates/skills/deck-graphify-dark/): The directory contains only SKILL.md and example.html, with no executable files such as .sh/.py/.mjs/.ts, no package.json, and no installation scripts; it contains no code reading credentials / environment variables / cookies, nor disk-writing instructions (HTML is output in the model response body, with disk writes handled by the host frontend). Count of <script> in example = 0. SKILL.md consists purely of layout and content specifications and does not specify any generation backends or APIs to access at runtime; following the Batch 4 criteria (generated artifact references are not evaluated; pure instruction templates are rated green), this template is classified as pure instruction. The only endpoints actually appearing in the directory are the following (both belong to artifact examples or their metadata, fetched by the browser rather than initiated by skill code): fonts.googleapis.com (found in example.html); www.w3.org (found in example.html). Host-side behaviors are not graded 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 for Tailwind / Google Fonts (next/src/lib/templates/shared.ts), and the preview iframe uses sandbox="allow-scripts allow-same-origin" (next/src/components/template-picker.tsx).
5Second-Pass Verification
- [discrepancy] 「SVG 力导向图谱」是否真为力导向布局 — 否。示例是手摆固定坐标的 <line>/<circle>（如 <line x1="300" y1="200" x2="520" y2="340"/>），文件内没有 d3-force / requestAnimationFrame / 任何布局计算，注释 <!-- live force-directed graph bg --> 属描述性夸张（视觉上是「无序连线 + 节点」的图谱造型）。对产出无实际影响，但描述与实现不符。
- [ok] 「漂浮 orbs」是否真是动画 — gd-orb 带 filter:blur(110px) 与 animation:gdDrift 22s ease-in-out infinite alternate，三球错开 delay（gd-orb-2 / gd-orb-3 各有 animation-delay）。
- [ok] 「彩虹渐变标题」是否存在 — gd-rainbow 的 8 段色标 + background-clip:text + gdRainbow 4s 动画。
- [ok] 「Glassmorphism 卡片」是否有真实现 — gd-glass 使用 backdrop-filter:blur(20px) saturate(160%) 与半透明描边、内高光。
- [ok] 目录内是否有脚本 / 网络调用 / 凭证读取 — 目录仅 SKILL.md + example.html；<script> 计数 0；无 fetch/XHR/env/写盘代码；无凭证读取。
- [ok] SKILL.md 是否要求运行时外链 — SKILL.md 只列色值与页型（无 URL）；字体 @import 属 example.html（产物示例）。
- [ok] pin commit 与路径 — HEAD = 553ed98c283f9c0f489902d035416a972d6a9699；skill.path = next/src/lib/templates/skills/deck-graphify-dark，含 SKILL.md。
- [ok] README 收录一致性 — README deck 表列出 deck-graphify-dark（Dark, data-graphic-heavy deck），与目录内容相符。
6Verdict & Scenarios
Best for: Ideal for launches or technical briefings of AI-native products, dev tools, or CLIs: dark mode + neon + graph visuals convey an 'infrastructure' feel while naturally accommodating plugin grids, commands, and data comparisons.
Not for: Not suitable for formal corporate / print use cases (high-saturation dark themes, glassmorphism, and neon glow distort heavily in print); not suitable for light brand visuals (hardcoded dark theme); not suitable for presentations requiring true dynamic graph layout rendering (the example is a static SVG).
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload deck-graphify-dark.tar.gz
sha256:
Option B · Copy Guide for Agenta286c3d514e66d5b…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.