mcpField
E
executive-course-dashboard

executive-course-dashboard

github.com/lensetekOther013 installsUpdated 1d ago
Repository

About executive-course-dashboard

A skill for creating a single-screen web dashboard that helps teachers and academic leaders monitor class performance. It displays key academic indicators together and reads summary data from a local JSON file.

Key features

  1. 01Single-screen academic overview
  2. 02Responsive layout from phones to monitors
  3. 03Class status and session metrics
  4. 04Local JSON data input
  5. 05Client-side operation

Use cases

  1. 01Reviewing class progress at a glance
  2. 02Monitoring submission and completion rates
  3. 03Displaying course indicators on a projector

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/lensetek/course-agent-skills --skill executive-course-dashboard

After installing, type/executive-course-dashboardin Claude Code to confirm it loaded.

Details

From the project README

Executive Course Dashboard 📊

executive-course-dashboard menciptakan satu tampilan dashboard web modern, elegan, dan padat informasi agar pengajar (atau pimpinan jurusan/sekolah) dapat memantau kesehatan akademik kelas dalam satu layar pandang tanpa harus membuka puluhan spreadsheet terpisah.

📱 Standar Desain Mobile-View First & Visual Hierarchy

Sesuai aturan baku, antarmuka ini dirancang dengan prinsip Mobile-View First:

  1. Responsif Sempurna: Tampilan tertata rapi mulai dari layar smartphone 360px, tablet, laptop, hingga monitor proyektor kelas 4K.
  2. Tema Utama Light Mode Berkontras Tinggi:
    • Menggunakan warna teks tajam (Slate #0f172a pada judul, #334155 pada isi teks) di atas kartu berlatar putih bersih (#ffffff) dengan batas tegas (#e2e8f0).
    • Tidak ada teks abu-abu pudar atau teks putih di latar terang.
  3. Konsep 1 Layar Pandang (Single-Screen Overview):
    • Panel metrik dirancang modular menggunakan CSS Grid / Flexbox sehingga seluruh ringkasan esensial langsung terlihat sekilas tanpa scrolling panjang.

🎛️ Komponen Widget Dashboard Eksekutif

┌─────────────────────────────────────────────────────────────┐
│ 🎓 REKAYASA PERANGKAT LUNAK (CS302) - SEMESTER GANJIL      │
│ [Status Kelas: Aktif]  [Sesi Berjalan: 04/14]   [👥 38 Mhs] │
├──────────────┬──────────────┬──────────────┬────────────────┤
│ 📈 Rata-Rata │ 📥 Pengumpulan│ 🏆 Ketuntasan│ ⚠️ Butuh       │
│    84.6/100  │     94.7%    │   CPMK: 89%  │   Perhatian: 3 │
├──────────────┴──────────────┴──────────────┴────────────────┤
│ 🎯 Radar Capaian CPMK         │ 📊 Distribusi Nilai Kelas   │
│ CPMK-1 [██████████░] 91%      │ [A: 14]  [AB: 12]  [B: 8]   │
│ CPMK-2 [████████░░░] 82%      │ [C: 3]   [Remedial: 1]      │
├───────────────────────────────┴─────────────────────────────┤
│ 🚨 Early Warning Alert: Mahasiswa Perlu Pendampingan        │
│ • Budi Santoso (Tugas 3 belum kumpul - Rekomendasi: Kontak) │
│ • Sinta Dewi (Nilai Sesi 2 < 65 - Rekomendasi: Remedial L1) │
└─────────────────────────────────────────────────────────────┘

🔒 Protokol Keamanan & Tanpa Kredensial Bocor

  • Berkas index.html ini bekerja 100% Client-Side.
  • Membaca data ringkasan nilai dari berkas data_ringkasan.json lokal yang di-generate oleh agen.
  • Tidak ada API Key, password, token database, atau kredensial yang disematkan ke dalam frontend.

Comments

Markdown supported