developer product skill risk: low
StyleSeed UX Feedback States Implementer
Identifies data-dependent areas in StyleSeed components and pages, then specifies loading, empty, error, and success states to add for each along with reusable patterns and follow-…
SKILL 1 file
SKILL.md
--- name: antigravity-awesome-skills-ux-feedback-f1091c53 description: "Add loading, empty, error, and success feedback states to StyleSeed components and pages with practical mobile-first rules." --- # UX Feedback ## Overview Part of [StyleSeed](https://github.com/bitjaru/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. ## When to Use - Use when a component or page fetches, mutates, or depends on async data - Use when a flow currently renders only the success path - Use when a card, list, or page needs better state communication - Use when the product needs clear recovery and confirmation behavior ## The Four Required States ### Loading 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. ### Empty Provide a friendly explanation and a next action. Zero values should still render meaningfully instead of disappearing. ### Error 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. ### Success Use toasts or equivalent lightweight confirmation for completed actions. Add undo for reversible destructive changes. ## Output Return: 1. The data-dependent areas identified 2. The loading, empty, error, and success states added for each one 3. Any reusable empty-state or toast patterns created 4. Follow-up work needed for analytics, retries, or accessibility ## Best Practices - Match loading placeholders to the real layout - Keep partial failure isolated whenever possible - Make recovery obvious, not hidden in logs or developer tools - Use success feedback sparingly but clearly ## Additional Resources - [StyleSeed repository](https://github.com/bitjaru/styleseed) - [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ux-feedback/SKILL.md) ## Limitations - Use this skill only when the task clearly matches the scope described above. - Do not treat the output as a substitute for environment-specific validation, testing, or expert review. - Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
REQUIRED CONTEXT
- StyleSeed components or pages that fetch/mutate async data
ROLES & RULES
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
EXPECTED OUTPUT
- Format
- structured_report
- Schema
- numbered_list · The data-dependent areas identified, The loading, empty, error, and success states added for each one, Any reusable empty-state or toast patterns created, Follow-up work needed for analytics, retries, or accessibility
- Constraints
- return exactly the four numbered items listed under Output
- follow best practices for each state
SUCCESS CRITERIA
- Match loading placeholders to the real layout
- Keep partial failure isolated whenever possible
- Make recovery obvious, not hidden in logs or developer tools
- Use success feedback sparingly but clearly
CAVEATS
- Missing context
- Names or descriptions of the specific components/pages to analyze
- UI framework or component library in use
- Current implementation examples of data fetching
- Ambiguities
- "Delay skeletons slightly" does not specify a time or condition.
- "Use toasts or equivalent lightweight confirmation" leaves equivalents undefined.
- "Use success feedback sparingly but clearly" provides no measurable guidance.
QUALITY
- OVERALL
- 0.62
- CLARITY
- 0.82
- SPECIFICITY
- 0.68
- REUSABILITY
- 0.35
- COMPLETENESS
- 0.78
IMPROVEMENT SUGGESTIONS
- Replace the StyleSeed-specific links and name with generic placeholders so the prompt can be reused on other codebases.
- Add a required input section listing the exact components or files to review.
- Convert the four states into a short checklist or table template for consistent output formatting.
USAGE
Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.
MORE FOR DEVELOPER
- Micro-SaaS Vibecoder MVP Blueprint Architectdeveloperproduct
- UI Design Handoff Generatordeveloperproduct
- iOS Recipe Generator App Designerdeveloperproduct
- Couples Therapy App Designerdeveloperproduct
- Cohort OS Group Coaching Platform Builderdeveloperproduct
- GitHub Sponsors Pricing Tiers Suggesterdeveloperproduct
- Mobile App Navigation UX Designerdeveloperproduct
- Form Builder App Designer Architectdeveloperproduct
- Context7 Library Documentation Expertdevelopercoding
- Structured Python Production Code Generatordevelopercoding
- Minimax Music API Generation Agentdevelopercreative
- Angular Standalone Directive Generatordevelopercoding
- Pytest Unit Test Suite Generatordevelopercoding
- Unity Architecture Specialistdevelopercoding
- iOS App Store Compliance Auditordeveloperanalysis
- Reusable Enterprise Website Template Architectdevelopersoftware_engineering
- Web Typography CSS Generatordevelopercoding
- DevOps CI/CD Pipeline Automatordeveloperoperations
- Cascading System Failure Simulatordeveloperoperations
- Python Security Code Auditordevelopersecurity
- WCAG Web Accessibility Auditor Remediatordeveloperevaluation
- VSCode CodeTour File Expertdevelopercoding
- 6-Day Sprint Feature Prioritizerdeveloperplanning
- Senior Python Code Reviewerdevelopercoding
- Structured Cross-Language Code Translatordevelopercoding