@lark-apaas/coding-steering 0.1.70 → 0.1.71

package/steering/nestjs-react-fullstack/skills/design-guide/references/cybernetic-vault-terminal.md

@@ -1,74 +0,0 @@
----
-version: "neuform-staff-featured-2026-05-22"
-name: cybernetic-vault-terminal
-name_zh: 赛博机库
-description: "深空蓝黑底的赛博数据终端：亮青蓝为唯一高能强调，深色嵌套面板、等宽技术标签与模块化网格共同形成高信息密度但清晰的操作界面。适合分析、监控、后台、工作流工具与产品展示；动态网格或粒子只作内容后的环境层。"
-colors:
-  primary: "#0EA5E9"
-  highlight: "#FFFFFF"
-  primary-2: "#3B82F6"
-  background: "#020617"
-  card: "#0F172A"
-  foreground: "#FFFFFF"
-  muted-foreground: "#A1A1AA"
-  border: "#27272A"
-typography:
-  display-lg:
-    fontFamily: "Inter"
-    fontSize: "64px"
-    fontWeight: 500
-    lineHeight: "1.04"
-    letterSpacing: "0"
-  body-md:
-    fontFamily: "Inter"
-    fontSize: "16px"
-    fontWeight: 400
-    lineHeight: "1.6"
-  label-md:
-    fontFamily: "JetBrains Mono"
-    fontSize: "12px"
-    fontWeight: 600
-    lineHeight: "1.2"
-spacing:
-  base: "8px"
-  gap: "16px"
-  card-padding: "24px"
-  section-padding: "80px"
-rounded:
-  card: "24px"
-  control: "23px"
-  pill: "9999px"
-components:
-  card:
-    background: "Use the card token with subtle borders and restrained shadow depth"
-    radius: "Match the declared card radius token"
-  button:
-    background: "Use primary or primary-2 colors for the main action"
-    radius: "Use the declared control or pill radius according to component role"
----
-# Cybernetic Vault Terminal
-Source: Neuform staff featured templates. Author: Aksonvady Phomhome (@aksonvady). Views: 583; favorites: 13; remixes: 2.
-Tags: dashboard, animated, webgl, threejs, bento, dither, charts, support.
-## Overview
-深空蓝黑界面以清晰的信息密度、模块化面板和稳定节奏呈现工作流。亮青蓝只强调关键动作、主指标与当前状态；Inter 承担正文，JetBrains Mono 承担标签和技术元数据。适合产品展示、管理后台、分析体验、监控与支持工具。
-## Composition
-建立一个明确焦点，并可用不对称模块网格展开内容；保持紧凑导航、嵌套表面和主次指标层级。具体首屏结构和模块顺序由任务决定，窄屏按阅读顺序重排，操作不能因装饰层遮挡。
-## Colors
-Anchor the palette in primary #0EA5E9, highlight #FFFFFF, primary-2 #3B82F6, background #020617, card #0F172A, foreground #FFFFFF. Keep background, surface, text, and border roles distinct so generated layouts retain the same contrast pattern as the source.
-## Typography
-Use Inter for display moments and Inter for body copy unless the HTML clearly demands a compatible fallback. Labels and technical metadata should use JetBrains Mono or an equivalent mono face.
-## Layout
-Keep spacing deliberate and stable. Choose grid direction, max-width, card density, and responsive stacking from the content relationships. Source layouts are examples, not structures to reproduce.
-## Components
-Dashboard, chart, and data panels should preserve their compact operational hierarchy, nested surfaces, and metric emphasis.
-## Motion
-Preserve existing motion cues such as masked reveals, staggered entrance, hover lift, scroll-triggered transitions, and ambient movement. Keep easing smooth and restrained.
-## WebGL & Effects
-
-If the source includes canvas, WebGL, Three.js, gradients, particles, or atmospheric effects, rebuild them as supporting layers behind the content. Keep effects performant, responsive, and secondary to the interface.
-
-## Guardrails
-- Do not flatten the source into a generic card grid.
-- Do not swap the color mode unless the source clearly supports it.
-- Preserve a strong focal signal and the intended visual density without copying a fixed first-viewport composition.
-- Keep buttons, cards, and badges aligned to the same radius and border language.

package/steering/nestjs-react-fullstack/skills/design-guide/references/dashboard.md

