Implements loading, empty, error, and success feedback states in React components.
npx skills add https://github.com/rmethodm/resumegen --skill ss-feedback-rmethodm
Please help me install this Agent Skill. Skill: ss-feedback Source: https://github.com/rmethodm/resumegen/tree/main/.agents/skills/ss-feedback Command: npx skills add https://github.com/rmethodm/resumegen --skill ss-feedback-rmethodm
animate-pulse, 300ms delay/minimum display rules, and prefers-reduced-motion support. - Empty, Error, and Success States: Adds centered empty states with next-action prompts, partial/full error states with retry buttons, and toast notifications with undo for destructive actions. - Use Case: You have a dashboard card that fetches user activity. Run this Skill on the file to get a DataCardSkeleton, DataCardEmpty, DataCardError with retry, and toast confirmations wired into a clean conditional rendering pattern. ## Quick Start Ask the AI to add loading, empty, error, and success feedback states to a specific component file such as src/components/ActivityCard.tsx.High-intent search queries and answers about installing and using this skill.
Create a skeleton variant that mirrors the final layout's dimensions using placeholder divs with animate-pulse. Delay its display by 300ms and keep it visible for at least 300ms to avoid flashing on fast loads.
A data-driven component needs four states: loading (skeleton matching final layout), empty (icon, message, and next action), error (plain-language message with retry button), and success (toast confirmation, with undo for destructive actions).
Use skeletons shaped like the final content inside cards rather than spinners. Skeletons preserve layout stability and set accurate expectations, while spinners cause layout shifts and give no sense of incoming structure.
Show the error state only in the affected card while the rest of the dashboard loads normally. Reserve full-screen error states with retry for complete page failures, and always include a retry action.
Skip it when you only need copywriting for state text, accessibility fixes on existing states, or brand-new component creation—those belong to dedicated copy, accessibility, and component-generation skills. It also excludes analytics or error-logging plumbing.
MaxDehautStandardize loading, error, and empty states in React applications.
EndavaAudit and fix accessibility issues in BEEQ StencilJS components.
operatelyWrites and reviews UI copy, microcopy, and user-facing product wording.
alfadocsBuild AlfaDocs interfaces with official UI kit primitives and ThemeRoot.