opencode-skills-collection 4.0.35 → 4.0.37

package/bundled-skills/liuguang-banlan-ui/SKILL.md

@@ -0,0 +1,135 @@
+---
+name: liuguang-banlan-ui
+description: Builds two parameterized UI modes—流光溢彩白 (iridescent white) and 五彩斑斓黑 (colorful black)—with OKLCH, WebGL/CSS fallback, vision gating, screenshot QA, and total/per-color intensity reports. Use when a UI request names either mode or needs measured color parameters.
+category: creative
+risk: critical
+source: self
+source_type: self
+date_added: "2026-08-15"
+author: 3516027002att-ui
+tags: [ui, frontend, oklch, webgl, accessibility]
+tools: [codex, claude, cursor, gemini]
+---
+
+# 流光斑斓 UI 工坊
+
+## Overview
+
+Use one skill with two explicit modes, not a generic material library. Preserve a stable information workspace while treating the spectral field as a controlled environmental layer. Keep the implementation parameterized so every output can report total color intensity, per-color intensity, OKLCH values, peak opacity, spatial scale, phase, and measured coverage.
+
+Read [style-contract.md](references/style-contract.md) before choosing a mode or changing palette semantics. Read [verification.md](references/verification.md) before claiming visual or screenshot validation.
+
+## When to Use
+
+- Use when a user names 流光溢彩白 or 五彩斑斓黑, asks for one unified skill covering both, or needs a reusable parameterized starter.
+- Use when the final report must include total color intensity, each color's intensity, OKLCH values, and screenshot measurements.
+- Do not use for a generic theme-token library or an unparameterized visual mockup.
+
+## Workflow
+
+### 1. Classify the request
+
+- Map “流光溢彩白” to `opal` and “五彩斑斓黑” to `obsidian`.
+- If both are requested, keep one shared implementation and two explicit theme manifests.
+- Inspect the existing project, framework, route, build system, and uncommitted work before copying starter assets.
+- Use the smallest appropriate change surface; do not replace an existing design system without authorization.
+
+### 2. Gate visual verification
+
+- Confirm that the executing model can directly inspect images before taking a screenshot-based visual claim.
+- If native image inspection is unavailable, continue with code and deterministic pixel checks but mark the result `visual-unverified`; never infer visual quality from DOM or CSS alone.
+- Record `modelVision`, `screenshotCapture`, `deterministicPixelMetrics`, and `visualVerificationMode` in the final report.
+
+### 3. Establish the scene and structure
+
+- Choose a neutral, information-dense workbench domain such as field research, inventory, monitoring, or operations.
+- Use a continuous three-pane or similarly coherent workspace: navigation, queue/list, detail, metadata, and one signature observation band.
+- Keep color in the field, ribbon, markers, and state accents; keep text, controls, boundaries, and semantic hierarchy stable.
+- Prefer restrained surfaces and weak fills. Avoid turning every region into a floating card.
+
+### 4. Implement the parameter contract
+
+Maintain a serializable manifest with these top-level fields:
+
+```js
+{
+  schemaVersion, mode, label, preset, seed,
+  overallColorIntensity,
+  base: { oklch },
+  colors: [{
+    id, label, oklch, srgbFallback,
+    intensity, peakOpacity, lightnessBias,
+    fieldScale, phase,
+    measuredCoverage, effectiveShare
+  }],
+  field: { scale, octaves, warpStrength, motionSpeed, staticTime, ditherStrength, luminanceCap },
+  output: { colorSpace, p3Enhancement, reducedMotion }
+}
+```
+
+- Keep every intensity in `[0, 1]`; make `overallColorIntensity` the global budget and `colors[].intensity` the per-color budget.
+- Use OKLCH as the authoring space and provide an sRGB fallback for non-OKLCH contexts.
+- Keep the seed, static frame, phases, and field scales deterministic; do not use random per render.
+- Expose sliders for the global intensity and every configured color. Make reset, JSON export, and copy actions available.
+
+### 5. Build the spectral field
+
+- Use a procedural fBm/domain-warp field or an equivalent continuous field; keep it behind the interface with `pointer-events: none`.
+- Use broad flowing hue regions or ribbons, not obvious radial blobs, spotlight circles, or hard rainbow bands.
+- Upload the complete palette and per-color field scales to the renderer. Apply the dark-mode luminance cap after palette mixing.
+- Provide a CSS fallback with comparable visual intent when WebGL is unavailable.
+- Pause or freeze motion when the document is hidden or `prefers-reduced-motion` is active.
+- Keep the renderer local and dependency-light; do not require remote fonts, images, or APIs for the starter.
+
+### 6. Preserve interaction and accessibility
+
+- Keep semantic headings, labels, focus-visible states, keyboard escape behavior, and readable contrast.
+- Test navigation, record/list selection, tab selection, parameter panel open/close, slider input, reset, export, and copy fallback.
+- Make the workbench responsive at a narrow mobile viewport; collapse navigation and metadata without losing the primary record flow.
+
+### 7. Validate and report
+
+- Scaffold a clean starter with `scripts/scaffold_template.py` when a neutral implementation is needed.
+- Treat JavaScript manifests as executable code: inspect them first and run the
+  bundled helpers only on reviewed, locally authored configuration. Never pass
+  an untrusted or freshly downloaded manifest to either Python helper.
+- Run `scripts/validate_manifest.py` on each theme config before rendering.
+- Capture desktop and mobile screenshots with a real browser. Inspect them directly if visual capability is available.
+- Run `scripts/measure_preview.py` on the pure field screenshot and retain measured chromatic ratio, luminance statistics, per-color coverage, and effective share.
+- Report configured parameters separately from measured values; do not imply that pixel attribution is an exact shader contribution.
+- Use `partial`, `visual-unverified`, or `blocked` when a required capability or native check is unavailable.
+
+## Limitations and capability states
+
+- WebGL is optional. The starter switches to a CSS spectral fallback when a WebGL context cannot be created or shader/program setup fails; fallback rendering is parameterized but is not pixel-identical to the shader.
+- Native image inspection and browser screenshot capture are runtime capabilities, not guaranteed by this skill. If either is unavailable, keep the result visual-unverified and report the missing capability explicitly.
+- The deterministic measurement helper requires the optional Python packages listed in scripts/requirements.txt. Without them it exits with an unavailable-capability message instead of producing a misleading report.
+- Manifests may contain 3 to 12 colors. The renderer uploads every configured entry up to that validated limit, while the shader ignores only unused capacity slots.
+- Configured values, fallback values, and measured pixel attribution describe different things; do not treat measured per-color coverage as an exact decomposition of shader energy.
+
+## Anti-pattern guardrails
+
+- Do not rename the two modes into a vague “reusable UI material” abstraction.
+- Do not use pure white as the only white-mode signal, black crush as the only dark-mode signal, or RGB neon as a shortcut to “colorful”.
+- Do not hide weak structure behind full-page glass, excessive blur, or giant gradients.
+- Do not report visual success from screenshot dimensions, DOM state, or static CSS alone.
+- Do not include private project names, links, repository identifiers, or source-chat contents in generated assets or reports.
+
+## Bundled resources
+
+Use the bundled starter under `assets/starter/` as a neutral base. Copy only the selected mode when integrating into an existing project, and preserve the existing project’s content and build conventions.
+
+### scripts/
+
+- `scaffold_template.py`: copy the neutral starter for `opal`, `obsidian`, or both.
+- `validate_manifest.py`: parse a JavaScript manifest through Node and validate required fields and ranges.
+- `measure_preview.py`: measure a rendered pure-field PNG against the configured OKLCH palette.
+
+### references/
+
+- `style-contract.md`: mode-specific visual rules and recommended parameter ranges.
+- `verification.md`: visual-capability gate, browser QA, pixel measurement, and report schema.
+
+### assets/
+
+`starter/` contains a neutral static workbench, shared renderer, and both theme variants. Treat it as output material, not as documentation to paste into context wholesale.

