[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-90939818-9ddf-4a04-88a7-712c469a937b":3,"$fkQLMvRylzLz9JIQbStSb37u0E-5RL6bpaqUzdxnUtKU":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"90939818-9ddf-4a04-88a7-712c469a937b","ux-feedback","为StyleSeed组件和页面添加加载、空、错误和成功反馈状态，并采用实用的移动优先规则。","cat_design_ui","mod_design","sickn33,design","---\nname: ux-feedback\ndescription: \"Add loading, empty, error, and success feedback states to StyleSeed components and pages with practical mobile-first rules.\"\ncategory: design\nrisk: safe\nsource: community\nsource_repo: bitjaru\u002Fstyleseed\nsource_type: community\ndate_added: \"2026-04-08\"\nauthor: bitjaru\ntags: [ux, states, loading, error-handling, styleseed]\ntools: [claude, cursor, codex, gemini]\n---\n\n# UX Feedback\n\n## Overview\n\nPart of [StyleSeed](https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed), 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.\n\n## When to Use\n- Use when a component or page fetches, mutates, or depends on async data\n- Use when a flow currently renders only the success path\n- Use when a card, list, or page needs better state communication\n- Use when the product needs clear recovery and confirmation behavior\n\n## The Four Required States\n\n### Loading\n\nUse 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.\n\n### Empty\n\nProvide a friendly explanation and a next action. Zero values should still render meaningfully instead of disappearing.\n\n### Error\n\nUse 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.\n\n### Success\n\nUse toasts or equivalent lightweight confirmation for completed actions. Add undo for reversible destructive changes.\n\n## Output\n\nReturn:\n1. The data-dependent areas identified\n2. The loading, empty, error, and success states added for each one\n3. Any reusable empty-state or toast patterns created\n4. Follow-up work needed for analytics, retries, or accessibility\n\n## Best Practices\n\n- Match loading placeholders to the real layout\n- Keep partial failure isolated whenever possible\n- Make recovery obvious, not hidden in logs or developer tools\n- Use success feedback sparingly but clearly\n\n## Additional Resources\n\n- [StyleSeed repository](https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed)\n- [Source skill](https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed\u002Fblob\u002Fmain\u002Fseeds\u002Ftoss\u002F.claude\u002Fskills\u002Fux-feedback\u002FSKILL.md)\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,249,1669,"2026-05-16 13:45:50",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"设计创意","design","mdi-palette-outline","UI 设计、生成艺术、品牌视觉等创意 Skill",3,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"UI 设计","ui-design","mdi-monitor-cellphone","界面设计、交互规范、设计系统",1,36,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"927f39cb-479b-4c3d-a536-d60d363439c1","1.0.0","ux-feedback.zip",1388,"uploads\u002Fskills\u002F90939818-9ddf-4a04-88a7-712c469a937b\u002Fux-feedback.zip","e5292ea6924c3a51f5e5969a056bd805a25db7af417a1a9860d719662d9f2d3b","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":2601}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]