القائمة
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 المهني
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.
| 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.