Skip to main content
NEW · APP STORE Now on iOS · macOS · iPad Android & Windows soon GET IT
Prompts StyleSeed UX Feedback States Implementer

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

  1. Use this skill only when the task clearly matches the scope described above.
  2. Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  3. 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