메뉴
Use when adding or changing frontend pages/components in this repo (frontend/src, Vue 3 + Vite + Tailwind + Leaflet + Chart.js). Covers routing, API calls, the coverage tier colors, and the build/verify loop.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use when changing the PostgreSQL schema or views for this repo (script/sql/*.sql, tables sppg/dapodik_pd/kecamatan_mapping/kecamatan_coords, views v_sppg/v_sppg_per_kecamatan). Covers ordering, idempotency, and applying against the live sppg-db container.
Use when adding or changing backend API endpoints in this repo (backend/api/routes.js, Express + pg). Covers query conventions, the v_sppg clean view, error handling, and the coverage business rule.
Use when scraping, cleaning, mapping, or importing the SPPG/DAPODIK data in this repo (script/*.py, script/*.mjs, script/data, script/sql/import_data.sql). Covers the CSV→Postgres flow and known data-quality issues.
| name | vue-dashboard-ui |
| description | Use when adding or changing frontend pages/components in this repo (frontend/src, Vue 3 + Vite + Tailwind + Leaflet + Chart.js). Covers routing, API calls, the coverage tier colors, and the build/verify loop. |
Frontend = Vue 3 Composition API (<script setup>) + Vite + Tailwind. Halaman lazy-loaded
di frontend/src/router.js; layout di App.vue (Sidebar + <router-view>).
frontend/src/pages/, daftarkan route di router.js,
tambah link di components/Sidebar.vue.fetch('/api/...') (vite dev mem-proxy /api → :3000).
Angka dari Postgres sering berupa string — Number(...)/parseFloat sebelum hitung
atau format.tailwind.config.js):
coverage.low (#ef4444 merah), coverage.medium (#eab308 kuning),
coverage.high (#22c55e hijau). Map tier/coverage_persen dari API ke warna ini —
ambang sama: <70 merah, 70–89 kuning, 90–100 hijau muda, >100 hijau tua.lat/lon null
(banyak kecamatan tanpa koordinat).@ alias untuk src/ (sudah dikonfigurasi di vite.config.js)./api/stats, /api/sppg (paginasi + filter q/provinsi/kabkota), /api/kecamatan,
/api/coverage, /api/coverage/provinsi, /api/coverage/kabkota,
/api/coverage/detail/:kode, /api/peserta-didik, /api/distribusi, /api/filter-options,
/api/stunting (prevalensi stunting per provinsi).
Peta choropleth: polygon 38 provinsi di frontend/public/geo/indonesia-38.geojson
(properti PROVINSI title-case). Join ke data per provinsi via PROVINSI.toUpperCase()
(cocok dengan kolom provinsi uppercase di DB). Lihat PetaDistribusi.vue (toggle titik
SPPG vs choropleth stunting).
.vue yang diubah.cd frontend && npm run build — harus sukses (tangkap error template/import).npm run dev, buka halaman, cek console bersih (Playwright/
claude-in-chrome). Backend harus hidup di :3000.