package/bundled-skills/liuguang-banlan-ui/assets/starter/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#9bded5"/><stop offset=".5" stop-color="#7a8eb9"/><stop offset="1" stop-color="#b88caf"/></linearGradient></defs>
+  <circle cx="32" cy="32" r="28" fill="#101419"/><circle cx="32" cy="32" r="18" fill="url(#g)" opacity=".82"/><circle cx="32" cy="32" r="7" fill="none" stroke="#fff" opacity=".72"/>
+</svg>

package/bundled-skills/liuguang-banlan-ui/assets/starter/index.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="两套参数化全场虹彩 UI 模板">
+  <title>全场虹彩 UI 模板</title>
+  <link rel="icon" href="./favicon.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="./launcher.css">
+</head>
+<body>
+  <main>
+    <header>
+      <p>Parameterized UI studies</p>
+      <h1>两种固定风格，两套完整工作台</h1>
+      <span>每套模板都包含实时参数面板、WebGL 全局色场、CSS 降级、响应式布局和 JSON 导出。</span>
+    </header>
+    <div class="template-list">
+      <a class="template opal" href="./opal/index.html">
+        <span class="swatch" aria-hidden="true"></span>
+        <span class="copy"><small>Template 01</small><strong>流光溢彩白</strong><span>白色是第一视觉，颜色像环境光一样遍布全局。</span></span>
+        <span class="arrow" aria-hidden="true">↗</span>
+      </a>
+      <a class="template obsidian" href="./obsidian/index.html">
+        <span class="swatch" aria-hidden="true"></span>
+        <span class="copy"><small>Template 02</small><strong>五彩斑斓黑</strong><span>黑色保持基材身份，暗虹彩只作为受控现象出现。</span></span>
+        <span class="arrow" aria-hidden="true">↗</span>
+      </a>
+    </div>
+  </main>
+</body>
+</html>

