[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M70FQCKS661FZ7TX3SP7PAQ4":3,"skill-same:01M70FQCKS661FZ7TX3SP7PAQ4":61},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":28,"publishedAt":32,"linkOnly":33,"markdownContent":34,"markdownBody":35,"frontMatter":36,"refName":37,"commitSha":38,"skillDirectory":39,"forksCount":40,"repositoryHtmlUrl":41,"repositoryHomepageUrl":42,"ownerHtmlUrl":43,"ownerBlogUrl":44,"ownerDescription":45,"updatedAt":46,"install":47,"resources":60},"01M70FQCKS661FZ7TX3SP7PAQ4","react",null,"Must always be enabled when writing\u002Freviewing React code.","shengdabai\u002FTony-Claude-Code-Skills","shengdabai","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F116417419?v=4","01M70F6D2WY5PQV5A92BKYJQEW","Tony Sheng","01M70F6D3GAAAYZ5H4CC1G8VXM",3,"MIT","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002F_collections\u002Fd-kimuson-dotfiles\u002Fclaude-code\u002Fskills\u002Freact\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[5,29,30,31],"writing","when","code","2026-11-10 10:12:30",false,"---\nname: react\ndescription: Must always be enabled when writing\u002Freviewing React code.\n---\n\n\u003Crole>\nYou are implementing React components following modern best practices. Your goal is to write clean, performant React code that avoids unnecessary Effects and follows established patterns.\n\u003C\u002Frole>\n\n\u003Ccore_principles>\n## Core Principles\n\n### 1. Minimize useEffect Usage\n**Think harder before adding useEffect.** Most scenarios have better alternatives:\n\n\u003Cwhen_not_to_use_effect>\n#### When NOT to Use useEffect\n\n**Data transformation for rendering**:\n- ❌ Don't: Use Effect to compute derived state\n- ✅ Do: Calculate during render at top level\n```tsx\n\u002F\u002F ❌ Bad: Cascading updates\nconst [filteredItems, setFilteredItems] = useState\u003CItem[]>([]);\nuseEffect(() => {\n  setFilteredItems(items.filter(item => item.active));\n}, [items]);\n\n\u002F\u002F ✅ Good: Direct computation\nconst filteredItems = items.filter(item => item.active);\n```\n\n**Handling user events**:\n- ❌ Don't: Use Effect to respond to user actions\n- ✅ Do: Handle logic in event handlers\n```tsx\n\u002F\u002F ❌ Bad: Lost interaction context\nuseEffect(() => {\n  if (buttonClicked) {\n    submitForm();\n  }\n}, [buttonClicked]);\n\n\u002F\u002F ✅ Good: Explicit intent\nconst handleSubmit = () => {\n  submitForm();\n};\n```\n\n**Caching expensive computations**:\n- ❌ Don't: Store computed results in state via Effects\n- ✅ Do: Use useMemo\n```tsx\n\u002F\u002F ❌ Bad: Manual memoization\nconst [expensiveResult, setExpensiveResult] = useState\u003CResult | null>(null);\nuseEffect(() => {\n  setExpensiveResult(computeExpensiveValue(data));\n}, [data]);\n\n\u002F\u002F ✅ Good: useMemo\nconst expensiveResult = useMemo(() => computeExpensiveValue(data), [data]);\n```\n\n**Resetting state on prop changes**:\n- ❌ Don't: Use Effect to reset state\n- ✅ Do: Use key prop to force remount\n```tsx\n\u002F\u002F ❌ Bad: Manual synchronization\nuseEffect(() => {\n  setLocalState(defaultValue);\n}, [userId]);\n\n\u002F\u002F ✅ Good: Key-based reset\n\u003CProfile key={userId} userId={userId} \u002F>\n```\n\u003C\u002Fwhen_not_to_use_effect>\n\n\u003Clegitimate_use_cases>\n#### Legitimate useEffect Use Cases\n\n**Only use Effects for**:\n1. Synchronizing with external systems (browser APIs, third-party widgets)\n2. Data fetching with proper cleanup (avoid race conditions)\n3. Subscriptions (prefer useSyncExternalStore when possible)\n\n**Pattern for data fetching** (if not using query client):\n```tsx\nuseEffect(() => {\n  let ignore = false;\n\n  async function fetchData() {\n    const result = await api.getData();\n    if (!ignore) {\n      setData(result);\n    }\n  }\n\n  fetchData();\n  return () => { ignore = true; }; \u002F\u002F Cleanup to prevent race conditions\n}, [dependency]);\n```\n\u003C\u002Flegitimate_use_cases>\n\u003C\u002Fcore_principles>\n\n\u003Ccomponent_definition>\n### 2. Component Definition Style\n\n**Always use FC type annotation**:\n\n```tsx\nimport { FC, PropsWithChildren } from 'react';\n\n\u002F\u002F For components without children\ntype ButtonProps {\n  label: string;\n  onClick: () => void;\n}\n\nconst Button: FC\u003CButtonProps> = ({ label, onClick }) => {\n  return \u003Cbutton onClick={onClick}>{label}\u003C\u002Fbutton>;\n};\n\n\u002F\u002F For components that accept children\ntype CardProps {\n  title: string;\n}\n\nconst Card: FC\u003CPropsWithChildren\u003CCardProps>> = ({ title, children }) => {\n  return (\n    \u003Cdiv>\n      \u003Ch2>{title}\u003C\u002Fh2>\n      \u003Cdiv>{children}\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  );\n};\n```\n\n**Never use function declaration syntax**:\n```tsx\n\u002F\u002F ❌ Bad: Avoid this style\nfunction MyComponent(props: Props) {\n  return \u003Cdiv \u002F>;\n}\n```\n\u003C\u002Fcomponent_definition>\n\n\u003Capi_requests>\n### 3. API Request Handling\n\n**Never use fetch directly in components.** Always use the project's query client.\n\n\u003Cdetection_workflow>\n#### Detection Workflow\n\n1. **Check project dependencies** in package.json:\n   - `@apollo\u002Fclient` → Use Apollo Client hooks\n   - `@tanstack\u002Freact-query` → Use Tanstack Query hooks\n   - `swr` → Use SWR hooks\n\n2. **Search for existing usage patterns**:\n   - Look for `useQuery`, `useMutation`, `useSWR`, `useApolloClient` in codebase\n   - Follow established patterns for consistency\n\n3. **Apply appropriate client**:\n\n\u003Capollo_client>\n**Apollo Client (GraphQL)**:\n```tsx\nimport { useQuery, useMutation, gql } from '@apollo\u002Fclient';\n\nconst GET_USER = gql`\n  query GetUser($id: ID!) {\n    user(id: $id) {\n      id\n      name\n      email\n    }\n  }\n`;\n\nconst UserProfile: FC\u003C{ userId: string }> = ({ userId }) => {\n  const { data, loading, error } = useQuery(GET_USER, {\n    variables: { id: userId },\n  });\n\n  if (loading) return \u003CSpinner \u002F>;\n  if (error) return \u003CErrorMessage error={error} \u002F>;\n\n  return \u003Cdiv>{data.user.name}\u003C\u002Fdiv>;\n};\n\n\u002F\u002F Mutations\nconst UPDATE_USER = gql`\n  mutation UpdateUser($id: ID!, $name: String!) {\n    updateUser(id: $id, name: $name) {\n      id\n      name\n    }\n  }\n`;\n\nconst EditForm: FC = () => {\n  const [updateUser, { loading }] = useMutation(UPDATE_USER);\n\n  const handleSubmit = async (values: FormValues) => {\n    await updateUser({ variables: { id: values.id, name: values.name } });\n  };\n\n  return \u003Cform onSubmit={handleSubmit}>...\u003C\u002Fform>;\n};\n```\n\u003C\u002Fapollo_client>\n\n\u003Ctanstack_query>\n**Tanstack Query (REST)**:\n```tsx\nimport { useQuery, useMutation, useQueryClient } from '@tanstack\u002Freact-query';\n\nconst UserProfile: FC\u003C{ userId: string }> = ({ userId }) => {\n  const { data, isLoading, error } = useQuery({\n    queryKey: ['user', userId],\n    queryFn: () => api.getUser(userId),\n  });\n\n  if (isLoading) return \u003CSpinner \u002F>;\n  if (error) return \u003CErrorMessage error={error} \u002F>;\n\n  return \u003Cdiv>{data.name}\u003C\u002Fdiv>;\n};\n\n\u002F\u002F Mutations with cache invalidation\nconst EditForm: FC = () => {\n  const queryClient = useQueryClient();\n\n  const mutation = useMutation({\n    mutationFn: (values: FormValues) => api.updateUser(values),\n    onSuccess: () => {\n      queryClient.invalidateQueries({ queryKey: ['user'] });\n    },\n  });\n\n  const handleSubmit = (values: FormValues) => {\n    mutation.mutate(values);\n  };\n\n  return \u003Cform onSubmit={handleSubmit}>...\u003C\u002Fform>;\n};\n```\n\u003C\u002Ftanstack_query>\n\n\u003Cswr>\n**SWR**:\n```tsx\nimport useSWR from 'swr';\nimport useSWRMutation from 'swr\u002Fmutation';\n\nconst UserProfile: FC\u003C{ userId: string }> = ({ userId }) => {\n  const { data, error, isLoading } = useSWR(\n    `\u002Fapi\u002Fusers\u002F${userId}`,\n    fetcher\n  );\n\n  if (isLoading) return \u003CSpinner \u002F>;\n  if (error) return \u003CErrorMessage error={error} \u002F>;\n\n  return \u003Cdiv>{data.name}\u003C\u002Fdiv>;\n};\n\n\u002F\u002F Mutations\nconst EditForm: FC = () => {\n  const { trigger, isMutating } = useSWRMutation(\n    '\u002Fapi\u002Fusers',\n    updateUser\n  );\n\n  const handleSubmit = async (values: FormValues) => {\n    await trigger(values);\n  };\n\n  return \u003Cform onSubmit={handleSubmit}>...\u003C\u002Fform>;\n};\n```\n\u003C\u002Fswr>\n\u003C\u002Fdetection_workflow>\n\n**Benefits of query clients**:\n- Automatic caching and deduplication\n- Loading\u002Ferror state management\n- Race condition handling\n- Cache invalidation and refetching\n- Optimistic updates support\n\u003C\u002Fapi_requests>\n\u003C\u002Fcore_principles>\n\n\u003Cworkflow>\n## Implementation Workflow\n\n1. **Before writing component**:\n   - Identify data dependencies and state requirements\n   - Think harder: Can state be derived instead of stored?\n   - Plan event handlers before considering Effects\n\n2. **During implementation**:\n   - Define component with FC type annotation\n   - Calculate derived values at top level\n   - Use useMemo only for expensive computations\n   - Handle user interactions in event handlers\n   - Use query client hooks for API requests\n\n3. **Effect review checklist**:\n   - [ ] Is this synchronizing with an external system?\n   - [ ] Could this be a calculated value instead?\n   - [ ] Should this be in an event handler?\n   - [ ] Am I using the right hook (useMemo, key prop)?\n   - [ ] If data fetching, is query client available?\n\n4. **If Effect is necessary**:\n   - Document why Effect is required\n   - Implement proper cleanup to prevent memory leaks\n   - Handle race conditions for async operations\n\u003C\u002Fworkflow>\n\n\u003Canti_patterns>\n## Anti-Patterns to Avoid\n\n❌ **Chaining Effects**:\n```tsx\n\u002F\u002F Bad: Effects triggering each other\nuseEffect(() => setB(a), [a]);\nuseEffect(() => setC(b), [b]);\n\n\u002F\u002F Good: Direct computation or single event handler\nconst b = computeB(a);\nconst c = computeC(b);\n```\n\n❌ **Effect-based initialization**:\n```tsx\n\u002F\u002F Bad: One-time initialization in Effect\nuseEffect(() => {\n  setData(expensiveInit());\n}, []);\n\n\u002F\u002F Good: useState with initializer\nconst [data] = useState(() => expensiveInit());\n```\n\n❌ **Direct fetch calls**:\n```tsx\n\u002F\u002F Bad: Manual fetch in component\nuseEffect(() => {\n  fetch('\u002Fapi\u002Fdata').then(res => res.json()).then(setData);\n}, []);\n\n\u002F\u002F Good: Use query client\nconst { data } = useQuery({ queryKey: ['data'], queryFn: fetchData });\n```\n\u003C\u002Fanti_patterns>\n","\u003Crole>\nYou are implementing React components following modern best practices. Your goal is to write clean, performant React code that avoids unnecessary Effects and follows established patterns.\n\u003C\u002Frole>\n\n\u003Ccore_principles>\n## Core Principles\n\n### 1. Minimize useEffect Usage\n**Think harder before adding useEffect.** Most scenarios have better alternatives:\n\n\u003Cwhen_not_to_use_effect>\n#### When NOT to Use useEffect\n\n**Data transformation for rendering**:\n- ❌ Don't: Use Effect to compute derived state\n- ✅ Do: Calculate during render at top level\n```tsx\n\u002F\u002F ❌ Bad: Cascading updates\nconst [filteredItems, setFilteredItems] = useState\u003CItem[]>([]);\nuseEffect(() => {\n  setFilteredItems(items.filter(item => item.active));\n}, [items]);\n\n\u002F\u002F ✅ Good: Direct computation\nconst filteredItems = items.filter(item => item.active);\n```\n\n**Handling user events**:\n- ❌ Don't: Use Effect to respond to user actions\n- ✅ Do: Handle logic in event handlers\n```tsx\n\u002F\u002F ❌ Bad: Lost interaction context\nuseEffect(() => {\n  if (buttonClicked) {\n    submitForm();\n  }\n}, [buttonClicked]);\n\n\u002F\u002F ✅ Good: Explicit intent\nconst handleSubmit = () => {\n  submitForm();\n};\n```\n\n**Caching expensive computations**:\n- ❌ Don't: Store computed results in state via Effects\n- ✅ Do: Use useMemo\n```tsx\n\u002F\u002F ❌ Bad: Manual memoization\nconst [expensiveResult, setExpensiveResult] = useState\u003CResult | null>(null);\nuseEffect(() => {\n  setExpensiveResult(computeExpensiveValue(data));\n}, [data]);\n\n\u002F\u002F ✅ Good: useMemo\nconst expensiveResult = useMemo(() => computeExpensiveValue(data), [data]);\n```\n\n**Resetting state on prop changes**:\n- ❌ Don't: Use Effect to reset state\n- ✅ Do: Use key prop to force remount\n```tsx\n\u002F\u002F ❌ Bad: Manual synchronization\nuseEffect(() => {\n  setLocalState(defaultValue);\n}, [userId]);\n\n\u002F\u002F ✅ Good: Key-based reset\n\u003CProfile key={userId} userId={userId} \u002F>\n```\n\u003C\u002Fwhen_not_to_use_effect>\n\n\u003Clegitimate_use_cases>\n#### Legitimate useEffect Use Cases\n\n**Only use Effects for**:\n1. Synchronizing with external systems (browser APIs, third-party widgets)\n2. Data fetching with proper cleanup (avoid race conditions)\n3. Subscriptions (prefer useSyncExternalStore when possible)\n\n**Pattern for data fetching** (if not using query client):\n```tsx\nuseEffect(() => {\n  let ignore = false;\n\n  async function fetchData() {\n    const result = await api.getData();\n    if (!ignore) {\n      setData(result);\n    }\n  }\n\n  fetchData();\n  return () => { ignore = true; }; \u002F\u002F Cleanup to prevent race conditions\n}, [dependency]);\n```\n\u003C\u002Flegitimate_use_cases>\n\u003C\u002Fcore_principles>\n\n\u003Ccomponent_definition>\n### 2. Component Definition Style\n\n**Always use FC type annotation**:\n\n```tsx\nimport { FC, PropsWithChildren } from 'react';\n\n\u002F\u002F For components without children\ntype ButtonProps {\n  label: string;\n  onClick: () => void;\n}\n\nconst Button: FC\u003CButtonProps> = ({ label, onClick }) => {\n  return \u003Cbutton onClick={onClick}>{label}\u003C\u002Fbutton>;\n};\n\n\u002F\u002F For components that accept children\ntype CardProps {\n  title: string;\n}\n\nconst Card: FC\u003CPropsWithChildren\u003CCardProps>> = ({ title, children }) => {\n  return (\n    \u003Cdiv>\n      \u003Ch2>{title}\u003C\u002Fh2>\n      \u003Cdiv>{children}\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  );\n};\n```\n\n**Never use function declaration syntax**:\n```tsx\n\u002F\u002F ❌ Bad: Avoid this style\nfunction MyComponent(props: Props) {\n  return \u003Cdiv \u002F>;\n}\n```\n\u003C\u002Fcomponent_definition>\n\n\u003Capi_requests>\n### 3. API Request Handling\n\n**Never use fetch directly in components.** Always use the project's query client.\n\n\u003Cdetection_workflow>\n#### Detection Workflow\n\n1. **Check project dependencies** in package.json:\n   - `@apollo\u002Fclient` → Use Apollo Client hooks\n   - `@tanstack\u002Freact-query` → Use Tanstack Query hooks\n   - `swr` → Use SWR hooks\n\n2. **Search for existing usage patterns**:\n   - Look for `useQuery`, `useMutation`, `useSWR`, `useApolloClient` in codebase\n   - Follow established patterns for consistency\n\n3. **Apply appropriate client**:\n\n\u003Capollo_client>\n**Apollo Client (GraphQL)**:\n```tsx\nimport { useQuery, useMutation, gql } from '@apollo\u002Fclient';\n\nconst GET_USER = gql`\n  query GetUser($id: ID!) {\n    user(id: $id) {\n      id\n      name\n      email\n    }\n  }\n`;\n\nconst UserProfile: FC\u003C{ userId: string }> = ({ userId }) => {\n  const { data, loading, error } = useQuery(GET_USER, {\n    variables: { id: userId },\n  });\n\n  if (loading) return \u003CSpinner \u002F>;\n  if (error) return \u003CErrorMessage error={error} \u002F>;\n\n  return \u003Cdiv>{data.user.name}\u003C\u002Fdiv>;\n};\n\n\u002F\u002F Mutations\nconst UPDATE_USER = gql`\n  mutation UpdateUser($id: ID!, $name: String!) {\n    updateUser(id: $id, name: $name) {\n      id\n      name\n    }\n  }\n`;\n\nconst EditForm: FC = () => {\n  const [updateUser, { loading }] = useMutation(UPDATE_USER);\n\n  const handleSubmit = async (values: FormValues) => {\n    await updateUser({ variables: { id: values.id, name: values.name } });\n  };\n\n  return \u003Cform onSubmit={handleSubmit}>...\u003C\u002Fform>;\n};\n```\n\u003C\u002Fapollo_client>\n\n\u003Ctanstack_query>\n**Tanstack Query (REST)**:\n```tsx\nimport { useQuery, useMutation, useQueryClient } from '@tanstack\u002Freact-query';\n\nconst UserProfile: FC\u003C{ userId: string }> = ({ userId }) => {\n  const { data, isLoading, error } = useQuery({\n    queryKey: ['user', userId],\n    queryFn: () => api.getUser(userId),\n  });\n\n  if (isLoading) return \u003CSpinner \u002F>;\n  if (error) return \u003CErrorMessage error={error} \u002F>;\n\n  return \u003Cdiv>{data.name}\u003C\u002Fdiv>;\n};\n\n\u002F\u002F Mutations with cache invalidation\nconst EditForm: FC = () => {\n  const queryClient = useQueryClient();\n\n  const mutation = useMutation({\n    mutationFn: (values: FormValues) => api.updateUser(values),\n    onSuccess: () => {\n      queryClient.invalidateQueries({ queryKey: ['user'] });\n    },\n  });\n\n  const handleSubmit = (values: FormValues) => {\n    mutation.mutate(values);\n  };\n\n  return \u003Cform onSubmit={handleSubmit}>...\u003C\u002Fform>;\n};\n```\n\u003C\u002Ftanstack_query>\n\n\u003Cswr>\n**SWR**:\n```tsx\nimport useSWR from 'swr';\nimport useSWRMutation from 'swr\u002Fmutation';\n\nconst UserProfile: FC\u003C{ userId: string }> = ({ userId }) => {\n  const { data, error, isLoading } = useSWR(\n    `\u002Fapi\u002Fusers\u002F${userId}`,\n    fetcher\n  );\n\n  if (isLoading) return \u003CSpinner \u002F>;\n  if (error) return \u003CErrorMessage error={error} \u002F>;\n\n  return \u003Cdiv>{data.name}\u003C\u002Fdiv>;\n};\n\n\u002F\u002F Mutations\nconst EditForm: FC = () => {\n  const { trigger, isMutating } = useSWRMutation(\n    '\u002Fapi\u002Fusers',\n    updateUser\n  );\n\n  const handleSubmit = async (values: FormValues) => {\n    await trigger(values);\n  };\n\n  return \u003Cform onSubmit={handleSubmit}>...\u003C\u002Fform>;\n};\n```\n\u003C\u002Fswr>\n\u003C\u002Fdetection_workflow>\n\n**Benefits of query clients**:\n- Automatic caching and deduplication\n- Loading\u002Ferror state management\n- Race condition handling\n- Cache invalidation and refetching\n- Optimistic updates support\n\u003C\u002Fapi_requests>\n\u003C\u002Fcore_principles>\n\n\u003Cworkflow>\n## Implementation Workflow\n\n1. **Before writing component**:\n   - Identify data dependencies and state requirements\n   - Think harder: Can state be derived instead of stored?\n   - Plan event handlers before considering Effects\n\n2. **During implementation**:\n   - Define component with FC type annotation\n   - Calculate derived values at top level\n   - Use useMemo only for expensive computations\n   - Handle user interactions in event handlers\n   - Use query client hooks for API requests\n\n3. **Effect review checklist**:\n   - [ ] Is this synchronizing with an external system?\n   - [ ] Could this be a calculated value instead?\n   - [ ] Should this be in an event handler?\n   - [ ] Am I using the right hook (useMemo, key prop)?\n   - [ ] If data fetching, is query client available?\n\n4. **If Effect is necessary**:\n   - Document why Effect is required\n   - Implement proper cleanup to prevent memory leaks\n   - Handle race conditions for async operations\n\u003C\u002Fworkflow>\n\n\u003Canti_patterns>\n## Anti-Patterns to Avoid\n\n❌ **Chaining Effects**:\n```tsx\n\u002F\u002F Bad: Effects triggering each other\nuseEffect(() => setB(a), [a]);\nuseEffect(() => setC(b), [b]);\n\n\u002F\u002F Good: Direct computation or single event handler\nconst b = computeB(a);\nconst c = computeC(b);\n```\n\n❌ **Effect-based initialization**:\n```tsx\n\u002F\u002F Bad: One-time initialization in Effect\nuseEffect(() => {\n  setData(expensiveInit());\n}, []);\n\n\u002F\u002F Good: useState with initializer\nconst [data] = useState(() => expensiveInit());\n```\n\n❌ **Direct fetch calls**:\n```tsx\n\u002F\u002F Bad: Manual fetch in component\nuseEffect(() => {\n  fetch('\u002Fapi\u002Fdata').then(res => res.json()).then(setData);\n}, []);\n\n\u002F\u002F Good: Use query client\nconst { data } = useQuery({ queryKey: ['data'], queryFn: fetchData });\n```\n\u003C\u002Fanti_patterns>\n",{"name":5,"description":7},"main","7850740bd837adb32f0a109ab2af82482196c6f2","skills\u002F_collections\u002Fd-kimuson-dotfiles\u002Fclaude-code\u002Fskills\u002Freact",1,"https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills","https:\u002F\u002Fzturnsgo.com","https:\u002F\u002Fgithub.com\u002Fshengdabai","https:\u002F\u002Fzturnsgo.com\u002F","AI × education creator — producer, not consumer. Taught 6,000+ learners; shipping learning tools & daily essays with Claude Code, practicing @xiaolai's way 🥋","2026-11-01 21:28:23",{"source":8,"skillName":5,"commands":48,"prompt":58,"zipAvailable":59},[49,52,55],{"tool":50,"command":51},"npx","npx skills add shengdabai\u002FTony-Claude-Code-Skills --skill react",{"tool":53,"command":54},"bunx","bunx skills add shengdabai\u002FTony-Claude-Code-Skills --skill react",{"tool":56,"command":57},"pnpm","pnpm dlx skills add shengdabai\u002FTony-Claude-Code-Skills --skill react","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002F_collections\u002Fd-kimuson-dotfiles\u002Fclaude-code\u002Fskills\u002Freact\u002FSKILL.md",true,[],[62,78,107,133,155,175],{"skillNo":63,"name":64,"nameZh":6,"description":65,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":66,"categories":67,"keywords":71,"publishedAt":32},"01M70P17DAD4C1C47NPH6A96EM","xiaolai-methodology","以李笑来(Li Xiaolai)的思考方式、方法论与表达风格,为用户做全方位 1-on-1 教练指导,覆盖创业、赚钱、投资、学习、自学、读书写作、用 AI、以及人生心态与自我管理。当用户提到 \"李笑来\"、\"笑来\"、\"笑来老师\"、\"扮演李笑来\"、\"找笑来聊聊\"、\"笑来怎么看\"、\"xiaolai\"、\"把时间当作朋友\"、\"通往财富自由之路\"、\"定投改变命运\"、\"韭菜的自我修养\"、\"自学是门手艺\"、\"让时间陪你慢慢变富\"、\"七年就是一辈子\"、\"元认知\"、\"活在未来\"、\"复利\u002F长期主义\"、\"践行\"、\"痴迷改进\"、\"个人商业模式\u002F出售时间\"、\"睡后收入\"、\"定投\"、\"财富自由\"、\"操作系统升级\"、\"最少必要知识\"、\"北极星提示词\"、\"用 AI 该怎么学\u002F思考\" 等任一触发词,或当用户带着关于创业\u002F赚钱\u002F投资\u002F学习\u002F职业\u002F重大人生决策的困惑、希望被人用笑来式的「逻辑 + 大白话 + 类比 + 重新定义 + 践行导向」来点醒和指导时,自动进入李笑来教练模式。","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fxiaolai-methodology\u002FSKILL.md",[68],{"categoryNo":69,"categoryName":70,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",[72,73,74,75,76,29,77],"methodology","xiaolai","xiaolai methodology","朋友","投资","收入",{"skillNo":79,"name":80,"nameZh":6,"description":81,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":88,"publishedAt":32},"01M70P13NB9YP7ACJR1S861CDS","zread","Produce and consume a wiki-style knowledge base for a code repository via the `zread` CLI and its on-disk output under `.\u002F.zread\u002Fwiki\u002F`. Use this skill whenever the user wants to understand, onboard onto, explore, summarize, map, or get an overview of an unfamiliar codebase; asks for architecture docs, a project wiki, a repo walkthrough, module\u002Fpackage explanations, or \"what does this repo do\"; wants to generate, regenerate, resume, browse, or serve code documentation locally; or mentions zread \u002F zread.ai directly. Also use it proactively before diving into a large unknown repo — if `.\u002F.zread\u002Fwiki\u002Fcurrent` exists, read the generated pages instead of crawling source file-by-file; if it doesn't, consider offering to run `zread generate`. The trigger is the intent (understand a codebase through generated docs), not the literal word \"zread\".","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fzread\u002FSKILL.md",[84,87],{"categoryNo":85,"categoryName":86,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[80,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,31,105,106],"knowledge","wiki","explore","walkthrough","project","get","knowledge base","run","generate","intent","cli","map","documentation","project wiki","disk","architecture","unknown","generated",{"skillNo":108,"name":109,"nameZh":6,"description":110,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":111,"categories":112,"keywords":117,"publishedAt":32},"01M70P10S4SWMZQ8BJAFBFDRW3","youtube","Launch the YouTube Creator Agent to auto-generate videos.\nUse when: user types \u002Fyoutube, wants to create YouTube videos,\ngenerate video content, or upload to YouTube.\nKeywords: youtube, video, 视频, 创作视频, 发布视频","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube\u002FSKILL.md",[113,114],{"categoryNo":85,"categoryName":86,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":115,"categoryName":116,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000036","内容创作者",[109,118,119,120,121,122,123,124,97,125,126,127,30,128,129,130,131,132],"user","content","视频","creator","generate video","videos","launch","video content","create","upload","use","auto","types","Video","创作",{"skillNo":134,"name":135,"nameZh":6,"description":136,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":137,"categories":138,"keywords":140,"publishedAt":32},"01M70P0YE95D8BACZCGV8BK90K","youtube-script-sync","Sync, update, or optimize Tony's GetNote knowledge base `Youtube视频逐字稿` by turning each parent recording or first-person idea note into an idempotent child note containing a directly recordable YouTube long-video or Shorts script. Use when the user says “更新\u002F同步\u002F优化 Youtube视频逐字稿知识库”, or says “更新\u002F同步\u002F优化该知识库” while this knowledge base is the active context.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube-script-sync\u002FSKILL.md",[139],{"categoryNo":85,"categoryName":86,"taxonomyType":21,"taxonomyTypeDesc":22},[141,142,109,143,144,131,145,146,147,148,149,150,151,152,95,153,30,128,89,154],"sync","script","youtube script sync","recording","shorts","first","base","person","update","active","child","optimize","idempotent","long",{"skillNo":156,"name":157,"nameZh":6,"description":158,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":159,"categories":160,"keywords":165,"publishedAt":32},"01M70P0WMV5XT0EEC0N445PW07","writing-skills","How to write SKILL.md files that trigger reliably and teach effectively. Use when creating, improving, or reviewing Claude Code skills.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fxiaolai\u002Fnlpm\u002Fskills\u002Fnlpm\u002Fwriting-skills\u002FSKILL.md",[161,162,163,164],{"categoryNo":69,"categoryName":70,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":85,"categoryName":86,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},{"categoryNo":115,"categoryName":116,"taxonomyType":26,"taxonomyTypeDesc":27},[166,29,167,168,169,170,31,30,128,171,172,173,174],"writing skills","how","teach","write skill","write","claude code skills","files","how to","trigger",{"skillNo":176,"name":177,"nameZh":6,"description":178,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":179,"categories":180,"keywords":183,"publishedAt":32},"01M70P0SJFR4YVJQBGMHKGSKXT","writing-rules","How to write .claude\u002Frules\u002F files that Claude actually follows. Use when creating, improving, or reviewing project rules.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fxiaolai\u002Fnlpm\u002Fskills\u002Fnlpm\u002Fwriting-rules\u002FSKILL.md",[181,182],{"categoryNo":69,"categoryName":70,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":115,"categoryName":116,"taxonomyType":26,"taxonomyTypeDesc":27},[184,29,185,93,186,172,30,167,170,128,173],"Rules","writing rules","project rules"]