一键在 Manus 中运行任何 Skill

ui-pattern-library

星标15

分支0

更新时间2026年6月6日 02:57

UI pattern catalog for frontend, dashboard, landing page, SaaS, fintech, ecommerce, developer tools, admin, marketplace, healthcare, mobile web, forms, tables, onboarding, settings, and empty states. Use when choosing product-specific interface patterns.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

JCE-Joshhh77

JCE-Joshhh77/JCE-Opencode-Tools

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

UI Pattern Library

Katalog pola UI untuk membantu agent memilih arah desain yang terasa seperti produk nyata. Gunakan sebagai inspirasi arsitektur UI, bukan template siap copy.

Aturan Pakai

Pilih pola berdasarkan domain + user job + data density + backend state.
Jangan pakai semua pola sekaligus.
Jangan copy brand, aset, layout spesifik, atau CSS dari produk lain.
Jika project sudah punya design system, katalog ini hanya referensi sekunder.

Enterprise SaaS / Admin

Cocok untuk: CRM, ERP, internal tools, ops dashboard, RBAC admin.

Layout: sidebar kiri stabil, top bar ringkas, content area dengan page header + action cluster.
Density: medium-high; table/list sering lebih penting daripada card cantik.
Visual: neutral surfaces, border halus, status chip, compact filters.
State: permission denied, audit trail, bulk action, stale data, optimistic failure.
Jangan: hero marketing, gradient, card grid kosong.

Developer Tool

Cocok untuk: API platform, CLI dashboard, logs, deployments, observability.

Layout: split pane, command palette, monospace data, timeline/log stream.
Visual: high clarity, low ornament, strong information hierarchy.
State: build running, failed job, retry, copied token, rate limit, webhook error.
Microcopy: direct, technical, actionable.
Jangan: friendly mascot berlebihan jika task technical.

Fintech / Billing

Cocok untuk: payments, invoice, wallet, subscription, accounting.

Layout: account summary + transaction timeline/table + risk/status callouts.
Visual: trust-first; conservative color, clear currency alignment, audit metadata.
State: pending settlement, failed payment, dispute, verification required.
Microcopy: exact amounts, dates, next action, legal clarity.
Jangan: playful gradients yang mengurangi trust.

Ecommerce / Marketplace

Cocok untuk: product catalog, cart, merchant admin, order management.

Layout: visual product grid untuk browse, table/timeline untuk admin ops.
Visual: product images lead; filters visible; price/availability prominent.
State: out of stock, variant unavailable, shipping delay, return window.
Microcopy: concrete delivery/return/payment info.
Jangan: fake reviews/metrics.

Healthcare / Wellness

Cocok untuk: patient dashboard, appointment, medical records, habit tracking.

Layout: calm hierarchy, priority alerts, clear next step, minimal cognitive load.
Visual: accessible contrast, restrained color, avoid alarm fatigue.
State: missing consent, pending lab, urgent alert, privacy warning.
Microcopy: plain language, safety-focused, no overclaim.
Jangan: gamified visual jika konteks klinis serius.

AI Product

Cocok untuk: chat, copilots, generation tools, review assistants.

Layout: input/result loop, source citations, confidence/status, history.
Visual: clear provenance; show what changed and why.
State: streaming, queued, model error, unsafe request, low confidence.
Microcopy: transparent about limits.
Jangan: “AI magic” hero generik dan glowing orb default.

Landing Page Produk

Cocok untuk: marketing site, launch page, product homepage.

Layout: specific hero promise, proof near top, product screenshot/context, use cases, pricing/CTA.
Visual: one memorable motif tied to product domain.
State: no backend heavy state, but forms need validation/success/error.
Copy: name actual customer problem; avoid buzzword soup.
Jangan: centered generic hero + 3 cards + gradient blobs tanpa proof.

Data Dashboard

Cocok untuk: analytics, metrics, monitoring, business intelligence.

