원클릭으로 Manus에서 모든 스킬 실행

sskobar-ui-admin

스타0

포크0

업데이트2026년 6월 16일 03:09

Build Satu Sehat Kobar admin UI (React in a Native plugin's admin.tsx) following PRD §9 — Kumo semantic tokens, dark+light, mobile-first, accessible, nested sidebar per plugin. Use for any SSK UI/UX issue or the UI slice of a feature.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

ahliweb

ahliweb/satusehatkobar

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

SSK Admin UI

Authoritative: PRD §9 (Kebutuhan UI/UX) + docs/sikesra-ui-redesign-plan.md (admin patterns) + docs/nested-navigation-public-and-plugin-header.md (navigation). Reference implementation: awcms-micro-sikesra/src/admin.tsx.

Hard rules

Kumo semantic tokens only for color/spacing. Never hardcode light-only colors — dark and light must both stay readable.
Mobile-first: usable at 375px; verify 375 / 768 / 1280. Primary action ≤ 3 clicks.
Accessibility: contrast ≥ 4.5:1, keyboard navigable, screen-reader friendly, visible focus.
Feedback states: every async surface has loading / empty / error / success (toast or inline).
Navigation: each plugin's admin menu is its own collapsible group, at the top below Dashboard (AGENTS root policy). Badge counts where the nav tree (PRD §9.2) shows them (e.g. Persetujuan pending count).
Language: UI labels default en with complete id translations; user-facing errors in Bahasa Indonesia.

Per-module UI cues (PRD §9.3)

Agenda: create/edit form, monthly calendar, SPM filter.
ST/SPPD: 4-step wizard (vertical stepper), participant table, budget table, real-time per-step validation.
Persetujuan: visual approval timeline, contextual action buttons, nav badge.
Dokumen: inline PDF preview, generate/download/upload, upload progress bar.
Bukti: multi-file drag-drop, photo preview, per-file classification checklist.
Dashboard: KPI cards, SPM chart, pending list.
Arsip: full-text search, date/type filters, download.

Checklist

No hardcoded colors; Kumo tokens only; dark + light verified.
Responsive at 375/768/1280; keyboard + screen-reader pass.
Loading/empty/error/success states present.
Sidebar group correct; badges where specified.
UI-only change (no API/business-logic) unless the issue says otherwise.

Ease of development

Build shared primitives (cards, tables, status badges, toasts, wizard stepper, form groups) once in a shared UI module and reuse across plugins, so each feature's UI slice stays small and consistent.

이 저장소의 다른 Skills

같은 저장소

sskobar-prd-governance

ahliweb/satusehatkobar

Use when updating `docs/prd`, adding or revising Mermaid diagrams, synchronizing AI-ready issue docs/templates, or aligning `README.md`, `AGENTS.md`, and root docs with the latest active Satu Sehat Kobar PRD package and MVP scope.

2026-06-160

sskobar-e2e-release

ahliweb/satusehatkobar

Implement Satu Sehat Kobar end-to-end/UAT tests, the consolidated UAT/demo seed (17 roles + full sample flow), and the deployment + smoke + rollback runbook. Use for EPIC-16 issues.

2026-06-160

sskobar-integration-backend

ahliweb/satusehatkobar

Implement Satu Sehat Kobar backend & integration foundations — inter-plugin service contracts (SC-01..11), cross-plugin domain events / cache invalidation, notification channel abstraction, external integration adapter boundary, shared API middleware, observability, and migration ordering. Use for EPIC-14 issues.

2026-06-160

sskobar-master-data

ahliweb/satusehatkobar

Implement Satu Sehat Kobar master-data foundation — official/local region, health facilities, organization units, document numbering, signatories, holidays, transport, and personnel (employees/positions/supervisors). Use for EPIC-13 issues (addenda doc 21/22/23).

2026-06-160

sskobar-approval-workflow

ahliweb/satusehatkobar

Implement the Satu Sehat Kobar duty-travel approval engine — DB-configured multi-step chain, finance auto-skip, finance ABAC scope, in-app notifications, return/reject, and the approver queue. Use for EPIC-04 issues.

2026-06-160

sskobar-dashboard-spm

ahliweb/satusehatkobar

Implement the Satu Sehat Kobar dashboard aggregate endpoint with KV caching and the 12-indicator SPM tracker. Use for EPIC-08 issues (satusehat-dashboard / spm-health).

2026-06-160

name	sskobar-ui-admin
description	Build Satu Sehat Kobar admin UI (React in a Native plugin's admin.tsx) following PRD §9 — Kumo semantic tokens, dark+light, mobile-first, accessible, nested sidebar per plugin. Use for any SSK UI/UX issue or the UI slice of a feature.

SSK Admin UI

Hard rules

Kumo semantic tokens only for color/spacing. Never hardcode light-only colors — dark and light must both stay readable.
Mobile-first: usable at 375px; verify 375 / 768 / 1280. Primary action ≤ 3 clicks.
Accessibility: contrast ≥ 4.5:1, keyboard navigable, screen-reader friendly, visible focus.
Feedback states: every async surface has loading / empty / error / success (toast or inline).
Navigation: each plugin's admin menu is its own collapsible group, at the top below Dashboard (AGENTS root policy). Badge counts where the nav tree (PRD §9.2) shows them (e.g. Persetujuan pending count).
Language: UI labels default en with complete id translations; user-facing errors in Bahasa Indonesia.

Per-module UI cues (PRD §9.3)

Agenda: create/edit form, monthly calendar, SPM filter.
ST/SPPD: 4-step wizard (vertical stepper), participant table, budget table, real-time per-step validation.
Persetujuan: visual approval timeline, contextual action buttons, nav badge.
Dokumen: inline PDF preview, generate/download/upload, upload progress bar.
Bukti: multi-file drag-drop, photo preview, per-file classification checklist.
Dashboard: KPI cards, SPM chart, pending list.
Arsip: full-text search, date/type filters, download.

Checklist

No hardcoded colors; Kumo tokens only; dark + light verified.
Responsive at 375/768/1280; keyboard + screen-reader pass.
Loading/empty/error/success states present.
Sidebar group correct; badges where specified.
UI-only change (no API/business-logic) unless the issue says otherwise.

Ease of development

Build shared primitives (cards, tables, status badges, toasts, wizard stepper, form groups) once in a shared UI module and reuse across plugins, so each feature's UI slice stays small and consistent.