Home / All Skills / Docs & Knowledge / dating-web
English (EN)简体中文 (ZH)日本語 (JA)
Docs & Knowledge · nexu-io/html-anything

dating-web

Consumer-grade matching dashboard: signal ticker + KPIs + 30-day bar chart + trends

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, January 2004；GitHub API spdx_id=Apache-2.0）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

The template itself contains no executable code: the loader reads the frontmatter and body from src/lib/templates/skills/<id>/SKILL.md, returning the body along with example content as LoadedSkill.

next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
What is happening here: SKILL.md is the sole source of behavior—the frontmatter is for picker rendering (zh_name, emoji, aspect_hint, tags, example_*, etc.), while the entire body serves as the prompt. The loader performs no semantic validation, passing whatever is written in the template.

The host assembles the prompt in a fixed sequence before dispatch: the template body is sandwiched between SHARED_DESIGN_DIRECTIVES and [Input Format] / [User Content].

next/src/lib/templates/shared.ts
Wrap a per-template instruction body with the shared design directives and
What is happening here: The template only defines 'what this specific deliverable looks like' (layout, rhythm, components). Shared directives enforce cross-template hard constraints—single-file HTML, prohibition of file tools, loading Tailwind and Google Fonts via CDN, content authenticity, and CJK-Latin spacing (Pangu spacing).

Shared directives translate hard constraints into explicit prohibitions for the agent and enforce content-driven quantity (numbers in the template serve only as reference floors).

next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。
A subsequent rule in the same file specifies: the number of output slides / frames / cards / sections is entirely determined by the actual length and information structure of the [User Content]. This explains why such templates do not break when content grows longer: each piece of content gets at least one card or section, with the template merely providing a layout pool.

The actual execution is handled by the coding agent CLI installed and logged in on the user's local machine: the host spawns a child process, passes the prompt to it, and captures HTML streamed from stdout.

next/src/lib/agents/invoke.ts
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
What is happening here: The template skill only provides prompts; execution capabilities (including code generation and tool execution) stem from the existing permissions of the host CLI. The skill directory contains no script entry points, so security grading is based strictly on assets within the directory (host behavior is excluded from grading).

/api/convert is the template's execution path: it assembles skill.body and user content into a prompt, then passes it to invokeAgent.

next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
Edit mode follows buildEditPrompt instead (minimal-diff editing, file tools disabled, requiring direct streaming of complete HTML). Consequently, outputs from this template category remain stable: single-file HTML, inline CSS/SVG, and external links restricted to fonts and chart libraries explicitly requested by specific templates.

The template is positioned as a consumer-product-grade data wall, distinguished from conventional admin dashboards by editorial typography (serif display + monospace numbers) and restrained highlight colors.

