{"id":"ss-feedback","name":"ss-feedback","summary":"コンポーネントやページに適切なユーザーフィードバック状態(読み込み、成功、エラー、空)を追加してください","body":"# UX Feedback States Generator\n## Registry-first artifact boundary\n\nWhen `.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.\n\n## When NOT to use\n\n- For only the words inside a state → use `/ss-copy`\n- For accessibility issues in existing states → use `/ss-a11y`\n- For brand-new component creation → use `/ss-component`\n- For analytics or error-logging plumbing — UI presentation only\n\nTarget: **$ARGUMENTS**\n\n## Instructions\n\n1. Read the target file and identify all data-dependent areas.\n\n2. Read the design language reference:\n   - `DESIGN-LANGUAGE.md` sections on Loading States (Skeleton), Empty States, Error States\n\n3. For each data-dependent area, implement ALL 4 states:\n\n### State 1: Loading (Skeleton)\n```tsx\n// Skeleton must match the final layout shape\n<div className=\"bg-card rounded-2xl p-6 shadow-[var(--shadow-card)]\">\n  <div className=\"flex items-center gap-2 mb-3\">\n    <div className=\"size-7 bg-surface-muted rounded-lg animate-pulse\" />\n    <div className=\"h-3 w-16 bg-surface-muted rounded animate-pulse\" />\n  </div>\n  <div className=\"h-9 w-24 bg-surface-muted rounded-lg animate-pulse mb-3\" />\n  <div className=\"h-3 w-12 bg-surface-muted rounded animate-pulse\" />\n</div>\n```\nRules:\n- Show skeleton for 300ms minimum (prevent flash)\n- Delay skeleton display by 300ms (fast loads skip skeleton entirely)\n- Use `animate-pulse` (1.5s cycle)\n- Match skeleton shapes to real content dimensions\n- Never use spinners inside cards\n\n### State 2: Empty (Zero Data)\n```tsx\n<EmptyState\n  icon={PackageIcon}\n  title=\"No activity yet\"\n  description=\"Create your first project to get started.\"\n  action={<Button>Create Project</Button>}\n/>\n```\nRules:\n- Center-aligned in the card\n- Icon: 32px, `text-text-tertiary`\n- Title: 14px, `text-text-secondary`\n- Always suggest a next action\n- Zero values show as \"0\" (don't hide or dash)\n\n### State 3: Error (Load Failed)\n```tsx\n<div className=\"flex flex-col items-center justify-center py-8 text-center\">\n  <AlertCircle className=\"size-8 text-destructive mb-3\" />\n  <p className=\"text-[14px] text-text-secondary mb-4\">Couldn't load the data</p>\n  <Button variant=\"brandGhost\" size=\"sm\" onClick={retry}>Try again</Button>\n</div>\n```\nRules:\n- Partial failure: only affected card shows error, rest loads normally\n- Full page failure: full-screen EmptyState with retry\n- Error message: plain language, blame the system\n- Always provide retry button\n\n### State 4: Success (Action Feedback)\n```tsx\n// Toast notification for action confirmations\ntoast(\"Changes saved\")\n\n// With undo for destructive actions\ntoast(\"Item deleted\", { action: { label: \"Undo\", onClick: handleUndo } })\n```\nRules:\n- Info toast: 3s display\n- Action toast (with undo): 5s display\n- Toast position: above BottomNav\n- One toast at a time (new replaces old)\n\n4. Implementation pattern:\n```tsx\nfunction DataCard({ data, isLoading, error }) {\n  if (isLoading) return <DataCardSkeleton />\n  if (error) return <DataCardError onRetry={refetch} />\n  if (!data || data.length === 0) return <DataCardEmpty />\n  return <DataCardContent data={data} />\n}\n```\n\n5. Check `prefers-reduced-motion` — disable `animate-pulse` when reduced motion is preferred.","author":"@bitjaru","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-feedback","license":"MIT","category":"writing","lang":"en","tokens":900,"stars":0,"calls30d":1,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[],"requires":{"mcp":[],"tools":["Read","Write","Edit","Grep","Glob"]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":false,"networkEndpoints":[]}}