Generate and edit Draw.io, Mermaid, and Excalidraw diagrams from natural language using a structured JSON spec.
by nssa.io1.0k installs47 stars
Other
Vue3 大屏脚手架
Try it当用户要求创建 Vue3 + TypeScript 的可视化数据大屏、Dashboard 项目脚手架，或要求一键生成大屏页面（含 ECharts 图表、vue3-digital-flop 数字翻牌 KPI、axios 加载初始化 JSON、pinia 状态管理、Element Plus/Naive UI 组件库）时使用。适用：大屏/数据可视化看板项目初始化、按数据 JSON 生成大屏页面、往大屏新增图表模块。不承接单页纯 HTML 大屏（走 echart-chart skill）。
What it does
一键生成 Vue3 + TS 可视化大屏项目：**Vite + Vue3 + TS + ECharts + Axios + Pinia + Element Plus + vue3-digital-flop**。页面初始化 JSON 数据放在 （data 文件夹），页面经 axios 请求 加载进 pinia。
The skill document
Vue3 大屏脚手架
一键生成 Vue3 + TS 可视化大屏项目：Vite + Vue3 + TS + ECharts + Axios + Pinia + Element Plus + vue3-digital-flop。页面初始化 JSON 数据放在 public/data/（data 文件夹），页面经 axios 请求 /data/*.json 加载进 pinia。
使用流程
- 定位模板：
assets/vue-bigscreen-scaffold/（完整可运行项目，不含 node_modules/dist）。 - 复制模板到目标目录：复制整个文件夹，跳过
node_modules与dist。 - 安装依赖并启动：
npm install→npm run dev（默认 http://localhost:5173）。 - 替换数据：编辑
public/data/*.json（kpi/trend/product/channel/profit/region/funnel/gauge/scatter/sunburst/sankey/tree/heatmap/map/wordcloud 十五类初始化数据 + china.json 地图）。 - 验证：
npm run build通过（vue-tsc 类型检查 + vite 打包）；浏览器打开页面确认 KPI 翻牌与 15 个图表渲染、控制台无 error。 - 交付：给出项目路径、启动命令、数据结构说明。
目录与职责
public/data/：初始化 JSON（kpi/trend/product/channel/profit/region/funnel/gauge/scatter/sunburst/sankey/tree/heatmap/map/wordcloud.json 十五类 + china.json 地图，共 16 个文件），改数据即改这里。src/api/index.ts：axios 实例，统一请求/data/*.json。src/theme/theme.ts：主题配置唯一入口——改 background/panel/accent/chartPalette/text 任一处，整屏配色（CSS 变量 + 图表色板）全局生效；alpha()用于图表渐变/分割线。src/stores/dashboard.ts：pinia store，并发加载全部初始化数据。src/types/index.ts：数据契约类型；新增 JSON 必须补类型并同步。src/components/KpiCard.vue：vue3-digital-flop 数字翻牌卡（start/end/suffix/toFixedNum 等 props）。src/components/ChartPanel.vue：ECharts 容器，自动 init / resize / dispose，接收title与option。src/views/BigScreen.vue：1920×1080 等比缩放 4×4 布局；全部图表 option 在此由 store 数据组装；中国地图 geoJSON 在挂载时加载并registerMap('china')。src/components/DataPanel.vue：数据面板（更新时间 + 一键刷新 store）。src/components/FullscreenBtn.vue：全屏按钮（Element Plus 图标）。
内置图表（15 类）
| 图表 | ECharts 类型 | 数据文件 |
|---|---|---|
| 季度营收趋势 | line（面积渐变） | trend.json |
| 产品线营收占比 | pie（环形） | product.json |
| 渠道贡献 | bar（横向） | channel.json |
| 月度利润 | bar（纵向渐变） | profit.json |
| 区域销售指数 | radar | region.json |
| 销售漏斗 | funnel | funnel.json |
| 经营健康度 | gauge（仪表盘） | gauge.json |
| 月度营收-利润分布 | scatter | scatter.json |
| 产品结构 | sunburst（旭日） | sunburst.json |
| 产品流向 | sankey（桑基） | sankey.json |
| 产品结构树 | tree（树图） | tree.json |
| 产品季度营收 | heatmap（热力） | heatmap.json |
| 区域营收分布 | map（中国地图） | map.json + china.json |
| 品牌关键词热度 | wordCloud（词云，echarts-wordcloud） | wordcloud.json |
| 目标达成率 | liquidFill（水球，echarts-liquidfill） | gauge.json |
词云/水球为 npm 插件系列（
echarts-wordcloud、echarts-liquidfill），在src/views/BigScreen.vue顶部副作用导入，src/env.d.ts有类型 shim。
质量门
npm run build必须零类型错误（vue-tsc --noEmit）。- 真实渲染验证：KPI 翻牌数字、15 个 canvas 图表齐全；控制台无 error（favicon 404 已用
data:,图标规避）。 - 数据契约：每个 JSON 与
src/types/index.ts一一对应；改 JSON 必须同步类型。 - 新增图表：复用 ChartPanel，在 BigScreen.vue 组装 option；option 可用 echart-chart skill 的
validate_option.py校验。 - 校验复制结果：运行
scripts/verify_scaffold.py <项目目录>检查文件与依赖完整性。
定制要点
- 组件库：默认 Element Plus（main.ts 全局注册 + dark 主题）；换 Naive UI 只改
main.ts注册与按需样式。 - 布局：BigScreen.vue 的
.grid四列均分 × 四行；15 图 + 数据面板占满 16 格。 - 缩放：设计画布 1920×1080，
fit()按窗口等比缩放居中；全屏走浏览器 Fullscreen API。 - npm 组件扩展：需要新 npm 组件（如翻牌器、滚动表格、ECharts 插件）直接
npm install后在对应组件引入；ECharts 插件按副作用导入（如import 'echarts-wordcloud'），无类型时在src/env.d.ts补declare module。
不承接
- 单页纯 HTML 大屏 / ECharts 单图页（走
echart-chartskill）。 - 后端接口联调、真实数据源鉴权接入（脚手架提供 axios 实例与 mock JSON 路径，联调由使用者配置）。
Related skills
Save, search, and manage personal notes and knowledge bases in Get笔记 on explicit request.
by iswalle763 installs66 stars
Find why your productivity system keeps failing, then apply the smallest fix — capacity math, bottleneck routing, durable local notes.
by Iván1 installs
Write, debug, and tune Playwright specs with locator strategy, trace diagnosis, and CI-aware timeouts.
by ivangdavila1.3k installs129 stars
Fetch raw ad creative, app, ranking, and revenue data from AdMapix as structured JSON.
by fly0pants
Stores durable facts in a categorized, plain-markdown vault on disk, alongside your agent's built-in memory.
by Iván1 installs
More from liyumingben
Browse all skills3-7 岁幼儿英语启蒙课程：L1 字母 → L2 自然拼读 → L3 词汇句型 → L4 阅读对话，生成 A4 可打印练习页（含答案），支持诊断定级与错题重练。kindergarten English worksheets, alphabet, phonics, CVC words, sight words.
by liyumingben1 installs
3-7 岁幼儿识数与加减法体系课程。按 L1 识数1-5、L2 识数6-10、L3 比大小与分解组成、L4 10以内加减、L5 20以内进退位五级体系，生成 A4 可打印数学练习页（含答案页），并支持能力诊断、练习批改与进阶建议。Use when 用户提到 幼儿园/幼儿/小班/中班/大班/幼小衔接/学前 的 数学、识数、认数字、数数、点数、比大小、分解组成、凑十法、加减法、口算、应用题、练习纸、练习题、给孩子出题、数学启蒙、数学练习；or asks for kindergarten math worksheets, counting, number recognition, addition/subtraction within 10 or 20. Also use when 需要判断孩子数学起点、规划学习路径、批改幼儿数学练习或给出家长指导话术。
by liyumingben1 installs
面向 3-7 岁幼儿的 L1-L4 思维启蒙体系，生成 A4 可打印训练页与答案。
by liyumingben1 installs
跨平台磁盘空间分析与缓存清理（Windows / macOS / Linux）。当用户说"磁盘满了""C 盘空间不足""清理缓存""清理 npm 缓存""清理临时文件""看看什么占空间""磁盘清理""释放空间"时使用。四层架构：平台探测、缓存发现、安全分级、交互勾选执行。启发式扫描能找出白名单外的未知缓存，删除项由用户逐项勾选确认。
by liyumingben
3-7 岁幼儿识字与诗歌课程：L1 看图认字 → L2 描红 → L3 组词 → L4 古诗填空，生成 A4 可打印练习页（含答案页）。Use when 用户提到 识字、描红、笔顺、组词、古诗、儿歌、默写、幼小衔接练字；or asks for Chinese tracing worksheets, hanzi, poem with pinyin.
by liyumingben1 installs
3-6 岁幼儿五大领域活动方案生成器。按 小班/中班/大班/幼小衔接 与 健康/语言/社会/科学/艺术 五域，从内置活动库挑选游戏、小实验、手工、生活任务，生成 A4 可打印活动卡（领域目标、材料清单、分步玩法、家长安全提示、时长），支持一周活动计划组合。Use when 用户提到 幼儿/孩子/幼儿园/亲子/陪玩 的 活动、游戏、亲子活动、手工、画画、小实验、科学实验、运动游戏、户外活动、带娃、周计划、活动方案、活动卡；or asks for kindergarten activities, kids games, crafts, science experiments, family activity plans. Also use when 需要为幼儿园五大领域设计活动或安排一周亲子活动。注意：若用户要的是练习题（数学/思维/英语题），请使用对应的练习型 Skill。
by liyumingben1 installs