메뉴
Implementasikan layar/komponen UI AWCMS-Mini sesuai design system. Gunakan saat membangun halaman admin/POS/portal, komponen UI, island interaktif, atau memasang design token/theme. Menegakkan token doc 14, state pattern, a11y AA, i18n, dan aturan offline-first doc 15.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Kelola/konsumsi sistem Module Management AWCMS-Mini (registry, validasi komposisi registry base, tenant lifecycle enable/disable, settings, permission sync/status, navigation, job registry, health/readiness). Gunakan saat menambah field descriptor baru (permissions/navigation/settings/jobs/health) di modul lain, saat menambah modul domain baru langsung di `src/modules/` dan perlu memverifikasi registry base tetap valid (`bun run modules:compose:check`), saat menyelidiki kenapa suatu modul terlihat degraded/orphaned, atau saat mengubah perilaku enable/disable/settings/health module_management sendiri. Sesuai src/modules/module-management/README.md, epic
Pilih dan jalankan profil deployment AWCMS-Mini (development/staging/production/offline-LAN). Gunakan saat menyiapkan deployment baru, memutuskan LAN-first vs registry-based, atau deploy ke Coolify. Sesuai doc 18 dan deployment-profiles.md/deploy-coolify.md.
Kelola sistem log/audit/metrics AWCMS-Mini yang sudah aktif — correlation ID lintas hop, retensi/purge audit log, extension point untuk consumer eksternal (alerting/export/SIEM), dan metrics port (counter/histogram/gauge berkardinalitas rendah untuk request/pool/job/provider). Gunakan saat menambah endpoint baru (correlation ID otomatis), menjadwalkan purge audit log, memasang consumer log/audit di aplikasi turunan, atau menambah/mengonsumsi metrik operasional. Berbeda dari awcms-mini-audit-log (APA yang wajib diaudit) — skill ini tentang BAGAIMANA sistem log/audit/metrics itu sendiri dikelola, sesuai Issue
Kerjakan bagian mana pun dari modul tenant_provisioning AWCMS-Mini (Issue
Triase dan perbaiki temuan CodeQL code scanning AWCMS-Mini (github.com/ahliweb/awcms-mini/security/code-scanning). Gunakan saat diminta "analisis code scanning"/"perbaiki CodeQL", saat sebuah PR gagal check CodeQL, atau saat menemukan alert baru. Mendokumentasikan satu TRUE-positive terkonfirmasi (password sungguhan → digest cepat yang dipersist = oracle cracking offline, plus dua "fix" yang membungkam alert tanpa memperbaiki apa pun) dan lima false-positive nyata (name-heuristic password, incompatible-types typeof/null, URL substring-sanitization di test mock, dua kasus dismiss resmi tanpa reformulasi kode, dan Bun.SQL tagged-template null-cast) plus pola "unused-local-variable di test kadang menandai coverage gap" — supaya tidak diinvestigasi ulang dari nol.
Daftarkan tabel bervolume tinggi ke registry lifecycle AWCMS-Mini (retensi/partisi/arsip/legal hold/purge), atau kerjakan bagian mana pun modul data_lifecycle sendiri. Gunakan saat menambah tabel baru yang tumbuh besar (log, telemetry, outbox, queue, provider attempt) dan butuh kebijakan retensi/purge aman, saat membuat/melepas legal hold, atau saat mengubah engine dry-run/archive/purge/archive-port. Sesuai Issue
| name | awcms-mini-ui-screen |
| description | Implementasikan layar/komponen UI AWCMS-Mini sesuai design system. Gunakan saat membangun halaman admin/POS/portal, komponen UI, island interaktif, atau memasang design token/theme. Menegakkan token doc 14, state pattern, a11y AA, i18n, dan aturan offline-first doc 15. |
Ikuti docs/awcms-mini/14_ui_ux_design_system.md (token, komponen, layout, layar) dan docs/awcms-mini/15_frontend_architecture_integration.md (SSR/islands, API client, offline).
Token dulu — pakai CSS variables doc 14 (--color-*, --sp-*, --fs-*, termasuk --color-primary-strong/--color-success-strong/--color-danger-strong untuk teks putih di atas warna solid, Issue #434 — semua ≥4.5:1 terukur, jangan pakai varian polos untuk itu); jangan hardcode warna/ukuran. Theme via data-theme tanpa flash.
Komponen dari library — Button/FormField/DataGrid/Dialog dst. dari src/components/ui; jangan duplikasi. Untuk state akses-ditolak/gagal-sementara pakai StateNotice.astro (src/components/ui, Issue #434) — jangan bikin blok .permission-denied ad-hoc baru. Untuk list/tabel besar pakai DataTable.astro + Pagination.astro + FilterBar.astro (Issue #693) alih-alih <table>/.table-scroll hand-rolled; untuk banner sukses/error pasca-mutation pakai ActionBanner.astro (kompatibel langsung dengan showBanner() yang sudah ada); untuk status lifecycle pakai StatusBadge.astro; untuk label+input+error pakai FormField.astro. Untuk konfirmasi aksi destruktif jangan pernah window.confirm/window.prompt — pakai ConfirmDialog.astro + src/lib/ui/confirm-dialog-client.ts's openConfirmDialog() (native <dialog>, focus trap + Esc-close bawaan browser, opsional field alasan wajib). Contoh migrasi nyata: src/pages/admin/access-users.astro dan src/pages/admin/tenant/domains.astro (lihat doc 14 §Migrated reference pages).
State pattern wajib — loading (skeleton), empty (+CTA), error (StateNotice.astro — bedakan "akses ditolak" dari "gagal sementara, coba lagi", pesan aman ter-i18n dari error code doc 05), success/submitting.
Island seperlunya — halaman SSR; interaktivitas hanya di island (POS, form, chat). Data awal via SSR, mutation via API client.
Form/mutation client-side — pakai submitJson/showBanner/lockElement/reloadAfterDelay (src/lib/ui/admin-form-client.ts, Issue #434) untuk form/tombol mutation di halaman admin — lockElement mencegah double-submit (disabled+aria-busy selama request, kembali ke semula termasuk saat gagal); jangan duplikasi implementasi submitJson/banner per halaman, dan jangan fetch mentah.
Navigasi role-aware — filter menu dari permission GET /auth/me; backend tetap validasi (UI hiding bukan kontrol).
i18n — lihat skill awcms-mini-i18n (katalog .po gettext, resolusi locale via middleware, formatter locale-aware, LanguageSwitcher.astro) — string UI statis selalu lewat t("namespace.key"), tidak pernah hardcode, termasuk komponen kecil (theme toggle, skip-link, dst. — Issue #434 menemukan ThemeToggle.astro lolos ekstraksi awal karena PR i18n tidak menyentuhnya).
A11y (WCAG 2.1 AA) — kontras ≥4.5:1, fokus terlihat, label eksplisit, dialog trap fokus + Esc, target sentuh ≥44px (mobile), status tidak hanya warna. Skip-link keyboard di layout admin (AdminLayout.astro, Issue #434). Sidebar admin responsif (Issue #693): di bawah --bp-md jadi off-canvas drawer dengan toggle aria-expanded/aria-controls, scrim penutup, Esc menutup + fokus kembali ke toggle, fokus pindah ke drawer saat dibuka, dan sisa halaman di-inert-kan selama drawer terbuka — jangan bangun drawer/dialog baru tanpa pola setara (lihat komentar <script> AdminLayout.astro).
Masking — data sensitif tampil lewat MaskedText; jangan cache PII mentah di IndexedDB.
POS khusus — keyboard map F1–F10 (doc 14), cart optimistic dengan rollback, offline outbox + SyncIndicator (doc 15).
Tabel lebar — bungkus dengan container scroll (overflow-x: auto), jangan biarkan tabel memaksa scroll horizontal seluruh halaman (Issue #434) — DataTable.astro sudah menyediakan ini secara default.
Kontrol capability-gated (Issue #693) — jangan pernah render kontrol interaktif (dropdown, tombol) yang secara visual menyiratkan sebuah aksi/kapabilitas lalu men-disabled-kannya di client sebagai satu-satunya penjaga (contoh nyata: TenantBadge.astro menggantikan TenantSwitcher.astro yang dulu begitu). Kalau kapabilitasnya memang tidak ada untuk siapapun hari ini, jangan render bentuk kontrolnya sama sekali — render badge/teks statis. Kalau kapabilitasnya BISA ada untuk sebagian user, computed data (daftar opsi, izin) harus datang dari server berdasarkan otorisasi nyata, bukan flag/state klien; dan endpoint tujuan aksi tetap harus menolak permintaan dari user yang tidak berwenang meski UI-nya "kebetulan" tidak disembunyikan (defense-in-depth, backend adalah penegak sesungguhnya).
Layar auth/login (doc 14 §Auth screen) — src/pages/login.astro adalah pola kartu auth publik kanonis: brand header (.auth-mark + .auth-wordmark) + judul/subjudul, field tenant adaptif (readout single-tenant "Signing in to " / <select> / manual sesuai AUTH_LOGIN_TENANT_PICKER, presentation-only — helper tak berubah), toggle show/hide password di-wire di script bundle (bukan onclick inline — CSP), <select> bergaya dengan caret CSS (bukan data: URI), dan entrance kartu transform-saja (@keyframes auth-card-rise — jangan opacity:0, hindari flag kontras axe). Pertahankan kontrak DOM (#login-form/#tenant-id/#login-identifier/#password/#login-submit/#login-error) saat menyentuhnya; awcms-mini tak punya --radius-xl/--color-primary-soft/--fw-* — pakai color-mix + bobot literal.
Layout shell (admin/POS/portal) dan tabel route→persona→API ada di doc 14 §Screen inventory — patuhi route dan komponen utamanya.
fetch mentah.@axe-core/playwright, lihat tests/e2e/admin-a11y-smoke.e2e.ts) tidak menemukan pelanggaran critical/serious.awcms-mini-new-endpoint (kontrak API), awcms-mini-i18n (katalog .po, locale, formatter), awcms-mini-sensitive-data (masking), awcms-mini-testing (render/state test), awcms-mini-browser-test (E2E Playwright + smoke aksesibilitas otomatis), awcms-mini-ux-review (audit layar yang sudah ada), awcms-mini-wizard-form (form multi-step — identitas/detail/lampiran/review sebelum submit).