From mapx-llm-skills
Generate a complete MapX embed project scaffold. Creates HTML, CSS, and modular JavaScript files for embedding a MapX map with view management, SDK wrappers, and optional features (filtering, custom data, analysis). Invoke with a project ID and optional view IDs.
How this skill is triggered — by the user, by Claude, or both
Slash command
/mapx-llm-skills:mapx-embed-scaffold <project-id> [view-ids...]<project-id> [view-ids...]This skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate a production-ready MapX embed project from a project ID and
Generate a production-ready MapX embed project from a project ID and optional view configuration.
When invoked, create the following file structure:
project-root/
├── index.html # Main page with sidebar + map layout
├── package.json # Vite dev server + build config
├── vite.config.js # Vite configuration
└── src/
├── main.js # Entry point: SDK init, ready handler, event wiring
├── styles/
│ └── app.css # Sidebar + map layout, component styles
├── config/
│ └── views.js # View IDs, labels, and type metadata
├── state/
│ └── store.js # Global state (openViews set, custom data registry)
├── sdk/
│ ├── client.js # Manager singleton (initSDK / getSDK)
│ ├── map-control.js # Navigation, projection, 3D modes
│ ├── views.js # view_add, view_remove, GeoJSON views
│ ├── filters.js # Numeric/text filters, transparency
│ └── ui.js # Language, theme, dashboard, modals
└── ui/
├── log.js # Debug log overlay
└── view-buttons.js # View toggle buttons with active state
SDK wrappers are thin: One function per resolver, returns the Promise directly. Group by theme (views, filters, ui, map-control).
State lives in store.js: Track openViews as a Set, custom data
in an array registry. Use setter functions for live module bindings.
UI modules are self-contained: Each module owns its DOM elements
and event listeners. Import SDK wrappers and store, export an
enable*() or init*() function called from main.js.
Comments are thorough: Document SDK method names, parameter shapes, return types, and known gotchas inline. This codebase will be used as a reference for production implementations.
See templates/embed-scaffold.md for the complete file templates with boilerplate code.
$ARGUMENTSconfig/views.jsget_views() discovery call in main.js
that logs available viewsnpm install && npm run build should succeednpm run dev and open the local URLThe scaffold should use:
<script> tag from app.mapx.org/sdk/mxsdk.umd.jsnpx claudepluginhub khawkins98/mapx-llm-skills --plugin mapx-llm-skillsProvides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.