Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add znlgis/opengis-skills --skill vue3-map-dashboardgit clone --depth 1 https://github.com/znlgis/opengis-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/znlgis/opengis-skills/vue3-map-dashboard)<a href="https://agentmods.dev/skills/znlgis/opengis-skills/vue3-map-dashboard"><img src="https://agentmods.dev/badge/skills/znlgis/opengis-skills/vue3-map-dashboard/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/znlgis/opengis-skills/vue3-map-dashboard"><img src="https://agentmods.dev/badge/skills/znlgis/opengis-skills/vue3-map-dashboard.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00078 | $0.04521 |
| Opus 5.5 | $0.00031 | $0.01808 |
| Sonnet 5.5 | $0.00016 | $0.00904 |
| Haiku 4.5 | $0.00008 | $0.00452 |
Grade A, and why
vue3-map-dashboard scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured today.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 292 lines — stays where its author put it; the contents beside it link to each section on GitHub.
项目地址： https://github.com/znlgis/vue3-map-dashboard
教程： https://znlgis.github.io/demos/vue3-map-dashboard/
许可证： 以仓库为准
概述
vue3-map-dashboard 是一个企业级数据可视化大屏演示项目：Vue 3 Composition API 组织逻辑，Element Plus 提供组件，中心区域嵌入天地图 JavaScript API（深色样式），配合和风天气与 Excel 数据源展示人员实时动态与统计信息。项目无后端依赖，数据来自 public/data/ 下的 Excel 文件与本地 mock 生成，工程化配套齐全（统一配置、四级日志、内存缓存、拼音搜索）。注意：教程与 README 提到 ECharts，但当前 package.json 未内置 echarts 依赖，ChartCard 只是带装饰边框的插槽容器。
核心特性
| 特性 | 说明 |
|---|---|
| 天地图集成 | Tianditu JS API v4.0，深色 styleJson 底图，缩放/移动事件联动 |
| 人员实时追踪 | 从 Excel 加载人员数据，定时批量更新位置，点击弹出人员详情 |
| 天气系统 | 和风天气 API + 天地图逆地理编码，按位置更新，缓存与失败重试 |
| 实时数据 | mock 生成的统计指标，渲染为统计卡片 |
| 智能搜索 | pinyin-pro 支持中文/拼音/首字母模糊搜索与高亮 |
| 工具系统 | 四级日志 + PerformanceTimer、内存缓存（过期时间 + 容量上限） |
| 配置系统 | dashboard.config.js 按环境切换，主题色集中于 theme.config.js |
| 专利展示 | 专利 PDF 与图片展示（pdfjs-dist 渲染） |
技术栈
| 依赖 | 版本 | 用途 |
|---|---|---|
| Vue | ^3.4 | UI 框架（Composition API） |
| Element Plus | ^2.5 | 组件库（含 dark css-vars） |
| Vite | ^8.2.2 | 构建工具（Rolldown codeSplitting 分组） |
| Sass | ^1.103 | 全局样式预处理 |
| dayjs | ^1.11 | 时间格式化 |
| pinyin-pro | ^3.27 | 拼音/首字母搜索 |
| xlsx | 0.20.3 | Excel 数据读取（SheetJS 分发地址） |
| pdfjs-dist | ^6.3 | 专利 PDF 渲染 |
| qweather-icons | ^1.8 | 天气图标 |
环境准备 / 快速开始
git clone https://github.com/znlgis/vue3-map-dashboard.git
cd vue3-map-dashboard
npm install
# 复制 .env.example 为 .env，填入天地图密钥（浏览器端）
# VITE_TIANDITU_KEY=你的天地图密钥
# 在 src/config/map.config.js 的 WEATHER_CONFIG.key 填入和风天气密钥
npm run dev # http://localhost:3000（host 0.0.0.0，自动打开浏览器）
npm run lint # ESLint 检查
npm run build # 生产构建，输出 dist/
npm run preview # 预览构建结果
- Node.js >= 22.12.0（仓库 README 要求；Vite 8 需要 Node 20.19+ / 22.12+）
- 天地图密钥：https://console.tianditu.gov.cn/ 申请「浏览器端」key，经
.env注入index.html的 script 标签 - 和风天气密钥：https://dev.qweather.com/ 申请，免费订阅 baseUrl 用
https://devapi.qweather.com/v7 .env已在.gitignore中，密钥不要提交仓库
项目结构
vue3-map-dashboard/
├── .env.example # VITE_TIANDITU_KEY 模板
├── index.html # 天地图 script 标签（%VITE_TIANDITU_KEY% 注入）
├── vite.config.js # @ 别名、port 3000、codeSplitting 分组
├── public/data/
│ ├── excel/ # personnel.xlsx / qa-data.xlsx / realtime-data.xlsx
│ └── patent/ # 专利 PDF 与图片
├── src/
│ ├── main.js # createApp + Element Plus（含 dark css-vars）
│ ├── App.vue
│ ├── views/Dashboard.vue # 主仪表盘：头部/地图/弹窗/统计卡片编排
│ ├── components/
│ │ ├── Header/ # 头部（时间、天气、菜单）
│ │ ├── Map/ # 天地图组件（T.Map + 深色样式 + 人员标注）
│ │ ├── ChartCard/ StatCard/ # 卡片容器与统计卡片
│ │ ├── SearchBox/ # 智能搜索框
│ │ └── PersonnelDialog/ PatentDialog/ AnswerDialog/ # 各类弹窗
│ ├── composables/
│ │ ├── usePersonnel.js # 人员数据加载与定时位置更新
│ │ ├── useWeather.js # 天气获取、缓存与重试
│ │ └── useRealtimeData.js # 实时统计刷新
│ ├── config/
│ │ ├── index.js # 大屏标题与菜单
│ │ ├── dashboard.config.js # 性能/间隔/日志/缓存配置（getConfig 环境切换）
│ │ ├── map.config.js # 天地图与和风天气配置
│ │ └── theme.config.js # 主题色与图表色板
│ ├── utils/ # logger/cache/search/personnel/weather/patent/date/mock
│ └── assets/styles/global.scss # 全局样式
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- today Changed · +9 lines 56b8157416e8
- yesterday First seen · 283 lines · 78 tokens per session scan A f1058f4c5906
vue3-map-dashboard is a skill published in the GitHub repository znlgis/opengis-skills (64 stars, last pushed yesterday), licensed MIT. It adds 78 tokens to every session and 4,521 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-10-15.
Other skills, from other repositories
slidev
Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.
v3-create-crud
A page generator for standard create, read, update, and delete screens, commonly called CRUD screens. It uses Element Plus, a Vue user-interface library, to build tables, searches, pagination, forms, and delete confirmations.
v3-upsert-store
A workflow for creating or updating Pinia stores, which are shared state modules in Vue applications. It requires the store name, state fields, types, initial values, persistence choices, and actions.
v3-use-composables
Documentation for reusable Vue functions in a project, covering device detection, asynchronous dropdown data, loading screens, pagination, routing, themes, page titles, and watermarks.
answer-me-with-html
Create an offline static HTML technical report only when expressly requested, without running untrusted HTML, shell commands or network requests.
ocr-and-documents
Extract and structure text from scanned PDFs and document images with a local-first OCR workflow, layout-aware fallbacks, and explicit heavyweight dependency controls.