[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M719PAY1S0SJS0M41R58D690":3,"skill-same:01M719PAY1S0SJS0M41R58D690":76},{"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":27,"publishedAt":48,"linkOnly":49,"markdownContent":50,"markdownBody":51,"frontMatter":52,"refName":54,"commitSha":55,"skillDirectory":56,"forksCount":57,"repositoryHtmlUrl":58,"repositoryHomepageUrl":59,"ownerHtmlUrl":60,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":61,"install":62,"resources":75},"01M719PAY1S0SJS0M41R58D690","react-ui-patterns",null,"Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.","dahaliztupe-sketch\u002FKalmeron-Two","dahaliztupe-sketch","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F271085317?v=4","01M719765Q83P08JCQ1SWNQR0N","01M719766HQBGF44W90MPJKTD2",1,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Freact-ui-patterns\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47],"ui patterns","ui","patterns","react ui","react ui patterns","react","use","async","ui components","for","data","2026","data fetching","components","unknown","when","loading","states","community","error","2026-11-10 10:12:30",false,"---\nname: react-ui-patterns\ndescription: \"Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.\"\nrisk: unknown\nsource: community\ndate_added: \"2026-02-27\"\n---\n\n# React UI Patterns\n\n## Core Principles\n\n1. **Never show stale UI** - Loading spinners only when actually loading\n2. **Always surface errors** - Users must know when something fails\n3. **Optimistic updates** - Make the UI feel instant\n4. **Progressive disclosure** - Show content as it becomes available\n5. **Graceful degradation** - Partial data is better than no data\n\n## Loading State Patterns\n\n### The Golden Rule\n\n**Show loading indicator ONLY when there's no data to display.**\n\n```typescript\n\u002F\u002F CORRECT - Only show loading when no data exists\nconst { data, loading, error } = useGetItemsQuery();\n\nif (error) return \u003CErrorState error={error} onRetry={refetch} \u002F>;\nif (loading && !data) return \u003CLoadingState \u002F>;\nif (!data?.items.length) return \u003CEmptyState \u002F>;\n\nreturn \u003CItemList items={data.items} \u002F>;\n```\n\n```typescript\n\u002F\u002F WRONG - Shows spinner even when we have cached data\nif (loading) return \u003CLoadingState \u002F>; \u002F\u002F Flashes on refetch!\n```\n\n### Loading State Decision Tree\n\n```\nIs there an error?\n  → Yes: Show error state with retry option\n  → No: Continue\n\nIs it loading AND we have no data?\n  → Yes: Show loading indicator (spinner\u002Fskeleton)\n  → No: Continue\n\nDo we have data?\n  → Yes, with items: Show the data\n  → Yes, but empty: Show empty state\n  → No: Show loading (fallback)\n```\n\n### Skeleton vs Spinner\n\n| Use Skeleton When | Use Spinner When |\n|-------------------|------------------|\n| Known content shape | Unknown content shape |\n| List\u002Fcard layouts | Modal actions |\n| Initial page load | Button submissions |\n| Content placeholders | Inline operations |\n\n## Error Handling Patterns\n\n### The Error Handling Hierarchy\n\n```\n1. Inline error (field-level) → Form validation errors\n2. Toast notification → Recoverable errors, user can retry\n3. Error banner → Page-level errors, data still partially usable\n4. Full error screen → Unrecoverable, needs user action\n```\n\n### Always Show Errors\n\n**CRITICAL: Never swallow errors silently.**\n\n```typescript\n\u002F\u002F CORRECT - Error always surfaced to user\nconst [createItem, { loading }] = useCreateItemMutation({\n  onCompleted: () => {\n    toast.success({ title: 'Item created' });\n  },\n  onError: (error) => {\n    console.error('createItem failed:', error);\n    toast.error({ title: 'Failed to create item' });\n  },\n});\n\n\u002F\u002F WRONG - Error silently caught, user has no idea\nconst [createItem] = useCreateItemMutation({\n  onError: (error) => {\n    console.error(error); \u002F\u002F User sees nothing!\n  },\n});\n```\n\n### Error State Component Pattern\n\n```typescript\ninterface ErrorStateProps {\n  error: Error;\n  onRetry?: () => void;\n  title?: string;\n}\n\nconst ErrorState = ({ error, onRetry, title }: ErrorStateProps) => (\n  \u003Cdiv className=\"error-state\">\n    \u003CIcon name=\"exclamation-circle\" \u002F>\n    \u003Ch3>{title ?? 'Something went wrong'}\u003C\u002Fh3>\n    \u003Cp>{error.message}\u003C\u002Fp>\n    {onRetry && (\n      \u003CButton onClick={onRetry}>Try Again\u003C\u002FButton>\n    )}\n  \u003C\u002Fdiv>\n);\n```\n\n## Button State Patterns\n\n### Button Loading State\n\n```tsx\n\u003CButton\n  onClick={handleSubmit}\n  isLoading={isSubmitting}\n  disabled={!isValid || isSubmitting}\n>\n  Submit\n\u003C\u002FButton>\n```\n\n### Disable During Operations\n\n**CRITICAL: Always disable triggers during async operations.**\n\n```tsx\n\u002F\u002F CORRECT - Button disabled while loading\n\u003CButton\n  disabled={isSubmitting}\n  isLoading={isSubmitting}\n  onClick={handleSubmit}\n>\n  Submit\n\u003C\u002FButton>\n\n\u002F\u002F WRONG - User can tap multiple times\n\u003CButton onClick={handleSubmit}>\n  {isSubmitting ? 'Submitting...' : 'Submit'}\n\u003C\u002FButton>\n```\n\n## Empty States\n\n### Empty State Requirements\n\nEvery list\u002Fcollection MUST have an empty state:\n\n```tsx\n\u002F\u002F WRONG - No empty state\nreturn \u003CFlatList data={items} \u002F>;\n\n\u002F\u002F CORRECT - Explicit empty state\nreturn (\n  \u003CFlatList\n    data={items}\n    ListEmptyComponent={\u003CEmptyState \u002F>}\n  \u002F>\n);\n```\n\n### Contextual Empty States\n\n```tsx\n\u002F\u002F Search with no results\n\u003CEmptyState\n  icon=\"search\"\n  title=\"No results found\"\n  description=\"Try different search terms\"\n\u002F>\n\n\u002F\u002F List with no items yet\n\u003CEmptyState\n  icon=\"plus-circle\"\n  title=\"No items yet\"\n  description=\"Create your first item\"\n  action={{ label: 'Create Item', onClick: handleCreate }}\n\u002F>\n```\n\n## Form Submission Pattern\n\n```tsx\nconst MyForm = () => {\n  const [submit, { loading }] = useSubmitMutation({\n    onCompleted: handleSuccess,\n    onError: handleError,\n  });\n\n  const handleSubmit = async () => {\n    if (!isValid) {\n      toast.error({ title: 'Please fix errors' });\n      return;\n    }\n    await submit({ variables: { input: values } });\n  };\n\n  return (\n    \u003Cform>\n      \u003CInput\n        value={values.name}\n        onChange={handleChange('name')}\n        error={touched.name ? errors.name : undefined}\n      \u002F>\n      \u003CButton\n        type=\"submit\"\n        onClick={handleSubmit}\n        disabled={!isValid || loading}\n        isLoading={loading}\n      >\n        Submit\n      \u003C\u002FButton>\n    \u003C\u002Fform>\n  );\n};\n```\n\n## Anti-Patterns\n\n### Loading States\n\n```typescript\n\u002F\u002F WRONG - Spinner when data exists (causes flash)\nif (loading) return \u003CSpinner \u002F>;\n\n\u002F\u002F CORRECT - Only show loading without data\nif (loading && !data) return \u003CSpinner \u002F>;\n```\n\n### Error Handling\n\n```typescript\n\u002F\u002F WRONG - Error swallowed\ntry {\n  await mutation();\n} catch (e) {\n  console.log(e); \u002F\u002F User has no idea!\n}\n\n\u002F\u002F CORRECT - Error surfaced\nonError: (error) => {\n  console.error('operation failed:', error);\n  toast.error({ title: 'Operation failed' });\n}\n```\n\n### Button States\n\n```typescript\n\u002F\u002F WRONG - Button not disabled during submission\n\u003CButton onClick={submit}>Submit\u003C\u002FButton>\n\n\u002F\u002F CORRECT - Disabled and shows loading\n\u003CButton onClick={submit} disabled={loading} isLoading={loading}>\n  Submit\n\u003C\u002FButton>\n```\n\n## Checklist\n\nBefore completing any UI component:\n\n**UI States:**\n- [ ] Error state handled and shown to user\n- [ ] Loading state shown only when no data exists\n- [ ] Empty state provided for collections\n- [ ] Buttons disabled during async operations\n- [ ] Buttons show loading indicator when appropriate\n\n**Data & Mutations:**\n- [ ] Mutations have onError handler\n- [ ] All user actions have feedback (toast\u002Fvisual)\n\n## Integration with Other Skills\n\n- **graphql-schema**: Use mutation patterns with proper error handling\n- **testing-patterns**: Test all UI states (loading, error, empty, success)\n- **formik-patterns**: Apply form submission patterns\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","# React UI Patterns\n\n## Core Principles\n\n1. **Never show stale UI** - Loading spinners only when actually loading\n2. **Always surface errors** - Users must know when something fails\n3. **Optimistic updates** - Make the UI feel instant\n4. **Progressive disclosure** - Show content as it becomes available\n5. **Graceful degradation** - Partial data is better than no data\n\n## Loading State Patterns\n\n### The Golden Rule\n\n**Show loading indicator ONLY when there's no data to display.**\n\n```typescript\n\u002F\u002F CORRECT - Only show loading when no data exists\nconst { data, loading, error } = useGetItemsQuery();\n\nif (error) return \u003CErrorState error={error} onRetry={refetch} \u002F>;\nif (loading && !data) return \u003CLoadingState \u002F>;\nif (!data?.items.length) return \u003CEmptyState \u002F>;\n\nreturn \u003CItemList items={data.items} \u002F>;\n```\n\n```typescript\n\u002F\u002F WRONG - Shows spinner even when we have cached data\nif (loading) return \u003CLoadingState \u002F>; \u002F\u002F Flashes on refetch!\n```\n\n### Loading State Decision Tree\n\n```\nIs there an error?\n  → Yes: Show error state with retry option\n  → No: Continue\n\nIs it loading AND we have no data?\n  → Yes: Show loading indicator (spinner\u002Fskeleton)\n  → No: Continue\n\nDo we have data?\n  → Yes, with items: Show the data\n  → Yes, but empty: Show empty state\n  → No: Show loading (fallback)\n```\n\n### Skeleton vs Spinner\n\n| Use Skeleton When | Use Spinner When |\n|-------------------|------------------|\n| Known content shape | Unknown content shape |\n| List\u002Fcard layouts | Modal actions |\n| Initial page load | Button submissions |\n| Content placeholders | Inline operations |\n\n## Error Handling Patterns\n\n### The Error Handling Hierarchy\n\n```\n1. Inline error (field-level) → Form validation errors\n2. Toast notification → Recoverable errors, user can retry\n3. Error banner → Page-level errors, data still partially usable\n4. Full error screen → Unrecoverable, needs user action\n```\n\n### Always Show Errors\n\n**CRITICAL: Never swallow errors silently.**\n\n```typescript\n\u002F\u002F CORRECT - Error always surfaced to user\nconst [createItem, { loading }] = useCreateItemMutation({\n  onCompleted: () => {\n    toast.success({ title: 'Item created' });\n  },\n  onError: (error) => {\n    console.error('createItem failed:', error);\n    toast.error({ title: 'Failed to create item' });\n  },\n});\n\n\u002F\u002F WRONG - Error silently caught, user has no idea\nconst [createItem] = useCreateItemMutation({\n  onError: (error) => {\n    console.error(error); \u002F\u002F User sees nothing!\n  },\n});\n```\n\n### Error State Component Pattern\n\n```typescript\ninterface ErrorStateProps {\n  error: Error;\n  onRetry?: () => void;\n  title?: string;\n}\n\nconst ErrorState = ({ error, onRetry, title }: ErrorStateProps) => (\n  \u003Cdiv className=\"error-state\">\n    \u003CIcon name=\"exclamation-circle\" \u002F>\n    \u003Ch3>{title ?? 'Something went wrong'}\u003C\u002Fh3>\n    \u003Cp>{error.message}\u003C\u002Fp>\n    {onRetry && (\n      \u003CButton onClick={onRetry}>Try Again\u003C\u002FButton>\n    )}\n  \u003C\u002Fdiv>\n);\n```\n\n## Button State Patterns\n\n### Button Loading State\n\n```tsx\n\u003CButton\n  onClick={handleSubmit}\n  isLoading={isSubmitting}\n  disabled={!isValid || isSubmitting}\n>\n  Submit\n\u003C\u002FButton>\n```\n\n### Disable During Operations\n\n**CRITICAL: Always disable triggers during async operations.**\n\n```tsx\n\u002F\u002F CORRECT - Button disabled while loading\n\u003CButton\n  disabled={isSubmitting}\n  isLoading={isSubmitting}\n  onClick={handleSubmit}\n>\n  Submit\n\u003C\u002FButton>\n\n\u002F\u002F WRONG - User can tap multiple times\n\u003CButton onClick={handleSubmit}>\n  {isSubmitting ? 'Submitting...' : 'Submit'}\n\u003C\u002FButton>\n```\n\n## Empty States\n\n### Empty State Requirements\n\nEvery list\u002Fcollection MUST have an empty state:\n\n```tsx\n\u002F\u002F WRONG - No empty state\nreturn \u003CFlatList data={items} \u002F>;\n\n\u002F\u002F CORRECT - Explicit empty state\nreturn (\n  \u003CFlatList\n    data={items}\n    ListEmptyComponent={\u003CEmptyState \u002F>}\n  \u002F>\n);\n```\n\n### Contextual Empty States\n\n```tsx\n\u002F\u002F Search with no results\n\u003CEmptyState\n  icon=\"search\"\n  title=\"No results found\"\n  description=\"Try different search terms\"\n\u002F>\n\n\u002F\u002F List with no items yet\n\u003CEmptyState\n  icon=\"plus-circle\"\n  title=\"No items yet\"\n  description=\"Create your first item\"\n  action={{ label: 'Create Item', onClick: handleCreate }}\n\u002F>\n```\n\n## Form Submission Pattern\n\n```tsx\nconst MyForm = () => {\n  const [submit, { loading }] = useSubmitMutation({\n    onCompleted: handleSuccess,\n    onError: handleError,\n  });\n\n  const handleSubmit = async () => {\n    if (!isValid) {\n      toast.error({ title: 'Please fix errors' });\n      return;\n    }\n    await submit({ variables: { input: values } });\n  };\n\n  return (\n    \u003Cform>\n      \u003CInput\n        value={values.name}\n        onChange={handleChange('name')}\n        error={touched.name ? errors.name : undefined}\n      \u002F>\n      \u003CButton\n        type=\"submit\"\n        onClick={handleSubmit}\n        disabled={!isValid || loading}\n        isLoading={loading}\n      >\n        Submit\n      \u003C\u002FButton>\n    \u003C\u002Fform>\n  );\n};\n```\n\n## Anti-Patterns\n\n### Loading States\n\n```typescript\n\u002F\u002F WRONG - Spinner when data exists (causes flash)\nif (loading) return \u003CSpinner \u002F>;\n\n\u002F\u002F CORRECT - Only show loading without data\nif (loading && !data) return \u003CSpinner \u002F>;\n```\n\n### Error Handling\n\n```typescript\n\u002F\u002F WRONG - Error swallowed\ntry {\n  await mutation();\n} catch (e) {\n  console.log(e); \u002F\u002F User has no idea!\n}\n\n\u002F\u002F CORRECT - Error surfaced\nonError: (error) => {\n  console.error('operation failed:', error);\n  toast.error({ title: 'Operation failed' });\n}\n```\n\n### Button States\n\n```typescript\n\u002F\u002F WRONG - Button not disabled during submission\n\u003CButton onClick={submit}>Submit\u003C\u002FButton>\n\n\u002F\u002F CORRECT - Disabled and shows loading\n\u003CButton onClick={submit} disabled={loading} isLoading={loading}>\n  Submit\n\u003C\u002FButton>\n```\n\n## Checklist\n\nBefore completing any UI component:\n\n**UI States:**\n- [ ] Error state handled and shown to user\n- [ ] Loading state shown only when no data exists\n- [ ] Empty state provided for collections\n- [ ] Buttons disabled during async operations\n- [ ] Buttons show loading indicator when appropriate\n\n**Data & Mutations:**\n- [ ] Mutations have onError handler\n- [ ] All user actions have feedback (toast\u002Fvisual)\n\n## Integration with Other Skills\n\n- **graphql-schema**: Use mutation patterns with proper error handling\n- **testing-patterns**: Test all UI states (loading, error, empty, success)\n- **formik-patterns**: Apply form submission patterns\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n",{"name":5,"risk":42,"source":46,"date_added":53,"description":7},"2026-02-27","main","13d9afadbb6a87d6209fe4bd6ca2bbe4553119ac",".agents\u002Fskills\u002Freact-ui-patterns",0,"https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two","https:\u002F\u002Fkalmeron-two.vercel.app","https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch","2026-10-05 12:24:53",{"source":8,"skillName":5,"commands":63,"prompt":73,"zipAvailable":74},[64,67,70],{"tool":65,"command":66},"npx","npx skills add dahaliztupe-sketch\u002FKalmeron-Two --skill react-ui-patterns",{"tool":68,"command":69},"bunx","bunx skills add dahaliztupe-sketch\u002FKalmeron-Two --skill react-ui-patterns",{"tool":71,"command":72},"pnpm","pnpm dlx skills add dahaliztupe-sketch\u002FKalmeron-Two --skill react-ui-patterns","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Freact-ui-patterns\u002FSKILL.md",true,[],[77,92,114,132,159,186],{"skillNo":78,"name":79,"nameZh":6,"description":80,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":81,"sourceHtmlUrl":82,"categories":83,"keywords":87,"publishedAt":48},"01M719SWYD9RGS97HJ69PXWY62","add-new-agent","خطوات تفصيليّة لإضافة وكيل ذكاء اصطناعي جديد إلى منصّة Kalmeron من الفكرة إلى الإنتاج","https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002FSKILL.md",[84],{"categoryNo":85,"categoryName":86,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[88,89,90,91],"add","add new agent","new","new agent",{"skillNo":93,"name":94,"nameZh":6,"description":95,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":96,"categories":97,"keywords":107,"publishedAt":48},"01M719SSKNBA7T5NS7V6DP0PX4","writing-skills","Use when creating new skills, editing existing skills, or verifying skills work before deployment","https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fwriting-skills\u002FSKILL.md",[98,101,104],{"categoryNo":99,"categoryName":100,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":102,"categoryName":103,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":105,"categoryName":106,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000036","内容创作者",[108,109,90,43,110,111,112,34,113],"writing skills","writing","work","editing","deployment","Existing",{"skillNo":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":122,"publishedAt":48},"01M719SRFDNKA3044QD3FYZ05R","writing-plans","Use when you have a spec or requirements for a multi-step task, before touching code","https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fwriting-plans\u002FSKILL.md",[120,121],{"categoryNo":102,"categoryName":103,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":105,"categoryName":106,"taxonomyType":25,"taxonomyTypeDesc":26},[123,109,124,125,126,127,43,34,37,128,129,130,131],"writing plans","plans","code","requirements","you","task","multi","spec","multi-step task",{"skillNo":133,"name":134,"nameZh":6,"description":135,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":136,"categories":137,"keywords":142,"publishedAt":48},"01M719SPN5FM1JYJSR9DGJQPZ0","web-design-guidelines","Review UI code for Web Interface Guidelines compliance. Use when asked to \"review my UI\", \"check accessibility\", \"audit design\", \"review UX\", or \"check my site against best practices\".","https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fweb-design-guidelines\u002FSKILL.md",[138,141],{"categoryNo":139,"categoryName":140,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},[143,144,145,146,147,148,149,150,151,152,153,125,37,154,155,156,34,43,157,158],"web design","web design guidelines","web","design","guidelines","review","accessibility","ux","audit","compliance","check","vercel","interface","web interface guidelines","best practices","file",{"skillNo":160,"name":161,"nameZh":6,"description":162,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":163,"licenseFileUrl":6,"sourceHtmlUrl":164,"categories":165,"keywords":168,"publishedAt":48},"01M719SK11T05QYVPTWWYMYY5B","vitest","Set up Vitest testing in any project — detects project type (Cloudflare Workers, React, Node), generates vitest.config.ts, test setup, utilities, and sample tests. Also covers mocking patterns, coverage config, workspace setup, and Jest migration. Trigger with 'set up vitest', 'add tests', 'configure vitest', 'migrate from jest', 'vitest config', 'add unit tests', or 'testing setup'.","MIT","https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fvitest\u002FSKILL.md",[166,167],{"categoryNo":99,"categoryName":100,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[161,169,170,171,172,173,33,174,175,176,177,178,179,180,181,182,183,184,185,30],"cloudflare","cloudflare workers","config","node","sample","jest","migrate","configure","Utilities","up","testing","workspace setup","project","unit","SET","coverage","test setup",{"skillNo":187,"name":188,"nameZh":6,"description":189,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":190,"categories":191,"keywords":192,"publishedAt":48},"01M719SGV9R1N88QWAB7Y925HD","verification-loops","Use when about to claim work is complete, fixed, or passing, before committing or creating PRs. Requires running verification commands and confirming output before making any success claims. Evidence before assertions always.","https:\u002F\u002Fgithub.com\u002Fdahaliztupe-sketch\u002FKalmeron-Two\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fverification-loops\u002FSKILL.md",[],[193,194,195,196,34,197,198,199,200,201,202,203,110,204,205,43],"loops","verification","verification loops","claim","assertions","prs","complete","evidence","running","commands","about","claims","output"]