Layout: KPI strip only if actionable; primary chart/table gets largest area.
Visual: chart semantics > decoration; align axes, legends, units.
State: no data, partial data, stale sync, timezone, permissions.
Microcopy: explain metric definition and freshness.
Jangan: fake metric cards yang tidak bisa ditindak.

Forms / Onboarding

Cocok untuk: signup, setup wizard, KYC, config.

Layout: one decision per step; progress visible only if meaningful.
Visual: strong labels, inline validation, examples, save/resume behavior.
State: validation, duplicate, server rejected, partial save, timeout.
Microcopy: explain why data needed.
Jangan: giant decorative side panel jika form panjang dan task berat.

Settings / Preferences

Cocok untuk: account, team, billing, notification, API keys.

Layout: grouped sections, destructive actions isolated, save state clear.
Visual: compact, predictable, low novelty.
State: unsaved changes, save success, permission, revoke/rotate, audit event.
Jangan: hide dangerous actions near primary controls.

Pattern Selection Output

## Pattern Choice
**Domain:** ...
**Selected pattern:** ...
**Why:** ...
**Rejected patterns:** ...
**Backend states shaping UI:** ...

同仓库更多 Skills

同仓库

web-security-audit

JCE-Joshhh77/JCE-Opencode-Tools

Framework-agnostic website security audit and authorized pentest methodology (OWASP, red-team attacker mindset, white-hat reporting). Use for web pentest, vulnerability assessment, attack-surface review, bug bounty prep, or security audit of any web stack.

2026-07-1515

estimation-planning

JCE-Joshhh77/JCE-Opencode-Tools

Critical path identification, risk-adjusted effort sizing, complexity detection, and execution strategy selection. Use when scoping a task, deciding direct-vs-planned execution, breaking down large work, or assessing how many steps something really needs.

2026-06-1615

orchestration-patterns

JCE-Joshhh77/JCE-Opencode-Tools

Multi-phase workflows, state machines, DAG task execution, checkpoint/resume, and saga patterns for complex multi-step or multi-session work. Use when a task spans 5+ steps, multiple files, multiple sessions, or has irreversible phases.

2026-06-1615

code-archaeology

JCE-Joshhh77/JCE-Opencode-Tools

Understanding legacy and unfamiliar code, git blame/history analysis, dependency archaeology, and reconstructing intent behind existing code. Use when working in unfamiliar codebases, investigating "why was this written this way", or before changing code you didn't write.

2026-06-1215

failure-recovery

JCE-Joshhh77/JCE-Opencode-Tools

Retry strategies, rollback protocols, circuit breakers for delegations, escalation chains, and failure budgets. Use when verification fails, a fix doesn't work, a sub-agent returns weak output, or you are stuck in a failure loop.

2026-06-1215

incident-response

JCE-Joshhh77/JCE-Opencode-Tools

Production incident triage, rollback procedures, blast radius assessment, severity classification, and post-mortem templates. Use when production is down, a deploy broke something, users are impacted, or you need to stabilize before fixing root cause.

2026-06-1215

name	ui-pattern-library
description	UI pattern catalog for frontend, dashboard, landing page, SaaS, fintech, ecommerce, developer tools, admin, marketplace, healthcare, mobile web, forms, tables, onboarding, settings, and empty states. Use when choosing product-specific interface patterns.

UI Pattern Library

Katalog pola UI untuk membantu agent memilih arah desain yang terasa seperti produk nyata. Gunakan sebagai inspirasi arsitektur UI, bukan template siap copy.

Aturan Pakai

Pilih pola berdasarkan domain + user job + data density + backend state.
Jangan pakai semua pola sekaligus.
Jangan copy brand, aset, layout spesifik, atau CSS dari produk lain.
Jika project sudah punya design system, katalog ini hanya referensi sekunder.

Enterprise SaaS / Admin

Cocok untuk: CRM, ERP, internal tools, ops dashboard, RBAC admin.

