Ss Feedback Agent Skill

by bitjaru

Add appropriate user feedback states (loading, success, error, empty) to a component or page

820 tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

866

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/bitjaru/styleseed --skill ss-feedback

The instruction itself

7 sections, as written by the author

UX Feedback States Generator

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.md sections 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 — disable animate-pulse when reduced motion is preferred.

Other skills for the same job

different authors, same section of the catalogue

Theme Factory

by anthropics

vendor ×16

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

11k tokens scripts

Web Artifacts Builder

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

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.

Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.

3k tokens

How to use it

Copy the folder

Take bitjaru/ss-feedback from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.