About

Imported from trduxng/.gemini (skills/design_ui_ux/ux-feedback/SKILL.md). Install upstream with npx skills add trduxng/.gemini --skill ux-feedback. Copyright stays with the author.

UX Feedback

Name: ux-feedback
Author: trduxng

Overview

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.

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:

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

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

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.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/trduxng-gemini-ux-feedback/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

trduxng-gemini-ux-feedback.ocm.jsonjson

{
  "ocm": "1",
  "id": "trduxng-gemini-ux-feedback",
  "kind": "skill",
  "name": "ux-feedback",
  "description": "Add loading, empty, error, and success feedback states to StyleSeed components and pages with practical mobile-first rules.",
  "publisher": "trduxng",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "ux",
      "states",
      "loading",
      "error-handling",
      "styleseed",
      "github"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Add loading, empty, error, and success feedback states to StyleSeed components and pages with practical mobile-first rules."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "github",
      "repository": "https://github.com/trduxng/.gemini",
      "path": "skills/design_ui_ux/ux-feedback/SKILL.md",
      "ref": "20f74a6b80942b105c11382bd92e9351698af6b2",
      "url": "https://github.com/trduxng/.gemini/blob/20f74a6b80942b105c11382bd92e9351698af6b2/skills/design_ui_ux/ux-feedback/SKILL.md",
      "key": "trduxng/.gemini/skills/design_ui_ux/ux-feedback/SKILL.md"
    }
  },
  "instructions": "# UX Feedback\n\n## Overview\n\nPart 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.\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",
  "cost": {
    "context_tokens": 549
  }
}

Fetch it by URL: GET /api/v1/registry/trduxng-gemini-ux-feedback/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.