Run any Skill in Manus with one click

sskobar-ui-admin

Stars0

Forks0

UpdatedJune 16, 2026 at 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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

ahliweb

ahliweb/satusehatkobar

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

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

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.

More from this repository

same repository

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.