Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/znlgis/opengis-skillsnpx agentmods add skills/znlgis/opengis-skills/ai-water-frontWrote 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/ai-water-front)<a href="https://agentmods.dev/skills/znlgis/opengis-skills/ai-water-front"><img src="https://agentmods.dev/badge/skills/znlgis/opengis-skills/ai-water-front/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/ai-water-front"><img src="https://agentmods.dev/badge/skills/znlgis/opengis-skills/ai-water-front.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.00080 | $0.04840 |
| Opus 5.5 | $0.00032 | $0.01936 |
| Sonnet 5.5 | $0.00016 | $0.00968 |
| Haiku 4.5 | $0.00008 | $0.00484 |
Grade A, and why
ai-water-front scanned grade A with 1 finding 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 yesterday.
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.
Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
const response = await axios.get('/geoserver/rest/layers') // 图层列表 How it starts
The opening of the file, as written. The whole thing — 362 lines — stays where its author put it; the contents beside it link to each section on GitHub.
项目地址： https://github.com/znlgis/ai-water-front
教程： https://znlgis.github.io/demos/ai-water-front/
许可证： LGPL-2.1（以仓库为准）
概述
AI 水务前端（ai-water-front）是一个基于 Vue 3 + OpenLayers + Dify AI 的智能水务地理信息系统演示项目。地图部分使用 OpenLayers 原生 API 加载 OpenStreetMap 底图（默认北京视图）。AI 助手对接 Dify Chat Messages 接口，以 SSE 流式输出回复，回复中的 GeoJSON 会被自动提取、转换投影后渲染并高亮闪烁。图层管理通过 Vite 开发代理调用 GeoServer REST API，凭据只在代理层注入。项目同时演示可拖拽面板布局与 localStorage 状态持久化。
核心特性
| 特性 | 说明 |
|---|---|
| 地图展示 | ol 8 + OSM 底图，默认中心北京 [116.4074, 39.9042]，zoom 10 |
| AI 助手 | Dify /v1/chat-messages，支持 streaming / blocking 两种模式，可取消生成 |
| GeoJSON 渲染 | 从回复中提取几何数据，自动贴合视图并红框闪烁高亮约 5 秒 |
| 图层管理 | 拉取 GeoServer /rest/layers，按几何类型排序（面 / 线 / 点）加载 WMS |
| GeoServer 代理 | Vite 代理 /geoserver → 127.0.0.1:8765，Basic 认证在代理层注入 |
| 面板布局 | 左右 / 上下可拖拽分隔条，尺寸保存到 localStorage |
| 调试工具 | DEV 模式注入 window.testGeoJson / window.clearGeoJsonLayers |
环境准备 / 快速开始
环境要求
- Node.js >= 16.0.0，npm >= 7.0.0（可用 nvm-windows 管理多版本）
- 可选：Docker Desktop（本地运行 GeoServer + PostGIS）
- 可选：Dify 账号或自建 Dify 服务（用于获取 API Key）
安装与启动
# 1. 克隆并安装依赖
git clone https://github.com/znlgis/ai-water-front.git
cd ai-water-front
npm install
# 2. 新建 .env.local（优先于 .env 读取，且不会被提交），配置 Dify
# VITE_DIFY_API_KEY=app-xxxxxxxxxxxx
# VITE_DIFY_BASE_URL=https://api.dify.ai # 自建 Dify 改为自己的服务地址
# 3. 启动开发服务器（默认 http://localhost:3000，自动打开浏览器）
npm run dev
# 4. 生产构建与本地预览
npm run build
npm run preview
验证
- 打开页面后地图中心应为北京，可拖拽平移、滚轮缩放。
- AI 助手面板若提示「未配置 VITE_DIFY_API_KEY」，说明环境变量未生效，需检查
.env.local并重启 dev server。 - 图层面板能列出 GeoServer 图层（要求 GeoServer 已在
127.0.0.1:8765运行）。
可选：Docker 启动 GeoServer + PostGIS
docker pull postgis/postgis
docker run -d -p 5432:5432 --name postgis \
-e POSTGRES_PASSWORD=postgres -e PGDATA=/var/lib/postgresql/data/pgdata \
-v //d/docker/data/postgis:/var/lib/postgresql/data postgis/postgis
docker pull kartoza/geoserver
docker run -d -p 8765:8080 --name geoserver --link postgis:postgis \
-e SAMPLE_DATA=true -e GEOSERVER_ADMIN_PASSWORD=geoserver \
-e GEOSERVER_DATA_DIR=/data/geoserver/data_dir \
-v //d/docker/data/geoserver:/data/geoserver/data_dir kartoza/geoserver
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.
- yesterday Changed · +9 lines 2c62ca4c4dcd
- 2d ago First seen · 353 lines · 80 tokens per session scan A d37cfbba4128
ai-water-front is a skill published in the GitHub repository znlgis/opengis-skills (65 stars, last pushed 2d ago), licensed MIT. It adds 80 tokens to every session and 4,840 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 1 finding (makes network calls). 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.
vue-expert
Expert knowledge in Vue.js 3, Composition API, Pinia state management, and Nuxt.js for building modern reactive web applications. Use when the user mentions Vue 3, the Composition API, Pinia, Nuxt, reactive, or frontend, or when the task involves Vue 3 Fundamentals, Composition API, Pinia State Management, or Nuxt.js.
nuxt-docs
Nuxt 4.x — full-stack Vue.js framework. File-based routing, auto-imports, SSR, Nitro, layers, modules.
nuxt-ui
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
ax-ai
This skill helps an LLM generate correct AI provider setup and configuration code using @ax-llm/ax. Use when the user asks about ai(), providers, models, routing, adaptive balancing, presets, embeddings, batch audio with ai.transcribe() or ai.speak(), extended thinking, context caching, or mentions…
ax-cpp-ai
Use when writing C++ code with axllm for named deployment profiles, generic provider clients, model selection, OpenAI-compatible calls, Responses, Gemini, Anthropic, routers, and balancers.