一键在 Manus 中运行任何 Skill

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 仓库查看创作者相关仓库

下载

在 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.