メニュー
Every async surface needs five states — loading (skeleton), empty, error (with retry), partial/stale, success. Skeleton over spinner. Empty-state copy must include CTA.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | loading-empty-error-states |
| description | Every async surface needs five states — loading (skeleton), empty, error (with retry), partial/stale, success. Skeleton over spinner. Empty-state copy must include CTA. |
Source: UX Writing Hub — empty states.
Read first:
state === "refreshing". Show stale data + indicator.Don't conflate empty and error — "no rows" is not a failure.
No moderation actions yet.When the bot bans a user, you'll see it here.[Configure detection rules] → /settings/spam.Always one CTA. If there's no action the user can take, surface a help link instead.
Couldn't load chat list. (not "Something went wrong").[Retry] button bound to refetch().Code: NETWORK — useful for support.Match expected real content dimensions ±10%. A 3-line list skeleton showing one line = jarring snap on load.
| Surface | States needed |
|---|---|
| Chats list | empty (no watched chats), loading, error |
| Moderation ledger | empty (new chat), loading, error, partial (filter narrows to 0) |
| Chat detail | loading, error |
Public report /report/{slug} | loading, error → 404 page, not inline |
| Captcha image | loading (preload), error (retry) |
| Settings form | success only after save; field errors via form-error-ux |
<Switch>
<Match when={chats.error}>
<ErrorState
title={t("chats.load-failed")}
code={(chats.error as ApiError).code}
onRetry={refetch}
/>
</Match>
<Match when={chats.loading}><ChatListSkeleton rows={6} /></Match>
<Match when={chats()?.length === 0}>
<EmptyState
title={t("chats.empty-title")}
body={t("chats.empty-body")}
cta={{ label: t("chats.empty-cta"), href: "/settings/chats" }}
/>
</Match>
<Match when={chats()}>{(c) => <ChatList chats={c()} />}</Match>
</Switch>
Order matters: error before loading so a stale error doesn't hide behind a skeleton on refreshing.
<div class="relative">
<ChatList chats={chats() ?? []} />
<Show when={chats.state === "refreshing"}>
<Spinner class="absolute right-2 top-2" aria-label={t("status.refreshing")} />
</Show>
</div>
DevTools → Network → Offline. Every async surface must show error + retry. Network → throttle to slow 3G — skeletons appear within 100ms, no spinner over content.
solid-resource-pattern — resource.state drives this.form-error-ux — field-level errors.ui-critique — empty/error pass.Bump the patch version in server/Cargo.toml or website/package.json after completing a major change. Use when the user asks to bump/release a version, or when CLAUDE.md's rule about version bumps after major changes applies.
Before a non-trivial change, list affected systems — DB schema, API contract, Telegram handlers, jobs, TS types, docs. Catch ripple effects upfront, not after CI fails. Use when planning a feature, migration, refactor, or any cross-module touch.
Self-review before push — read the diff as a reader, scan for vixen footguns (token leaks, PII, idempotency, captcha asset overwrites), run validation pipeline, no surprise files. Use before "git push", before opening a PR, or when the user says "ready to commit".
Write a git commit message for vixen-rs following the project's Conventional Commits convention. Use when the user asks to commit, create a commit, or write a commit message.
Reproduce → bisect → root cause → fix → verify. Don't speculate, don't "add more error handling" as a guess. Use when something is broken, when a test fails intermittently, when the user says "this isn't working" or "investigate why".
Write small, fast, reproducible Dockerfiles for the vixen-rs server (Rust) and website (bun) using multi-stage builds, cache mounts, distroless/alpine runtime images, and non-root users. Use when editing server/Dockerfile, website/Dockerfile, docker-compose.yml, or when the user asks to shrink an image or speed up a Docker build.