Layout: sidebar kiri stabil, top bar ringkas, content area dengan page header + action cluster.
Density: medium-high; table/list sering lebih penting daripada card cantik.
Visual: neutral surfaces, border halus, status chip, compact filters.
State: permission denied, audit trail, bulk action, stale data, optimistic failure.
Jangan: hero marketing, gradient, card grid kosong.

Developer Tool

Cocok untuk: API platform, CLI dashboard, logs, deployments, observability.

Layout: split pane, command palette, monospace data, timeline/log stream.
Visual: high clarity, low ornament, strong information hierarchy.
State: build running, failed job, retry, copied token, rate limit, webhook error.
Microcopy: direct, technical, actionable.
Jangan: friendly mascot berlebihan jika task technical.

Fintech / Billing

Cocok untuk: payments, invoice, wallet, subscription, accounting.

Layout: account summary + transaction timeline/table + risk/status callouts.
Visual: trust-first; conservative color, clear currency alignment, audit metadata.
State: pending settlement, failed payment, dispute, verification required.
Microcopy: exact amounts, dates, next action, legal clarity.
Jangan: playful gradients yang mengurangi trust.

Ecommerce / Marketplace

Cocok untuk: product catalog, cart, merchant admin, order management.

Layout: visual product grid untuk browse, table/timeline untuk admin ops.
Visual: product images lead; filters visible; price/availability prominent.
State: out of stock, variant unavailable, shipping delay, return window.
Microcopy: concrete delivery/return/payment info.
Jangan: fake reviews/metrics.

Healthcare / Wellness

Cocok untuk: patient dashboard, appointment, medical records, habit tracking.

Layout: calm hierarchy, priority alerts, clear next step, minimal cognitive load.
Visual: accessible contrast, restrained color, avoid alarm fatigue.
State: missing consent, pending lab, urgent alert, privacy warning.
Microcopy: plain language, safety-focused, no overclaim.
Jangan: gamified visual jika konteks klinis serius.

AI Product

Cocok untuk: chat, copilots, generation tools, review assistants.

Layout: input/result loop, source citations, confidence/status, history.
Visual: clear provenance; show what changed and why.
State: streaming, queued, model error, unsafe request, low confidence.
Microcopy: transparent about limits.
Jangan: “AI magic” hero generik dan glowing orb default.

Landing Page Produk

Cocok untuk: marketing site, launch page, product homepage.

Layout: specific hero promise, proof near top, product screenshot/context, use cases, pricing/CTA.
Visual: one memorable motif tied to product domain.
State: no backend heavy state, but forms need validation/success/error.
Copy: name actual customer problem; avoid buzzword soup.
Jangan: centered generic hero + 3 cards + gradient blobs tanpa proof.

Data Dashboard

Cocok untuk: analytics, metrics, monitoring, business intelligence.

Layout: KPI strip only if actionable; primary chart/table gets largest area.
Visual: chart semantics > decoration; align axes, legends, units.
State: no data, partial data, stale sync, timezone, permissions.
Microcopy: explain metric definition and freshness.
Jangan: fake metric cards yang tidak bisa ditindak.

Forms / Onboarding

Cocok untuk: signup, setup wizard, KYC, config.

Layout: one decision per step; progress visible only if meaningful.
Visual: strong labels, inline validation, examples, save/resume behavior.
State: validation, duplicate, server rejected, partial save, timeout.
Microcopy: explain why data needed.
Jangan: giant decorative side panel jika form panjang dan task berat.

Settings / Preferences

Cocok untuk: account, team, billing, notification, API keys.

Layout: grouped sections, destructive actions isolated, save state clear.
Visual: compact, predictable, low novelty.
State: unsaved changes, save success, permission, revoke/rotate, audit event.
Jangan: hide dangerous actions near primary controls.

Pattern Selection Output

## Pattern Choice
**Domain:** ...
**Selected pattern:** ...
**Why:** ...
**Rejected patterns:** ...
**Backend states shaping UI:** ...