@@ -1,234 +0,0 @@
----
-version: alpha
-name: dashboard
-name_zh: 陶土净台
-description: >-
-  暖调米白底 + 纯白卡片 + 陶土橙单强调色的数据看板风格。零阴影，层次全靠
-  极细暖灰边框与底色/表面的明度差；内容模块按任务关系自由组合，数据图表使用
-  内联 SVG。文字为暖黑，小标签全大写宽字距，
-  大数字收紧字距；系统字体栈，无 webfont。密度中等偏疏朗，气质克制、干净、温润。
-colors:
-  background: "#fafaf9"
-  foreground: "#1c1b1a"
-  muted-foreground: "#6b6964"
-  border: "#e6e4e0"
-  primary: "#c96442"
-  primary-foreground: "#ffffff"
-  card: "#ffffff"
-  good: "#2f7d4a"
-  bad: "#b53a2a"
-typography:
-  body:
-    fontFamily: "-apple-system, system-ui, sans-serif"
-    fontSize: 14px
-    lineHeight: 1.5
-  pageTitle:
-    fontSize: 20px
-    letterSpacing: -0.01em
-  kpiValue:
-    fontSize: 28px
-    letterSpacing: -0.02em
-  kpiLabel:
-    fontSize: 12px
-    letterSpacing: 0.05em
-    transform: uppercase
-    color: "{colors.muted-foreground}"
-  delta:
-    fontSize: 12px
-  panelTitle:
-    fontSize: 14px
-    fontWeight: 500
-  microLabel:
-    fontSize: 11px
-    letterSpacing: 0.06em
-    transform: uppercase
-    fontWeight: 500
-    color: "{colors.muted-foreground}"
-  brand:
-    fontWeight: 600
-rounded:
-  control: 6px
-  card: 10px
-  pill: 999px
-spacing:
-  mainPadding: "0 28px 56px"
-  topbarPadding: "16px 0"
-  topbarGapBelow: 24px
-  cardGap: 16px
-  kpiRowGapBelow: 28px
-  kpiPadding: "16px 18px"
-  panelPadding: 20px
-  buttonPadding: "7px 13px"
-  navItemPadding: "7px 10px"
-  tableCellPadding: "10px 6px"
-  pillPadding: "2px 8px"
-  chartHeight: 240px
-components:
-  brandMark:
-    color: "{colors.foreground}"
-    fontWeight: 600
-  navLink:
-    padding: "{spacing.navItemPadding}"
-    borderRadius: "{rounded.control}"
-    color: "{colors.foreground}"
-    activeBackground: "{colors.background}"
-    activeFontWeight: 500
-    hoverBackground: "{colors.background}"
-  kpiCard:
-    background: "{colors.card}"
-    border: "1px solid {colors.border}"
-    borderRadius: "{rounded.card}"
-    padding: "{spacing.kpiPadding}"
-  panel:
-    background: "{colors.card}"
-    border: "1px solid {colors.border}"
-    borderRadius: "{rounded.card}"
-    padding: "{spacing.panelPadding}"
-  buttonPrimary:
-    background: "{colors.primary}"
-    color: "{colors.primary-foreground}"
-    border: "1px solid {colors.primary}"
-    borderRadius: "{rounded.control}"
-    padding: "{spacing.buttonPadding}"
-  buttonSecondary:
-    background: "transparent"
-    color: "{colors.foreground}"
-    border: "1px solid {colors.border}"
-    borderRadius: "{rounded.control}"
-    padding: "{spacing.buttonPadding}"
-  pill:
-    fontSize: 11px
-    padding: "{spacing.pillPadding}"
-    borderRadius: "{rounded.pill}"
-    background: "{colors.background}"
-    border: "1px solid {colors.border}"
-  chartArea:
-    height: "{spacing.chartHeight}"
-    background: "linear-gradient(180deg, rgba(201,100,66,0.06), transparent)"
-    borderBottom: "1px solid {colors.border}"
-  chartBar:
-    fill: "{colors.muted-foreground}"
-    track: "{colors.border}"
-anchors:
-  - id: terracotta-accent
-    type: token
-    desc: 全页唯一强调色是陶土橙（见 colors.primary），每屏最多两处——主按钮与唯一主图表，其余柱状/进度条一律中性色
-  - id: flat-border-depth
-    type: pattern
-    desc: 零阴影平面系统，层次只靠极细暖灰边框（见 colors.border）与表面/底色的微弱明度差
-  - id: warm-neutrals
-    type: token
-    desc: 底色是暖调米白（见 colors.background），文字是暖黑（见 colors.foreground），中性色全部偏暖不偏蓝
-  - id: kpi-card
-    type: component
-    desc: KPI 卡三段式——全大写宽字距灰色小标签、收紧字距的大数字、涨跌语义色 delta
-  - id: status-pill
-    type: component
-    desc: 全圆角胶囊状态标签，语义色只染文字与半透明描边，底仍为页面底色
-  - id: inline-svg-chart
-    type: pattern
-    desc: 图表一律内联 SVG，全页仅一个主图表可用陶土色描边/渐变，其余柱状/进度条一律中性灰色，禁用图表库
-gaps:
-  - 暗色模式未定义（来源仅亮色）
-  - 图标体系未定义（来源导航为纯文字，品牌标仅一个 ◐ 字符）
-  - 动效/过渡未定义（来源无 transition/animation）
-  - focus / disabled 等交互态未定义（来源仅 nav hover 一种）
-  - 字号体系仅覆盖 11/12/14/20/28 五档，H2-H6 标题层级未定义
-  - 图表多序列配色未定义（来源仅单序列陶土色折线）
-exceptions:
-  - rgba 半透明派生色仅限三处既有值：图表渐变底、状态胶囊 good/bad 描边
-  - 窄屏下数据模块按阅读优先级重排，保证标签、数值和操作可读可用
-  - 全页允许一个主图表用 primary 描边/渐变；其余柱状图/进度条/排行榜一律用 `{components.chartBar}` 中性配色，不占用 primary 预算
----
-
-## Overview
-
-陶土净台（terracotta-console）：温润克制的管理/分析界面风格。暖米白页面底 `{colors.background}` 上铺纯白卡片 `{colors.card}`，全部层次由 1px 暖灰边框 `{colors.border}` 承担，全页零 box-shadow。唯一强调色是陶土橙 `{colors.primary}`，每屏最多出现两处（主行动 + 唯一主数据焦点）。页面骨架、导航位置和内容分区由用户需求与信息关系决定；CSS Grid 或 Flexbox 只用于实现自适应布局。
-
-## Colors
-
-| 角色 | Token | 值 | 用法 |
-|------|-------|-----|------|
-| 页面底 | `{colors.background}` | #fafaf9 | body 背景；同时复用为 nav 激活/hover 底、胶囊底——"底色即最浅灰"是本风格的层次手法 |
-| 表面 | `{colors.card}` | #ffffff | 侧栏、KPI 卡、panel 的背景 |
-| 主文字 | `{colors.foreground}` | #1c1b1a | 正文、导航链接、次级按钮文字（暖黑，非纯黑）；同时是品牌标/logo 的唯一颜色 |
-| 次文字 | `{colors.muted-foreground}` | #6b6964 | KPI 标签、表头、分组标签、顶栏右侧辅助信息；同时是非主图表柱状/进度条的填充色 |
-| 边框 | `{colors.border}` | #e6e4e0 | 所有描边：卡片、侧栏右缘、顶栏下缘、表格行分隔、次级按钮；同时是非主图表柱状/进度条的轨道底色 |
-| 强调 | `{colors.primary}` | #c96442 | 仅两类用途：主按钮（底+描边，按钮文字用 `{colors.primary-foreground}` #ffffff）、**全页唯一主图表**的描边与渐变底；禁止用于导航激活、文字链接、品牌标/logo、大面积填充、以及除主图表外的任何柱状图/进度条/排行榜 |
-| 正向 | `{colors.good}` | #2f7d4a | 上涨 delta 文字、正向胶囊文字（描边用 rgba(47,125,74,0.3)） |
-| 负向 | `{colors.bad}` | #b53a2a | 下跌 delta 文字、负向胶囊文字（描边用 rgba(181,58,42,0.3)）。注意 `{colors.bad}` 与 `{colors.primary}` 同属暖红橙系但是两个不同 token：预警/下跌类文字与胶囊用 bad，按钮/主图表用 primary，两者不得混用替代 |
-
-不发明新色。所有半透明色仅限 Exceptions 列出的三处既有 rgba 值。
-
-## Typography
-
-字体硬指令（HARD REQUIREMENT）：本风格使用系统字体栈 `-apple-system, system-ui, sans-serif`，**原样写入、禁止替换**为任何 webfont；**禁止添加任何 `@import` 字体加载行**——无外部字体正是该风格气质的一部分。
-
-- 正文 `{typography.body}`：14px / 1.5，字重常规。
-- 页面标题 `{typography.pageTitle}`：20px，letter-spacing -0.01em，仅顶栏 h1 一处。
-- KPI 大数字 `{typography.kpiValue}`：28px，letter-spacing -0.02em（大字必收字距）。
-- KPI 标签 `{typography.kpiLabel}`：12px，全大写，letter-spacing 0.05em，色 `{colors.muted-foreground}`。
-- delta `{typography.delta}`：12px，色随涨跌用 `{colors.good}` / `{colors.bad}`。
-- 面板标题 `{typography.panelTitle}`：14px / 500，禁止加粗到 600 以上。
-- 微标签 `{typography.microLabel}`（表头 th、侧栏分组标签）：11px，全大写，letter-spacing 0.06em，500，色 `{colors.muted-foreground}`。
-- 品牌名 `{typography.brand}`：600，全页最重字重，颜色固定 `{colors.foreground}`（见 `{components.brandMark}`），禁止用 primary。
-
-层级规律：靠"大小写转换 + 字距 + 灰度"区分层级，不靠加粗；600 只给品牌名。
-
-## Layout
-
-- 采用清晰、紧凑但不过度拥挤的信息密度；主任务和主数据焦点优先，次级信息降低对比度。
-- 卡片、表格和图表按内容关系组合，列数与比例由信息量决定，不预设 KPI 行、主副图表或固定侧栏。
-- 导航可使用侧栏、顶栏、标签页或页面内导航；仅在业务需要持续可见时固定。
-- 内容宽度、网格列数和排列应随窗口变化；窄屏按任务优先级重排为可读结构。
-
-## Elevation & Depth
-
-**全页禁止 box-shadow。** **HARD REQUIREMENT**：`<style>` 块首行追加 `*,*::before,*::after{box-shadow:none!important}` 作为强制兜底，任何后续规则都不得覆盖这条。深度体系只有两层：页面底 `{colors.background}` 与表面 `{colors.card}`，一切分界由 1px `{colors.border}` 描边完成（卡片四周、侧栏右缘、顶栏下缘、表格行上缘、图表底缘）。不使用第二层浮起、不使用 overlay 阴影。
-
-## Shapes
-
-- 控件（按钮、导航项）圆角 `{rounded.control}`（6px）。
-- 容器（KPI 卡、panel）圆角 `{rounded.card}`（10px）。
-- 状态胶囊全圆角 `{rounded.pill}`（999px）。
-- 所有描边一律 1px 实线；无双线、无虚线、无粗边框。
-
-## Components
-
-- **KPI 卡** `{components.kpiCard}`：结构固定三段——`{typography.kpiLabel}` 标签（下距 8px）→ `{typography.kpiValue}` 大数字 → `{typography.delta}` delta（上距 4px，涨 `{colors.good}` / 跌 `{colors.bad}`）。指标名必须具体拟真（如 MRR、Active accounts、P95 latency），禁止 "Metric A" 类占位。
-- **面板** `{components.panel}`：标题 `{typography.panelTitle}` 下距 16px，内容为图表或表格。
-- **按钮**：主按钮 `{components.buttonPrimary}`（陶土底白字，每屏至多 1 个）；次按钮 `{components.buttonSecondary}`（透明底、灰描边）。两者 padding 7px 13px、圆角 6px。
-- **导航项** `{components.navLink}`：默认无底；当前项判定只能用以下手法组合，**禁止用 primary（含圆点、竖线、图标填充、文字色）**——① 底色 `{colors.background}`（已默认）② 字重升到 500（`activeFontWeight`）。hover 底同为 `{colors.background}`。
-- **品牌标** `{components.brandMark}`：颜色固定 `{colors.foreground}`，字重 600；无论是文字标还是 ◐ 符号图标，禁止用 `{colors.primary}` 或任何语义色。
-- **状态胶囊** `{components.pill}`：11px，padding 2px 8px，底 `{colors.background}` + 灰描边；good/bad 变体只改文字色与描边（rgba(47,125,74,0.3) / rgba(181,58,42,0.3)），不填充语义色底。
-- **表格**：th 用 `{typography.microLabel}` 样式且左对齐；单元格 padding `{spacing.tableCellPadding}`；行分隔用 border-top `{colors.border}`；无斑马纹、无外框。
-- **图表** `{components.chartArea}`：高 240px，容器底为陶土色微渐变 `linear-gradient(180deg, rgba(201,100,66,0.06), transparent)`，底缘 1px `{colors.border}`。图表本体一律内联 SVG，禁用任何 JS 图表库。**HARD REQUIREMENT——primary 图表预算**：全页只有*一个*"主图表"（通常是最重要的趋势/GMV/核心指标折线）允许用 `{colors.primary}` 描边（`<polyline>`，stroke-width 2，fill none，`viewBox="0 0 600 240"` + `preserveAspectRatio="none"`）；**其余所有柱状图、横向进度条、排行榜条、占比条组件一律用中性色** `{components.chartBar}`——填充部分 `{colors.muted-foreground}`，轨道/背景部分 `{colors.border}`，禁止再用 primary。坐标轴标注从轻（`{colors.muted-foreground}`、更小字号）。数据必须是拟真数值。
-
-## Do's and Don'ts
-
-- Do：留白疏朗、卡片间距统一走 `{spacing.cardGap}`；层级靠灰度与大小写而非字重。
-- Do：密度随内容气质微调——运营/交易类可收紧行高，常规分析保持现状的疏朗档。
-- Do：给每个实际存在的逻辑区块加 `data-od-id="slug"` 属性。
-- Don't：不给卡片加阴影或第二层底色；不把强调色用于导航激活态、链接、图标或品牌标。
-- Don't：不给非主图表的柱状图/进度条/排行榜上色 primary，一律用中性色。
-- Don't：不引入第三方 CSS/JS；单 HTML 文件内联一个 `<style>` 块交付。
-
-## Hard Rules
-
-1. 禁止任何 box-shadow；`<style>` 首行必须写 `*,*::before,*::after{box-shadow:none!important}`；深度只允许 1px `{colors.border}` 描边 + 底/表面明度差。
-2. `{colors.primary}` 全页预算固定为两处，且只能是：①主按钮 ②唯一主图表的描边/渐变强调。多图表页面里，非主图表的柱状图/进度条/排行榜/占比条一律用 `{colors.muted-foreground}`（填充）+ `{colors.border}`（轨道）中性配色，不得追加 primary；禁止用于导航激活、文字链接、大面积填充、品牌标/logo。
-3. 颜色只用 frontmatter 色板 token；半透明派生仅限 Exceptions 列出的三处 rgba 值，禁止新造颜色；`{colors.bad}` 与 `{colors.primary}` 是两个不同 token，不得互相替代。
-4. 字体：系统字体栈原样使用，禁止替换 webfont、禁止 `@import`。
-5. 图表只用内联 SVG，禁止 ECharts/Chart.js 等任何图表库与外部脚本。
-6. 数据指标名与数值必须具体拟真，禁止 "Metric A / Metric B" 占位。
-7. 使用与实际内容相符的语义 HTML，不为复刻示例而添加无业务意义的侧栏、顶栏或区块。
-8. 数值 token（字号、间距、圆角）照本文件取值，禁止取整到其他栅格。
-9. 若页面存在导航，当前项只能用底色 `{colors.background}` 或字重 500 标出，品牌标固定 `{colors.foreground}`；两者均禁止使用 primary（含圆点、竖线、图标填充等任何形式）。
-
-## Exceptions
-
-- 半透明色三处白名单：图表容器渐变 `rgba(201,100,66,0.06)`、good 胶囊描边 `rgba(47,125,74,0.3)`、bad 胶囊描边 `rgba(181,58,42,0.3)`。
-- 响应式：`max-width: 900px` 时允许 KPI 网格 `repeat(4,1fr)` → `repeat(2,1fr)`、panels 行 `2fr 1fr` → `1fr`。
-- 语义色 `{colors.good}` / `{colors.bad}` 仅允许出现在 delta 文字与状态胶囊，不得用于按钮或图表。
-- 侧栏宽度允许在 220–260px 区间内按导航文案长度调整（默认 220px）。
-- 全页允许一个主图表用 `{colors.primary}` 描边/渐变；其余柱状图/进度条/排行榜一律用 `{components.chartBar}`（`{colors.muted-foreground}` 填充 + `{colors.border}` 轨道）中性配色，不占用 primary 预算。