Menu
Add appropriate user feedback states (loading, success, error, empty) to a component or page
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
The VISUAL gate — render the UI, screenshot it, and score what you actually SEE, not what the code says. Catches the tells that only show up in pixels (dead whitespace, cramping, a hero that doesn't dominate, fonts that didn't load, real rendered color, the squint "does this look AI-made" test) — the things /ss-score can't read from source. Renders empty/loading/error states too, then fixes and re-renders until it passes. Use as the final gate on any screen you can render.
Turn ONE design axis up or down as a coordinated, deterministic transform — "denser", "sharper corners", "more muted", "bolder", "flatter", "livelier". Not a vibe the model reinterprets each time; a defined ramp that moves many tokens together, respects the guardrails (8px grid, a11y floors, single accent, nested-radius), updates the lock, and re-runs the gate. Use this when a human saying "more X" would otherwise get an inconsistent one-off.
Apply a named StyleSeed motion to a component — either one of the 5 personality seeds (Spring/Silk/Snap/Float/Pulse × entrance/exit/hover/press/layout) or a distinctive keyword move from the motion library (toggle-flip, toggle-curtain, reveal-blur, pop-in, shimmer, …). Translates vibe words into framer-motion code from one source of truth.
Score a UI file's design quality 0-100 against StyleSeed's design language — per-category breakdown, the worst offenders, and a prioritized fix list. A quantified version of /ss-review.
Re-style a project to a named aesthetic — swiss, editorial, technical, warm-dtc, minimal-mono, brutalist-lite. A preset is a *coordinate* across the dial axes (radius + density + color + weight + motion) plus a font, accent family, and one signature move — applied coherently as a single identity, written to the lock, and re-gated. This is for mood words ("more editorial") that aren't one axis; for a single axis use /ss-dial.
Build a screen the way the StyleSeed reference demo was built — one command that ENFORCES the full loop (lock the look → build → score → fix to ≥80 → only then show). Use this instead of building UI free-hand; it closes the gap between "knows the rules" and "actually followed them."
| name | ss-feedback |
| description | Add appropriate user feedback states (loading, success, error, empty) to a component or page |
| argument-hint | [file-path] |
| allowed-tools | Read, Write, Edit, Grep, Glob |
/ss-copy/ss-a11y/ss-componentTarget: $ARGUMENTS
Read the target file and identify all data-dependent areas.
Read the design language reference:
DESIGN-LANGUAGE.md sections on Loading States (Skeleton), Empty States, Error StatesFor each data-dependent area, implement ALL 4 states:
// 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:
animate-pulse (1.5s cycle)<EmptyState
icon={PackageIcon}
title="No activity yet"
description="Create your first project to get started."
action={<Button>Create Project</Button>}
/>
Rules:
text-text-tertiarytext-text-secondary<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:
// Toast notification for action confirmations
toast("Changes saved")
// With undo for destructive actions
toast("Item deleted", { action: { label: "Undo", onClick: handleUndo } })
Rules:
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} />
}
prefers-reduced-motion — disable animate-pulse when reduced motion is preferred.