10w nexu-io

dashboard Skill

单个 HTML 文件的管理/分析仪表盘。固定左侧边栏、带用户和搜索的顶栏、KPI 卡片主网格及一两个图表。当需求提到“仪表盘”、“admin”、“数据分析”或“控制面板”界面时使用。

安装方式:把技能目录放入 ~/.claude/skills/(Claude Code)或在 claude.ai 设置中启用;也可复制右侧安装命令一键添加。

查看源码

技能指令原文(SKILL.md)

Dashboard Skill

Produce a single-screen admin / analytics dashboard.

Workflow

  1. Read the active DESIGN.md (injected above). Colors, typography, spacing,

component styling all come from it. Do not invent new tokens.

  1. Classify what the dashboard monitors (sales, traffic, usage, incidents,

ops, etc.) from the brief. Generate specific, plausible metric names and
values — no "Metric A / Metric B" placeholders.

  1. Lay out the required regions:
  • Left sidebar (220–260px): brand mark at top, 6–8 nav links with

icons, active state uses the DS accent.

  • Top bar: page title on the left, search input + user avatar / status

on the right.

  • Main:
  • Row 1: 3–4 KPI cards (label + big number + delta vs. prior period).
  • Row 2: one primary chart (full width or 2/3) — render as an inline SVG

line / bar / area chart drawn from real-looking numbers.

  • Row 3: one secondary chart or table (recent events, top items, etc.).
  1. Write one self-contained HTML document:
  • through , CSS in one inline