ux-feedback
Add loading, empty, error, and success feedback states to StyleSeed components and pages with practical mobile-first rules.
Best use case
ux-feedback is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Add loading, empty, error, and success feedback states to StyleSeed components and pages with practical mobile-first rules.
Teams using ux-feedback should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/ux-feedback/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How ux-feedback Compares
| Feature / Agent | ux-feedback | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Add loading, empty, error, and success feedback states to StyleSeed components and pages with practical mobile-first rules.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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.
Related Skills
zustand-store-ts
Create Zustand stores following established patterns with proper TypeScript types and middleware.
zoom-automation
Automate Zoom meeting creation, management, recordings, webinars, and participant tracking via Rube MCP (Composio). Always search tools first for current schemas.
zoho-crm-automation
Automate Zoho CRM tasks via Rube MCP (Composio): create/update records, search contacts, manage leads, and convert leads. Always search tools first for current schemas.
zod-validation-expert
Expert in Zod — TypeScript-first schema validation. Covers parsing, custom errors, refinements, type inference, and integration with React Hook Form, Next.js, and tRPC.
zipai-optimizer
Ultra-dense token optimizer skill for prompt caching, log pruning, AST-based inspection, and minified JSON payloads.
zeroize-audit
Detects missing zeroization of sensitive data in source code and identifies zeroization removed by compiler optimizations, with assembly-level analysis, and control-flow verification. Use for auditing C/C++/Rust code handling secrets, keys, passwords, or other sensitive data.
zendesk-automation
Automate Zendesk tasks via Rube MCP (Composio): tickets, users, organizations, replies. Always search tools first for current schemas.
zapier-make-patterns
No-code automation democratizes workflow building. Zapier and Make (formerly Integromat) let non-developers automate business processes without writing code. But no-code doesn't mean no-complexity - these platforms have their own patterns, pitfalls, and breaking points.
youtube-summarizer
Extract transcripts from YouTube videos and generate comprehensive, detailed summaries using intelligent analysis frameworks
youtube-full
Fetch YouTube transcripts, search videos, browse channels, and extract playlists via TranscriptAPI — no yt-dlp, no Google API key, works from any cloud server.
youtube-automation
Automate YouTube tasks via Rube MCP (Composio): upload videos, manage playlists, search content, get analytics, and handle comments. Always search tools first for current schemas.
yield-intelligence
Passive income portfolio analysis — activate when user asks about dividend yields, Treasury rates, REIT income, monthly passive income goals, or portfolio yield optimization. Scans 4 asset classes, ranks by risk-adjusted return, and builds allocations targeting a specific monthly income.