package/bundled-skills/liuguang-banlan-ui/assets/starter/launcher.css

@@ -0,0 +1,25 @@
+* { box-sizing: border-box; }
+:root { color-scheme: light dark; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+body { margin: 0; min-height: 100vh; background: oklch(17% 0.012 240); color: oklch(94% 0.008 220); }
+main { width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: clamp(48px, 10vw, 120px) 0; }
+header { max-width: 670px; margin-bottom: 48px; }
+header p { margin: 0 0 12px; color: oklch(70% 0.04 204); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
+header h1 { margin: 0; font-size: clamp(30px, 5vw, 52px); font-weight: 620; letter-spacing: -.045em; }
+header span { display: block; margin-top: 16px; color: oklch(70% 0.01 220); font-size: 14px; line-height: 1.7; }
+.template-list { border-top: 1px solid oklch(100% 0 0 / .12); }
+.template { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 24px 0; border-bottom: 1px solid oklch(100% 0 0 / .12); color: inherit; text-decoration: none; }
+.swatch { width: 116px; height: 76px; border: 1px solid oklch(100% 0 0 / .15); border-radius: 10px; transition: transform 180ms cubic-bezier(.25,1,.5,1); }
+.opal .swatch { background: radial-gradient(circle at 20% 20%, oklch(90% .06 197), transparent 48%), radial-gradient(circle at 80% 35%, oklch(92% .055 18), transparent 48%), radial-gradient(circle at 46% 95%, oklch(90% .05 302), transparent 54%), oklch(98% .004 94); }
+.obsidian .swatch { background: radial-gradient(circle at 20% 20%, oklch(27% .07 188), transparent 50%), radial-gradient(circle at 80% 35%, oklch(23% .06 284), transparent 52%), radial-gradient(circle at 46% 95%, oklch(24% .05 78), transparent 56%), oklch(10% .012 236); }
+.copy small { display: block; color: oklch(58% 0.012 220); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
+.copy strong { display: block; margin-top: 5px; font-size: 18px; font-weight: 620; }
+.copy span { display: block; margin-top: 6px; color: oklch(68% 0.012 220); font-size: 12px; }
+.arrow { color: oklch(65% 0.04 202); font-size: 18px; transition: transform 180ms cubic-bezier(.25,1,.5,1); }
+.template:hover .swatch { transform: translateY(-2px); }
+.template:hover .arrow { transform: translate(3px,-3px); }
+.template:focus-visible { outline: 2px solid oklch(72% .10 193); outline-offset: 6px; }
+footer { display: flex; flex-wrap: wrap; gap: 20px; padding-top: 22px; }
+footer a { color: oklch(72% .05 201); font-size: 12px; text-underline-offset: 4px; }
+footer a:hover { color: oklch(84% .05 201); }
+footer a:focus-visible { outline: 2px solid oklch(72% .10 193); outline-offset: 4px; }
+@media (max-width: 580px) { .template { grid-template-columns: 76px minmax(0,1fr) auto; gap: 14px; } .swatch { width: 76px; height: 64px; } .copy span { display: none; } }

package/bundled-skills/liuguang-banlan-ui/assets/starter/obsidian/index.html

@@ -0,0 +1,179 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="参数化五彩斑斓黑完整 UI 模板">
+  <meta name="theme-color" content="#0b0e11">
+  <title>Fieldnote · 五彩斑斓黑</title>
+  <link rel="icon" href="../favicon.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="../shared/base.css">
+  <link rel="stylesheet" href="./theme.css">
+</head>
+<body>
+  <canvas id="spectral-field" aria-hidden="true"></canvas>
+  <div class="app-shell">
+    <header class="topbar">
+      <div class="brand" aria-label="Fieldnote 首页">
+        <span class="brand-mark" aria-hidden="true"></span>
+        <span><strong>Fieldnote</strong><small>Research workspace</small></span>
+      </div>
+      <div class="location">
+        <button id="menu-toggle" class="icon-button menu-toggle" type="button" aria-label="打开导航" aria-controls="sidebar" aria-expanded="false">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
+        </button>
+        <span>北岸观察组</span><span class="location-separator">/</span><span id="page-location">今日概览</span>
+      </div>
+      <div class="top-actions">
+        <button id="motion-toggle" class="button" type="button" aria-pressed="false">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M8 5v14M16 5v14"/></svg><span>暂停环境</span>
+        </button>
+        <button id="parameter-toggle" class="button button-primary" type="button" aria-controls="parameter-panel" aria-expanded="false">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 7h10M18 7h2M4 17h2M10 17h10M14 4v6M6 14v6"/></svg><span>参数</span>
+        </button>
+      </div>
+    </header>
+
+    <aside id="sidebar" class="sidebar" data-open="false" aria-hidden="true" inert aria-label="主导航">
+      <div class="sidebar-primary">
+        <p class="nav-label">Workspace</p>
+        <nav>
+          <button class="nav-item" type="button" data-location="今日概览" aria-current="page">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 13h6V4H4v9Zm10 7h6V11h-6v9ZM4 20h6v-3H4v3Zm10-13h6V4h-6v3Z"/></svg>今日概览
+          </button>
+          <button class="nav-item" type="button" data-location="观察记录">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M5 4h14v16H5zM8 8h8M8 12h8M8 16h5"/></svg>观察记录
+          </button>
+          <button class="nav-item" type="button" data-location="样本集合">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="m12 3 8 4-8 4-8-4 8-4Zm-8 9 8 4 8-4M4 17l8 4 8-4"/></svg>样本集合
+          </button>
+          <button class="nav-item" type="button" data-location="观测位置">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z"/><circle cx="12" cy="10" r="2.5"/></svg>观测位置
+          </button>
+          <button class="nav-item" type="button" data-location="归档">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 7h16v13H4zM3 4h18v3H3zM9 11h6"/></svg>归档
+          </button>
+        </nav>
+        <p class="nav-label">Saved views</p>
+        <nav>
+          <button class="nav-item" type="button" data-location="待复核">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="8"/><path d="M12 8v5l3 2"/></svg>待复核 <span class="pane-count">06</span>
+          </button>
+          <button class="nav-item" type="button" data-location="本周标记">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="m12 3 2.6 5.3 5.9.9-4.3 4.2 1 5.9-5.2-2.8-5.2 2.8 1-5.9-4.3-4.2 5.9-.9L12 3Z"/></svg>本周标记
+          </button>
+        </nav>
+      </div>
+      <div class="sidebar-footer">
+        <div class="account"><span class="account-orb" aria-hidden="true"></span><span><strong>林屿</strong><span>Field researcher</span></span></div>
+      </div>
+    </aside>
+
+    <main class="main">
+      <div class="main-inner">
+        <section class="page-head" aria-labelledby="page-title">
+          <div>
+            <p class="eyebrow"><span data-theme-name>五彩斑斓黑</span> · 现场资料工作台</p>
+            <h1 id="page-title">潮间带观测 · 第 18 批</h1>
+            <p class="page-summary">整理今日采样、复核异常记录，并在归档前保持时间、位置与样本关系完整。</p>
+          </div>
+          <div class="status-cluster" role="status">
+            <span class="status-dot" aria-hidden="true"></span>
+            <span class="status-copy"><strong>同步完成</strong><span>21:36 · 18 项变更</span></span>
+          </div>
+        </section>
+
+        <section class="observation-band" aria-label="观测摘要">
+          <div class="band-title"><span>观测带</span><strong>北岸 · N37.22</strong></div>
+          <div class="metric"><span>有效记录</span><strong>128</strong></div>
+          <div class="metric"><span>待复核</span><strong>06</strong></div>
+          <div class="metric"><span>样本覆盖</span><strong>84.6%</strong></div>
+          <div class="metric"><span>窗口余量</span><strong>01:42</strong></div>
+        </section>
+
+        <section class="workbench" aria-label="观测工作区">
+          <section class="pane records-pane" aria-labelledby="records-title">
+            <div class="pane-head"><h2 id="records-title">记录队列</h2><span class="pane-count">12 / 128</span></div>
+            <div class="records" role="listbox" aria-label="观察记录">
+              <button class="record-row" type="button" role="option" aria-selected="true" data-title="潮池边缘 · 样本 042" data-time="19:42">
+                <span class="record-marker" style="--marker:var(--marker-cyan)"></span><span class="record-copy"><strong>潮池边缘 · 样本 042</strong><span>盐度偏移 · 已标记</span></span><span class="record-time">19:42</span>
+              </button>
+              <button class="record-row" type="button" role="option" data-title="岩缝剖面 · 样本 039" data-time="19:18">
+                <span class="record-marker" style="--marker:var(--marker-lilac)"></span><span class="record-copy"><strong>岩缝剖面 · 样本 039</strong><span>图像完整 · 待复核</span></span><span class="record-time">19:18</span>
+              </button>
+              <button class="record-row" type="button" role="option" data-title="浅滩网格 · 样本 036" data-time="18:53">
+                <span class="record-marker" style="--marker:var(--marker-gold)"></span><span class="record-copy"><strong>浅滩网格 · 样本 036</strong><span>位置已校正</span></span><span class="record-time">18:53</span>
+              </button>
+              <button class="record-row" type="button" role="option" data-title="背风侧 · 样本 031" data-time="18:21">
+                <span class="record-marker" style="--marker:var(--marker-rose)"></span><span class="record-copy"><strong>背风侧 · 样本 031</strong><span>缺少环境照片</span></span><span class="record-time">18:21</span>
+              </button>
+              <button class="record-row" type="button" role="option" data-title="南端标尺 · 样本 027" data-time="17:46">
+                <span class="record-marker" style="--marker:var(--marker-cyan)"></span><span class="record-copy"><strong>南端标尺 · 样本 027</strong><span>数据完整</span></span><span class="record-time">17:46</span>
+              </button>
+            </div>
+          </section>
+
+          <article class="pane detail-pane" aria-labelledby="record-title">
+            <div class="pane-head">
+              <div class="tab-list" role="tablist" aria-label="记录视图">
+                <button class="tab" type="button" role="tab" aria-selected="true" aria-controls="detail-copy" data-copy="水线后退约 1.8 米，潮池外缘出现连续盐度跃迁。样本表面保持湿润，未观察到明显扰动。建议与 18:53 的浅滩网格记录并列复核。">记录</button>
+                <button class="tab" type="button" role="tab" aria-selected="false" aria-controls="detail-copy" data-copy="关联了 4 张现场照片、2 个水质读数与 1 条位置修正。附件校验通过，原始文件已进入只读归档队列。">附件</button>
+                <button class="tab" type="button" role="tab" aria-selected="false" aria-controls="detail-copy" data-copy="19:47 完成盐度标签修正；20:12 补充观察者备注；21:03 进入批次复核队列。所有变更均保留原始记录。">变更</button>
+              </div>
+            </div>
+            <div class="detail-title">
+              <h2 id="record-title">潮池边缘 · 样本 042</h2>
+              <div class="detail-meta"><span>记录时间 <strong id="record-time">19:42</strong></span><span>观察者 LY-04</span><span>定位误差 ±1.2 m</span></div>
+            </div>
+            <div class="detail-body">
+              <div class="field-notes">
+            <p id="detail-copy" role="tabpanel">水线后退约 1.8 米，潮池外缘出现连续盐度跃迁。样本表面保持湿润，未观察到明显扰动。建议与 18:53 的浅滩网格记录并列复核。</p>
+                <dl>
+                  <div class="note-rule"><dt>表面温度</dt><dd>18.6 °C · 稳定</dd></div>
+                  <div class="note-rule"><dt>盐度</dt><dd>31.8 PSU · 高于同批中位值 1.4</dd></div>
+                  <div class="note-rule"><dt>基质</dt><dd>细砂与贝壳碎屑，局部附着藻膜</dd></div>
+                  <div class="note-rule"><dt>复核建议</dt><dd>保留；与相邻网格交叉比对后归档</dd></div>
+                </dl>
+              </div>
+              <figure class="mini-map" aria-label="样本位置示意图">
+                <svg viewBox="0 0 180 220" fill="none" stroke="currentColor">
+                  <path d="M-10 52c35-24 62-5 92-18 25-11 45-38 108-16M-10 92c42-24 71 2 103-13 34-16 58-32 97-19M-10 138c38-18 68 6 98-6 36-14 54-37 102-20M-10 181c35-16 68 4 101-7 30-10 61-27 99-16" opacity=".35"/>
+                  <path d="M118 43c-9 19-25 36-23 59 2 27 30 37 24 65-4 17-19 27-28 43" stroke-width="2"/>
+                  <circle cx="104" cy="119" r="5" fill="currentColor"/><circle cx="104" cy="119" r="12" opacity=".25"/>
+                </svg>
+              </figure>
+            </div>
+          </article>
+
+          <aside class="pane metadata-pane" aria-labelledby="metadata-title">
+            <div class="pane-head"><h2 id="metadata-title">记录属性</h2><span class="pane-count">verified</span></div>
+            <div class="metadata">
+              <section class="metadata-group"><h3>位置</h3><dl><div><dt>网格</dt><dd>N-18 / C4</dd></div><div><dt>纬度</dt><dd>37.2216</dd></div><div><dt>经度</dt><dd>121.0482</dd></div></dl></section>
+              <section class="metadata-group"><h3>采集</h3><dl><div><dt>批次</dt><dd>B-2026-0814</dd></div><div><dt>方法</dt><dd>surface</dd></div><div><dt>容器</dt><dd>V-042</dd></div></dl></section>
+              <section class="metadata-group"><h3>完整性</h3><dl><div><dt>字段</dt><dd>18 / 18</dd></div><div><dt>附件</dt><dd>04</dd></div><div><dt>校验</dt><dd>passed</dd></div></dl></section>
+            </div>
+          </aside>
+        </section>
+      </div>
+    </main>
+  </div>
+
+  <aside id="parameter-panel" class="parameter-panel" data-open="false" aria-hidden="true" inert aria-labelledby="parameter-title">
+    <div class="parameter-panel-head">
+      <div><p class="eyebrow">Parameter manifest</p><h2 id="parameter-title"><span data-theme-name>五彩斑斓黑</span>参数</h2><p><span id="preset-value"></span> · seed <span id="seed-value"></span> · <span id="renderer-value"></span></p></div>
+      <button id="parameter-close" class="icon-button" type="button" aria-label="关闭参数面板"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="m6 6 12 12M18 6 6 18"/></svg></button>
+    </div>
+    <div id="parameter-controls" class="parameter-scroll"></div>
+    <div class="parameter-footer">
+      <button id="export-parameters" class="button button-primary" type="button">导出参数 JSON</button>
+      <button id="copy-parameters" class="button" type="button">复制 JSON</button>
+      <button id="reset-parameters" class="button" type="button">恢复预设</button>
+    </div>
+  </aside>
+  <div id="live-status" class="sr-only" role="status" aria-live="polite"></div>
+
+  <script src="./theme-config.js"></script>
+  <script src="../shared/spectral-field.js"></script>
+  <script src="../shared/workbench.js"></script>
+</body>
+</html>

package/bundled-skills/liuguang-banlan-ui/assets/starter/obsidian/theme-config.js

@@ -0,0 +1,105 @@
+window.SPECTRAL_THEME = {
+  schemaVersion: "1.0",
+  mode: "obsidian",
+  label: "五彩斑斓黑",
+  preset: "obsidian-fieldnote-v1",
+  seed: 90821,
+  overallColorIntensity: 1.0,
+  base: {
+    oklch: { l: 0.098, c: 0.012, h: 236 }
+  },
+  colors: [
+    {
+      id: "teal",
+      label: "深潮青",
+      oklch: { l: 0.29, c: 0.055, h: 188 },
+      srgbFallback: "#183f3d",
+      intensity: 0.72,
+      peakOpacity: 0.29,
+      lightnessBias: 0.008,
+      fieldScale: 0.84,
+      phase: [0.11, 0.72],
+      measuredCoverage: null,
+      effectiveShare: null
+    },
+    {
+      id: "petrol",
+      label: "石油蓝绿",
+      oklch: { l: 0.25, c: 0.048, h: 211 },
+      srgbFallback: "#17333a",
+      intensity: 0.62,
+      peakOpacity: 0.27,
+      lightnessBias: 0.006,
+      fieldScale: 0.96,
+      phase: [0.74, 0.19],
+      measuredCoverage: null,
+      effectiveShare: null
+    },
+    {
+      id: "navy",
+      label: "夜航海军蓝",
+      oklch: { l: 0.225, c: 0.047, h: 251 },
+      srgbFallback: "#202b42",
+      intensity: 0.54,
+      peakOpacity: 0.26,
+      lightnessBias: 0.004,
+      fieldScale: 1.08,
+      phase: [0.37, 0.88],
+      measuredCoverage: null,
+      effectiveShare: null
+    },
+    {
+      id: "indigo",
+      label: "暗靛",
+      oklch: { l: 0.24, c: 0.052, h: 278 },
+      srgbFallback: "#2d2948",
+      intensity: 0.42,
+      peakOpacity: 0.24,
+      lightnessBias: 0.005,
+      fieldScale: 0.91,
+      phase: [0.93, 0.57],
+      measuredCoverage: null,
+      effectiveShare: null
+    },
+    {
+      id: "violet",
+      label: "紫影",
+      oklch: { l: 0.255, c: 0.05, h: 318 },
+      srgbFallback: "#3a293d",
+      intensity: 0.30,
+      peakOpacity: 0.21,
+      lightnessBias: 0.004,
+      fieldScale: 1.14,
+      phase: [0.25, 0.31],
+      measuredCoverage: null,
+      effectiveShare: null
+    },
+    {
+      id: "gold",
+      label: "氧化暗金",
+      oklch: { l: 0.30, c: 0.045, h: 82 },
+      srgbFallback: "#473c22",
+      intensity: 0.18,
+      peakOpacity: 0.17,
+      lightnessBias: 0.007,
+      fieldScale: 1.03,
+      phase: [0.61, 0.46],
+      measuredCoverage: null,
+      effectiveShare: null
+    }
+  ],
+  field: {
+    scale: 0.96,
+    octaves: 4,
+    warpStrength: 0.41,
+    motionSpeed: 0.01,
+    staticTime: 2.18,
+    ditherStrength: 0.82,
+    luminanceCap: 0.165
+  },
+  output: {
+    colorSpace: "srgb",
+    p3Enhancement: "feature-detected",
+    reducedMotion: "frozen-calibrated-frame"
+  }
+};

package/bundled-skills/liuguang-banlan-ui/assets/starter/obsidian/theme.css

@@ -0,0 +1,107 @@
+@supports not (color: oklch(0% 0 0)) {
+  :root {
+    --app-canvas: #111820;
+    --app-wash: rgba(17, 24, 32, 0.18);
+    --topbar-surface: rgba(19, 27, 35, 0.86);
+    --sidebar-surface: rgba(18, 26, 34, 0.82);
+    --band-surface: rgba(23, 32, 42, 0.82);
+    --workbench-surface: rgba(21, 29, 39, 0.82);
+    --pane-surface: rgba(22, 30, 40, 0.79);
+    --panel-surface: rgba(20, 28, 37, 0.95);
+    --button-surface: rgba(34, 44, 56, 0.66);
+    --ink-primary: #e4e9ec;
+    --ink-secondary: #abb8bf;
+    --ink-tertiary: #829099;
+    --ink-muted: #68757f;
+    --line-subtle: rgba(222, 231, 236, 0.075);
+    --line-default: rgba(222, 231, 236, 0.12);
+    --line-strong: rgba(222, 231, 236, 0.22);
+    --state-hover: rgba(201, 220, 227, 0.07);
+    --state-selected: rgba(102, 184, 181, 0.13);
+    --brand-mark: radial-gradient(circle at 35% 30%, #58b3ae, #29445d 43%, #402b4f);
+    --brand-mark-detail: rgba(186, 217, 218, 0.64);
+    --account-orb: linear-gradient(135deg, #315f61, #40314e);
+    --status-good: #4ba885;
+    --status-good-wash: rgba(75, 168, 133, 0.12);
+    --active-rule: #3c9a9e;
+    --focus-ring: #5ab2b5;
+    --selection: rgba(70, 166, 163, 0.34);
+    --control-accent: #4ca9a6;
+    --primary-surface: #a5cecb;
+    --primary-hover: #b3d8d4;
+    --primary-border: rgba(174, 218, 216, 0.46);
+    --primary-ink: #131c24;
+    --scroll-thumb: rgba(216, 231, 236, 0.19);
+    --observation-ribbon: linear-gradient(90deg, rgba(96, 166, 158, 0.78), rgba(75, 123, 153, 0.72), rgba(96, 82, 145, 0.64), rgba(145, 125, 70, 0.52));
+    --workbench-shadow: 0 0 0 1px rgba(255, 255, 255, 0.018);
+    --panel-shadow: -18px 0 50px rgba(0, 0, 0, 0.34);
+    --mini-map: rgba(24, 39, 49, 0.88);
+    --marker-cyan: #3eaaa8;
+    --marker-rose: #a66e78;
+    --marker-lilac: #8870a6;
+    --marker-gold: #a58a4e;
+  }
+}
+
+@supports (color: oklch(0% 0 0)) {
+:root {
+  --app-canvas: oklch(9.8% 0.012 236);
+  --app-wash: oklch(8.5% 0.012 238 / 0.18);
+  --topbar-surface: oklch(11.5% 0.014 238 / 0.86);
+  --sidebar-surface: oklch(10.8% 0.014 238 / 0.82);
+  --band-surface: oklch(13.4% 0.018 226 / 0.82);
+  --workbench-surface: oklch(12.3% 0.013 238 / 0.82);
+  --pane-surface: oklch(12.8% 0.012 240 / 0.79);
+  --panel-surface: oklch(12.2% 0.017 236 / 0.95);
+  --button-surface: oklch(17% 0.014 238 / 0.66);
+  --ink-primary: oklch(92% 0.012 218);
+  --ink-secondary: oklch(73% 0.015 221);
+  --ink-tertiary: oklch(58% 0.014 224);
+  --ink-muted: oklch(46% 0.013 226);
+  --line-subtle: oklch(92% 0.016 218 / 0.075);
+  --line-default: oklch(92% 0.016 218 / 0.12);
+  --line-strong: oklch(92% 0.018 218 / 0.22);
+  --state-hover: oklch(84% 0.028 211 / 0.07);
+  --state-selected: oklch(64% 0.07 194 / 0.13);
+  --brand-mark: radial-gradient(circle at 35% 30%, oklch(62% 0.085 180), oklch(28% 0.065 220) 43%, oklch(25% 0.06 312));
+  --brand-mark-detail: oklch(84% 0.04 192 / 0.64);
+  --account-orb: linear-gradient(135deg, oklch(32% 0.065 186), oklch(25% 0.055 308));
+  --status-good: oklch(69% 0.12 163);
+  --status-good-wash: oklch(69% 0.12 163 / 0.12);
+  --active-rule: oklch(69% 0.09 191);
+  --focus-ring: oklch(74% 0.11 192);
+  --selection: oklch(56% 0.09 191 / 0.34);
+  --control-accent: oklch(68% 0.11 190);
+  --primary-surface: oklch(72% 0.07 190);
+  --primary-hover: oklch(77% 0.075 190);
+  --primary-border: oklch(82% 0.06 190 / 0.46);
+  --primary-ink: oklch(15% 0.02 225);
+  --scroll-thumb: oklch(80% 0.02 220 / 0.19);
+  --observation-ribbon: linear-gradient(90deg, oklch(48% 0.075 188 / 0.78), oklch(42% 0.065 224 / 0.72), oklch(40% 0.066 290 / 0.64), oklch(46% 0.065 78 / 0.52));
+  --workbench-shadow: 0 0 0 1px oklch(100% 0 0 / 0.018);
+  --panel-shadow: -18px 0 50px oklch(0% 0 0 / 0.34);
+  --mini-map: oklch(14% 0.022 220 / 0.88);
+  --marker-cyan: oklch(62% 0.10 188);
+  --marker-rose: oklch(55% 0.08 18);
+  --marker-lilac: oklch(55% 0.085 310);
+  --marker-gold: oklch(58% 0.08 82);
+}
+}
+
+.field-fallback body {
+  background: var(
+    --field-fallback-background,
+    radial-gradient(ellipse at 12% 18%, rgba(35, 89, 86, 0.70), transparent 50%),
+    radial-gradient(ellipse at 78% 22%, rgba(54, 42, 92, 0.55), transparent 52%),
+    radial-gradient(ellipse at 44% 82%, rgba(78, 63, 36, 0.38), transparent 56%),
+    var(--app-canvas)
+  );
+}
+
+@supports (color: oklch(0% 0 0)) {
+@media (color-gamut: p3) {
+  :root {
+    --observation-ribbon: linear-gradient(90deg, oklch(48% 0.09 188 / 0.78), oklch(42% 0.078 224 / 0.72), oklch(40% 0.078 290 / 0.64), oklch(46% 0.073 78 / 0.52));
+  }
+}
+}