next/src/lib/templates/skills/dating-web/SKILL.md
【意图】消费产品感的数据墙, editorial typography + 克制的高亮色。
The example achieves this aesthetic using three font families—DM Serif Display / DM Serif Text + IBM Plex Mono: an 800 italic serif for the brand name, monospace for numbers, and a warm paper background (#f4ede0).

A five-section layout: Left rail navigation → Ticker bar real-time signals → Headline KPIs → 30-day mutual-matches bar chart → Match-rate trend block.

next/src/lib/templates/skills/dating-web/SKILL.md
- Ticker bar 实时信号
What is happening here: Translating consumer aesthetics into concrete components—a signal ticker (the example uses a static text bar + NEXT TIER threshold prompt) makes the page feel like an active product rather than a static report.

The top KPI area is implemented as a 3×3 metric wall (Mutuals on file / Replies in 24h / Communities / Match rate / 2nd dates / Exes…), each cell featuring a conversational annotation.

next/src/lib/templates/skills/dating-web/example.html
<div class="label">Match rate</div>
While SKILL.md merely specifies Headline KPIs, the example freely expands to a 9-cell grid styled with .good/.bad color states and .note conversational commentary (e.g., 'too fast. wait 4–6h. they notice.'), blending naming and copywriting to establish a consumer product feel.

The 30-day bar chart is handcrafted with pure inline SVG (multiple rect elements, with the final one emphasized using highlight color #c14a2b), requiring no charting libraries or scripts.

next/src/lib/templates/skills/dating-web/example.html
<rect x="630" y="60" width="14" height="160" fill="#c14a2b"></rect>
What is happening here: The cadence of 30-day mutual matches is rendered without JS; highlighting the last bar signifies the current value while serving as a visual focal point, eliminating the need for interaction.

The example collapses the left rail into a top bar on narrow screens (aside.rail removes its right border and adds a bottom border in media queries), demonstrating an intentional responsive fallback despite its desktop focus.

next/src/lib/templates/skills/dating-web/example.html
aside.rail { border-right: none; border-bottom: 1px solid var(--ink); }
The same media query retains the rail's branding (mutuals. + avatar placeholder) and navigation list (mutuals & communities, etc.), preserving layout semantics after downscaling.

The page incorporates productization details such as version numbering (mutuals.v0.6.1) and 'NEXT TIER AT 2,080 MUTUALS', mimicking real consumer app features.

next/src/lib/templates/skills/dating-web/example.html
<div style="opacity:0.7;margin-top:2px;">mutuals.v0.6.1</div>
What is happening here: Chrome details like version tags and tier thresholds make the data wall read like an authentic app interface rather than a report screenshot—the fundamental difference between this template and a conventional dashboard.

2Core Capabilities

01Left rail navigation (branding + avatar placeholder + nav list)
02Ticker bar signal feed (example includes NEXT TIER threshold prompt)
03Headline KPIs (expanded into a 3×3 grid in the example, with good/bad semantic colors and conversational notes)
0430-day mutual-matches bar chart (handcrafted inline SVG with highlighted current value)
05Match-rate trend block
06Editorial typography system (serif display + monospace numbers) crafting a consumer aesthetic
07Narrow-screen responsive fallback (collapsing rail into a top bar)

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: Composed purely of prompt instructions and rule text, with no script execution or external impact.
Audit Notes: Grading is determined solely by the skill's own directory (consisting only of SKILL.md and example.html, with no scripts/, no bundled CLI, no credential reads, and no disk writes): contains no script entry points, bundled CLI tools, credential access, or disk write instructions. The body of SKILL.md does not require importing any external runtime endpoints (specifying only layout sections and visual criteria; font family names do not constitute endpoints). No outbound requests occur during execution. The only external endpoints appearing in the directory belong to fonts.googleapis.com and fonts.gstatic.com (example.html:7-9 for DM Serif Display / DM Serif Text / IBM Plex Mono); per standard criteria, these are classified as artifact-time references (fetched by the browser when opening the generated HTML, while the skill fetches, reports, or transfers nothing during execution) and thus do not trigger a risk escalation, listed here for tracking only. Host-wrapper mechanisms (loader → assemblePrompt → local agent CLI spawn, preview iframe sandbox) are host behaviors and are documented under verdict.risks.

5Second-Pass Verification

  • [discrepancy] KPI 数量与 SKILL.md 的关系 — SKILL.md 仅写 Headline KPIs 未给数量；示例实现为 3×3 共 9 格（含 Exes in your circle / Shared blocks / Logged-off hrs 等生活化指标）。属示例扩展而非模板要求，详情页不应把 9 格当作固定规格。
  • [ok] 「无脚本」判定 — dating-web/ 内 <script> 计数为 0；30 天柱状图以 <rect> 手工排布（含高亮柱 fill="#c14a2b"），无图表库、无 Canvas。
  • [ok] 端点与判级 — 目录内 http(s) 仅 fonts.googleapis.com（css2 样式表）与 fonts.gstatic.com（preconnect），均为产物期引用；SKILL.md 只写字族风格要求、未点名端点，执行期零外发，维持 green。
  • [ok] 窄屏降级是否存在 — 媒体查询内 aside.rail 改为 border-right:none + border-bottom，左栏折叠为顶部条，与桌面 1440 定位不冲突，属可用的移动端降级。
  • [ok] license / stars / commit 元数据 — GitHub API（api.github.com/repos/nexu-io/html-anything）：spdx_id=Apache-2.0、stargazers_count=8827、pushed_at=2026-09-15T03:36:24Z；工作副本 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699（与任务表 pin 553ed98c283f 同源）。
  • [ok] skill.path 与目录资产面 — pin 目录内该路径存在且含 SKILL.md；目录内文件清单已用 glob 全量核对（含隐藏文件），无 scripts/、无 references/、无二进制资产（competitive-teardown 的 assets/ 为纯 HTML，另行记录）。

6Verdict & Scenarios

  • Translates consumer aesthetics into tangible UI components (ticker bar, conversational KPI notes, versioning, tier thresholds), making the data wall resemble a live product rather than a report.
  • Renders all charts without scripts (handcrafted SVG rect elements + highlighted current value), remaining fully offline-readable with zero external dependencies aside from fonts.
  • An editorial typography system (DM Serif Display/Text + IBM Plex Mono) paired with a warm paper background creates a distinctive identity that never blends into standard dashboards.
  • KPIs feature semantic styling and opinionated commentary (.good/.bad + notes), aligning much closer to consumer product tone than raw metric lists.
    • Best for: Ideal for branded consumer product data walls: operational dashboards, growth post-mortems, and year-in-review pages for community, social, or matchmaking products. Also serves as an aesthetic alternative for data views when standard system-font dashboards feel too much like internal enterprise tools.
    Not for: Not suited for formal enterprise reporting (tone and color palette lean consumer/editorial, with subjective metric commentary); not suited for reports requiring strict accounting standards and source citations (use data-report instead); not suited for data exploration requiring interactive filtering (contains no scripts or data binding).
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload dating-web.tar.gz
    sha256: e3773d07ae610754…
    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.