菜单
Add loading, empty, error, and success feedback states to StyleSeed components and pages with practical mobile-first rules.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.
Use when building high-agency frontend interfaces with strict design taste, calibrated color, responsive layout, and motion rules.
Use when a task requires exhaustive unabridged output, complete files, or strict prevention of placeholders and skipped code.
Use when generating elite GSAP-heavy frontend pages with strict AIDA structure, wide hero typography, and gapless bento grids.
Use when designing expensive agency-grade interfaces with premium fonts, spatial rhythm, soft depth, and fluid microinteractions.
Use when creating raw industrial or tactical telemetry UIs with rigid grids, stark typography, CRT effects, and high-density data.
| name | ux-feedback |
| description | Add loading, empty, error, and success feedback states to StyleSeed components and pages with practical mobile-first rules. |
| category | design |
| risk | safe |
| source | community |
| source_repo | bitjaru/styleseed |
| source_type | community |
| date_added | 2026-04-08 |
| author | bitjaru |
| tags | ["ux","states","loading","error-handling","styleseed"] |
| tools | ["claude","cursor","codex","gemini"] |
Part of StyleSeed, this skill ensures data-dependent UI does not stop at the happy path. It adds the four core feedback states every serious product needs: loading, empty, error, and success.
Use skeletons that match the final layout. Avoid spinners inside cards unless the pattern genuinely requires them. Delay skeletons slightly to avoid flashes on fast responses.
Provide a friendly explanation and a next action. Zero values should still render meaningfully instead of disappearing.
Use plain-language failure messages and always offer recovery where possible. Localize failures to the affected card or section if the rest of the page can still work.
Use toasts or equivalent lightweight confirmation for completed actions. Add undo for reversible destructive changes.
Return:
