[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6PZY13WMKDS9CDXSCMEHDGJ":3,"skill-same:01M6PZY13WMKDS9CDXSCMEHDGJ":71},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":26,"commitSha":52,"skillDirectory":53,"forksCount":13,"repositoryHtmlUrl":54,"repositoryHomepageUrl":6,"ownerHtmlUrl":55,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":56,"install":57,"resources":70},"01M6PZY13WMKDS9CDXSCMEHDGJ","ux-feedback",null,"Add appropriate user feedback states (loading, success, error, empty) to a component or page","duc-duy-1612\u002FOnline-Delivery-Systems-Web","duc-duy-1612","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F192231384?v=4","01M6NSDKQQDKVTHZ8DZMZ1VYY6","01M6NSDKW8DDVTQHBT1HBDDJPT",0,"MIT","https:\u002F\u002Fgithub.com\u002Fduc-duy-1612\u002FOnline-Delivery-Systems-Web\u002Fblob\u002Fmain\u002F.agents\u002Fskills_archive\u002Fux-feedback\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"ux","ux feedback","feedback","main","blob","tree","ss","loading","states","error","critical","wed","github","community","styleseed","page","engine","https","license","component","2026-11-10 10:12:30",false,"---\nname: ux-feedback\ndescription: Add appropriate user feedback states (loading, success, error, empty) to a component or page\nrisk: critical\nsource: https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed\u002Ftree\u002Fmain\u002Fengine\u002F.claude\u002Fskills\u002Fss-feedback\nsource_repo: bitjaru\u002Fstyleseed\nsource_type: community\ndate_added: 2026-07-01\nlicense: MIT\nlicense_source: https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed\u002Fblob\u002Fmain\u002FLICENSE\n---\n\n# UX Feedback States Generator\n## When to Use\n\nUse this skill when you need add appropriate user feedback states (loading, success, error, empty) to a component or page.\n\n\n## When NOT to use\n\n- For only the words inside a state → use `\u002Fss-copy`\n- For accessibility issues in existing states → use `\u002Fss-a11y`\n- For brand-new component creation → use `\u002Fss-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\u002F\u002F Skeleton must match the final layout shape\n\u003Cdiv className=\"bg-card rounded-2xl p-6 shadow-[var(--shadow-card)]\">\n  \u003Cdiv className=\"flex items-center gap-2 mb-3\">\n    \u003Cdiv className=\"size-7 bg-surface-muted rounded-lg animate-pulse\" \u002F>\n    \u003Cdiv className=\"h-3 w-16 bg-surface-muted rounded animate-pulse\" \u002F>\n  \u003C\u002Fdiv>\n  \u003Cdiv className=\"h-9 w-24 bg-surface-muted rounded-lg animate-pulse mb-3\" \u002F>\n  \u003Cdiv className=\"h-3 w-12 bg-surface-muted rounded animate-pulse\" \u002F>\n\u003C\u002Fdiv>\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\u003CEmptyState\n  icon={PackageIcon}\n  title=\"No activity yet\"\n  description=\"Create your first project to get started.\"\n  action={\u003CButton>Create Project\u003C\u002FButton>}\n\u002F>\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\u003Cdiv className=\"flex flex-col items-center justify-center py-8 text-center\">\n  \u003CAlertCircle className=\"size-8 text-destructive mb-3\" \u002F>\n  \u003Cp className=\"text-[14px] text-text-secondary mb-4\">Couldn't load the data\u003C\u002Fp>\n  \u003CButton variant=\"brandGhost\" size=\"sm\" onClick={retry}>Try again\u003C\u002FButton>\n\u003C\u002Fdiv>\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\u002F\u002F Toast notification for action confirmations\ntoast(\"Changes saved\")\n\n\u002F\u002F 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 \u003CDataCardSkeleton \u002F>\n  if (error) return \u003CDataCardError onRetry={refetch} \u002F>\n  if (!data || data.length === 0) return \u003CDataCardEmpty \u002F>\n  return \u003CDataCardContent data={data} \u002F>\n}\n```\n\n5. Check `prefers-reduced-motion` — disable `animate-pulse` when reduced motion is preferred.\n\n## Limitations\n\n- Use this skill only when the task clearly matches its upstream source and local project context.\n- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.\n- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.\n","# UX Feedback States Generator\n## When to Use\n\nUse this skill when you need add appropriate user feedback states (loading, success, error, empty) to a component or page.\n\n\n## When NOT to use\n\n- For only the words inside a state → use `\u002Fss-copy`\n- For accessibility issues in existing states → use `\u002Fss-a11y`\n- For brand-new component creation → use `\u002Fss-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\u002F\u002F Skeleton must match the final layout shape\n\u003Cdiv className=\"bg-card rounded-2xl p-6 shadow-[var(--shadow-card)]\">\n  \u003Cdiv className=\"flex items-center gap-2 mb-3\">\n    \u003Cdiv className=\"size-7 bg-surface-muted rounded-lg animate-pulse\" \u002F>\n    \u003Cdiv className=\"h-3 w-16 bg-surface-muted rounded animate-pulse\" \u002F>\n  \u003C\u002Fdiv>\n  \u003Cdiv className=\"h-9 w-24 bg-surface-muted rounded-lg animate-pulse mb-3\" \u002F>\n  \u003Cdiv className=\"h-3 w-12 bg-surface-muted rounded animate-pulse\" \u002F>\n\u003C\u002Fdiv>\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\u003CEmptyState\n  icon={PackageIcon}\n  title=\"No activity yet\"\n  description=\"Create your first project to get started.\"\n  action={\u003CButton>Create Project\u003C\u002FButton>}\n\u002F>\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\u003Cdiv className=\"flex flex-col items-center justify-center py-8 text-center\">\n  \u003CAlertCircle className=\"size-8 text-destructive mb-3\" \u002F>\n  \u003Cp className=\"text-[14px] text-text-secondary mb-4\">Couldn't load the data\u003C\u002Fp>\n  \u003CButton variant=\"brandGhost\" size=\"sm\" onClick={retry}>Try again\u003C\u002FButton>\n\u003C\u002Fdiv>\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\u002F\u002F Toast notification for action confirmations\ntoast(\"Changes saved\")\n\n\u002F\u002F 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 \u003CDataCardSkeleton \u002F>\n  if (error) return \u003CDataCardError onRetry={refetch} \u002F>\n  if (!data || data.length === 0) return \u003CDataCardEmpty \u002F>\n  return \u003CDataCardContent data={data} \u002F>\n}\n```\n\n5. Check `prefers-reduced-motion` — disable `animate-pulse` when reduced motion is preferred.\n\n## Limitations\n\n- Use this skill only when the task clearly matches its upstream source and local project context.\n- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.\n- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.\n",{"name":5,"risk":33,"source":48,"license":14,"date_added":49,"description":7,"source_repo":50,"source_type":36,"license_source":51},"https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed\u002Ftree\u002Fmain\u002Fengine\u002F.claude\u002Fskills\u002Fss-feedback",1782864000000,"bitjaru\u002Fstyleseed","https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed\u002Fblob\u002Fmain\u002FLICENSE","f3312ba749561b6159f477dbfc9313c875d40a56",".agents\u002Fskills_archive\u002Fux-feedback","https:\u002F\u002Fgithub.com\u002Fduc-duy-1612\u002FOnline-Delivery-Systems-Web","https:\u002F\u002Fgithub.com\u002Fduc-duy-1612","2026-10-25 23:50:58",{"source":8,"skillName":5,"commands":58,"prompt":68,"zipAvailable":69},[59,62,65],{"tool":60,"command":61},"npx","npx skills add duc-duy-1612\u002FOnline-Delivery-Systems-Web --skill ux-feedback",{"tool":63,"command":64},"bunx","bunx skills add duc-duy-1612\u002FOnline-Delivery-Systems-Web --skill ux-feedback",{"tool":66,"command":67},"pnpm","pnpm dlx skills add duc-duy-1612\u002FOnline-Delivery-Systems-Web --skill ux-feedback","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fduc-duy-1612\u002FOnline-Delivery-Systems-Web\u002Fblob\u002Fmain\u002F.agents\u002Fskills_archive\u002Fux-feedback\u002FSKILL.md",true,[],[72,100,124,145,171,195],{"skillNo":73,"name":74,"nameZh":6,"description":75,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":76,"categories":77,"keywords":83,"publishedAt":43},"01M6Q0FA5FZ410Z33Z3TFQ4DBA","zero-trust","Implement zero-trust network architecture. Configure identity-based access, micro-segmentation, and continuous verification. Use when implementing modern security architectures.","https:\u002F\u002Fgithub.com\u002Fduc-duy-1612\u002FOnline-Delivery-Systems-Web\u002Fblob\u002Fmain\u002F.agents\u002Fskills_archive\u002Fzero-trust\u002FSKILL.md",[78],{"categoryNo":79,"categoryName":80,"taxonomyType":81,"taxonomyTypeDesc":82},"01JBSEEDCAT000000000000011","运维与部署","SCENARIO","使用场景",[84,85,86,87,88,89,74,90,91,92,93,94,36,26,95,33,96,97,98,99],"ZeRO","trust","zero trust","architecture","assessment","verification","segmentation","devops-security","access","configure","only","active","scope","scripts","relevant","implementing",{"skillNo":101,"name":102,"nameZh":6,"description":103,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":104,"categories":105,"keywords":106,"publishedAt":43},"01M6Q0F1YZJW3KX5FBKEVZ8CV4","zcode-delegate","Delegate coding tasks to the Z.AI ZCode CLI only when the user explicitly requests it, while the orchestrator retains review and landing responsibility.","https:\u002F\u002Fgithub.com\u002Fduc-duy-1612\u002FOnline-Delivery-Systems-Web\u002Fblob\u002Fmain\u002F.agents\u002Fskills_archive\u002Fzcode-delegate\u002FSKILL.md",[],[107,108,109,110,111,112,113,114,115,116,117,118,119,94,120,36,121,122,33,123],"delegate","zcode","zcode delegate","review","cli","orchestration","tasks","run","Bash","model","node","read","orchestrator","files","desktop app","app","agent-orchestration",{"skillNo":125,"name":126,"nameZh":6,"description":127,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":128,"categories":129,"keywords":130,"publishedAt":43},"01M6Q0ETK41VGNMYEXW0T00AJN","youtube-transcript","Fetch YouTube transcripts through DeepAPI or local fallback tooling and save clean text output.","https:\u002F\u002Fgithub.com\u002Fduc-duy-1612\u002FOnline-Delivery-Systems-Web\u002Fblob\u002Fmain\u002F.agents\u002Fskills_archive\u002Fyoutube-transcript\u002FSKILL.md",[],[131,132,133,134,35,135,136,41,40,137,138,139,140,36,26,141,142,143,144,27],"transcript","youtube transcript","youtube","safe","codex","research","text","fetch","tooling","clean","local","output","deepapi","youtube transcripts",{"skillNo":146,"name":147,"nameZh":6,"description":148,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":149,"categories":150,"keywords":160,"publishedAt":43},"01M6Q0EPPH2PVMDW40017F8WX0","youtube-transcript-skills","Fetch YouTube video transcripts, search videos\u002Fchannels, browse channels, and extract playlists via the getyoutubetranscript.com API - free tier, no card required.","https:\u002F\u002Fgithub.com\u002Fduc-duy-1612\u002FOnline-Delivery-Systems-Web\u002Fblob\u002Fmain\u002F.agents\u002Fskills_archive\u002Fyoutube-transcript-skills\u002FSKILL.md",[151,154,157],{"categoryNo":152,"categoryName":153,"taxonomyType":81,"taxonomyTypeDesc":82},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":155,"categoryName":156,"taxonomyType":81,"taxonomyTypeDesc":82},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":158,"categoryName":159,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000030","开发工程师",[131,132,133,161,134,162,35,135,41,163,164,165,166,138,167,36,26,168,169,170],"youtube transcript skills","gemini","search","api","Video","browse","api-integration","free","card","channels",{"skillNo":172,"name":173,"nameZh":6,"description":174,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":175,"categories":176,"keywords":181,"publishedAt":43},"01M6Q0EAB96PX83W5PTE8A0R8D","youtube-notetaker","Turn YouTube talks into local study notes with slides, transcripts, editable annotations, and a markdown-backed viewer.","https:\u002F\u002Fgithub.com\u002Fduc-duy-1612\u002FOnline-Delivery-Systems-Web\u002Fblob\u002Fmain\u002F.agents\u002Fskills_archive\u002Fyoutube-notetaker\u002FSKILL.md",[177,180],{"categoryNo":178,"categoryName":179,"taxonomyType":81,"taxonomyTypeDesc":82},"01JBSEEDCAT000000000000003","演示文稿",{"categoryNo":155,"categoryName":156,"taxonomyType":81,"taxonomyTypeDesc":82},[133,182,183,111,134,184,185,186,187,41,165,188,189,190,191,26,192,141,193,194],"youtube notetaker","notetaker","workflow","official","notes","code","markdown","slides","annotations","README","study","dair-academy","viewer",{"skillNo":196,"name":197,"nameZh":6,"description":198,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":199,"categories":200,"keywords":202,"publishedAt":43},"01M6Q0E55F0GW5MX48V8HXS8B5","youtube-full","Fetch YouTube transcripts, search videos, browse channels, and extract playlists via TranscriptAPI — no yt-dlp, no Google API key, works from any cloud server.","https:\u002F\u002Fgithub.com\u002Fduc-duy-1612\u002FOnline-Delivery-Systems-Web\u002Fblob\u002Fmain\u002F.agents\u002Fskills_archive\u002Fyoutube-full\u002FSKILL.md",[201],{"categoryNo":152,"categoryName":153,"taxonomyType":81,"taxonomyTypeDesc":82},[203,133,204,205,134,162,163,206,207,164,165,166,138,208,167,36,26,168,209,144],"youtube full","full","google","server","dlp","credits","automatic"]