agentleFS
Sign inStart free
GeoDaoyuGeoDaoyu/arcgis-maps-sdk-js-ai-context/skills/arcgis-starter-app/AGENTS.md

arcgis-maps-sdk-js-ai-context / arcgis-starter-app

AGENTS.md0 starsChanged 7 months agoMITView on GitHub

Quick-reference decisions, checklists, and tables for scaffolding ArcGIS applications.

  • Reads credentials
  • Installs packages

The file

Create a free account to mount
Files
AGENTS.md

Agent Guide: arcgis-starter-app

Quick-reference decisions, checklists, and tables for scaffolding ArcGIS applications.

Minimal vs Production Setup Decision

  1. Is this a prototype, demo, or learning exercise?
    • Yes --> Minimal setup (Vite + TypeScript, no linting)
    • No --> Production setup
  2. Will this be maintained by a team or deployed publicly?
    • Yes --> Production setup (ESLint, Prettier, git hooks, CI/CD)
    • No, personal project --> Minimal is fine
  3. Do you need CI/CD pipelines?
    • Yes --> Production setup includes GitHub Actions workflows
    • No --> Minimal setup
FeatureMinimalProduction
Vite + TypeScriptYesYes
Map Components + CalciteYesYes
ESLintNoYes
PrettierNoYes
Git hooks (lint-staged)NoYes
GitHub Actions CI/CDNoYes
.env for API keyNoYes (VITE_ARCGIS_API_KEY)
EditorConfigNoYes

New Project Checklist

Quick start (minimal)

  • npm create vite@latest my-app -- --template vanilla-ts
  • cd my-app
  • npm install @arcgis/map-components @esri/calcite-components
  • Set "moduleResolution": "bundler" in tsconfig.json
  • Set build.target: "esnext" in vite.config.ts
  • Replace index.html body with <arcgis-map> or <arcgis-scene>
  • Replace src/main.ts with component imports and esriConfig.apiKey
  • Set html, body { height: 100%; margin: 0; } in CSS
  • npm run dev

Production additions

  • npm install -D eslint @eslint/js typescript-eslint eslint-config-prettier prettier simple-git-hooks lint-staged
  • Create eslint.config.js (flat config)
  • Create .prettierrc and .prettierignore
  • Add simple-git-hooks and lint-staged config to package.json
  • Run npx simple-git-hooks to install hooks
  • Create .env.example with VITE_ARCGIS_API_KEY=
  • Add .env to .gitignore
  • Use import.meta.env.VITE_ARCGIS_API_KEY in main.ts
  • Create .github/workflows/test.yml and deploy.yml

Framework Selection Table

FrameworkWeb Component SupportSetup Notes
Vanilla TSNativeSimplest setup. Use Vite vanilla-ts template.
React 19Native (onarcgis* events)Events use on prefix: onarcgisViewReadyChange.
React <19Requires ref workaroundUse useEffect + addEventListener on refs. Consider Core API instead.
AngularVia CUSTOM_ELEMENTS_SCHEMAAdd schema to component/module. Import CSS explicitly.
Vue 3Native (@arcgis* events)Configure compilerOptions.isCustomElement in vite.config.ts.

Key Configuration Files

FilePurposeRequired?
tsconfig.jsonTypeScript config; must set moduleResolution: "bundler"Yes
vite.config.tsBuild config; must set build.target: "esnext"Yes
package.jsonDependencies and scriptsYes
.envAPI key (VITE_ARCGIS_API_KEY)Production
eslint.config.jsLinting rules (flat config format)Production
.prettierrcCode formatting rulesProduction

Package Dependencies

Required

@arcgis/map-components  -- Map Components (web components)
@esri/calcite-components -- Calcite Design System

Required (Core API only, without Map Components)

@arcgis/core -- Core API classes
@esri/calcite-components -- Calcite Design System

Dev (minimal)

typescript
vite

Dev (production, additional)

eslint, @eslint/js, typescript-eslint, eslint-config-prettier
prettier, simple-git-hooks, lint-staged

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free