ss-feedback
Add appropriate user feedback states (loading, success, error, empty) to a component or page
- Installs
- 852
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/bitjaru/styleseed --skill ss-feedback- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads ss-feedback automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Before this workflow, follow the once-per-session update preflight.
UX Feedback States Generator
Registry-first artifact boundary
When .styleseed/project.json and .styleseed/artifacts/index.json exist, resolve the requested artifact ID first, then read only .styleseed/bundles/<artifact-id>.md and .styleseed/manifests/<artifact-id>.json. Never fall back to the global legacy bundle for a registry project. Legacy projects may use .styleseed/effective-rules.md only when no registry exists.
When NOT to use
- For only the words inside a state → use
/ss-copy - For accessibility issues in existing states → use
/ss-a11y - For brand-new component creation → use
/ss-component - For analytics or error-logging plumbing — UI presentation only
Target: $ARGUMENTS
Instructions
-
Read the target file and identify all data-dependent areas.
-
Read the design language reference:
DESIGN-LANGUAGE.mdsections on Loading States (Skeleton), Empty States, Error States
-
For each data-dependent area, implement ALL 4 states:
State 1: Loading (Skeleton)
// Skeleton must match the final layout shape
<div className="bg-card rounded-2xl p-6 shadow-[var(--shadow-card)]">
<div className="flex items-center gap-2 mb-3">
<div className="size-7 bg-surface-muted rounded-lg animate-pulse" />
<div className="h-3 w-16 bg-surface-muted rounded animate-pulse" />
</div>
<div className="h-9 w-24 bg-surface-muted rounded-lg animate-pulse mb-3" />
<div className="h-3 w-12 bg-surface-muted rounded animate-pulse" />
</div>
Rules:
- Show skeleton for 300ms minimum (prevent flash)
- Delay skeleton display by 300ms (fast loads skip skeleton entirely)
- Use
animate-pulse(1.5s cycle) - Match skeleton shapes to real content dimensions
- Never use spinners inside cards
State 2: Empty (Zero Data)
<EmptyState
icon={PackageIcon}
title="No activity yet"
description="Create your first project to get started."
action={<Button>Create Project</Button>}
/>
Rules:
- Center-aligned in the card
- Icon: 32px,
text-text-tertiary - Title: 14px,
text-text-secondary - Always suggest a next action
- Zero values show as "0" (don't hide or dash)
State 3: Error (Load Failed)
<div className="flex flex-col items-center justify-center py-8 text-center">
<AlertCircle className="size-8 text-destructive mb-3" />
<p className="text-[14px] text-text-secondary mb-4">Couldn't load the data</p>
<Button variant="brandGhost" size="sm" onClick={retry}>Try again</Button>
</div>
Rules:
- Partial failure: only affected card shows error, rest loads normally
- Full page failure: full-screen EmptyState with retry
- Error message: plain language, blame the system
- Always provide retry button
State 4: Success (Action Feedback)
// Toast notification for action confirmations
toast("Changes saved")
// With undo for destructive actions
toast("Item deleted", { action: { label: "Undo", onClick: handleUndo } })
Rules:
- Info toast: 3s display
- Action toast (with undo): 5s display
- Toast position: above BottomNav
- One toast at a time (new replaces old)
- Implementation pattern:
function DataCard({ data, isLoading, error }) {
if (isLoading) return <DataCardSkeleton />
if (error) return <DataCardError onRetry={refetch} />
if (!data || data.length === 0) return <DataCardEmpty />
return <DataCardContent data={data} />
}
- Check
prefers-reduced-motion— disableanimate-pulsewhen reduced motion is preferred.
FAQ
What does the ss-feedback skill do?
Add appropriate user feedback states (loading, success, error, empty) to a component or page
How do I install ss-feedback?
Run npx skills add https://github.com/bitjaru/styleseed --skill ss-feedback in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ss-feedback/ (personal) or .claude/skills/ss-feedback/ (project).
Which AI agents can use ss-feedback?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is ss-feedback safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains ss-feedback?
It is published by bitjaru in bitjaru/styleseed. It has 852 recorded installs.
More from bitjaru/styleseed
ss-audit
bitjaru/styleseed
Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices
ss-review
bitjaru/styleseed
Review UI code for design system compliance, accessibility, and best practices
ss-setup
bitjaru/styleseed
Configure StyleSeed by selecting the output grammar, domain, page type, brand recipe, semantic palette recipe, optional aesthetic profile, and bounded brand tokens before scaffolding a first screen.
ss-a11y
bitjaru/styleseed
Audit a component or page for accessibility issues and fix them
ss-lint
bitjaru/styleseed
Quick automated lint — detects common design system violations in seconds
ss-update
bitjaru/styleseed
Check and update an existing StyleSeed installation by exact rule/skill revision, preserve project-owned design decisions, then recompile and verify the effective bundle.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.