[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71H98RDXRQZDR496SRD906M":3,"skill-same:01M71H98RDXRQZDR496SRD906M":64},{"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":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":44,"commitSha":45,"skillDirectory":46,"forksCount":13,"repositoryHtmlUrl":47,"repositoryHomepageUrl":6,"ownerHtmlUrl":48,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":49,"install":50,"resources":63},"01M71H98RDXRQZDR496SRD906M","01-fp-style",null,"React functional programming style — pure components, hooks conventions, Effect Atom integration, and Tailwind patterns","lambda-solver\u002Flambdabench-pro","lambda-solver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F279071046?v=4","01M71H55W2WK3PM6RRAY9JZWAJ","01M71H55WRT9XAFDAVACTCC2XP",0,"MIT","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Freact\u002Fpatterns\u002F01-fp-style\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"style","01 fp style","effect","functional programming","tailwind patterns","Tailwind","hooks","components","programming","react","functional","atom","opencode","integration","conventions","patterns","2026-11-10 10:12:30",false,"---\nname: 01-fp-style\ndescription: React functional programming style — pure components, hooks conventions, Effect Atom integration, and Tailwind patterns\nlicense: MIT\ncompatibility: opencode\n---\n\n# React FP Style\n\nFunctional programming conventions for React components. These rules apply to\nall React code regardless of whether Effect-TS is used.\n\n## Core Rules\n\n- **Always `const`** — components, handlers, derived values; never `let` or `var`\n- **No mutation** — never mutate arrays or objects in place; always produce new values\n- **Pure components** — same props → same output; side effects only in `useEffect` or custom hooks\n- **Derive, don't store** — don't put derivable values in `useState`; compute them inline or with `useMemo`\n- **Immutable handlers** — declare event handlers as `const` at component scope\n\n## Never Mutate\n\n```typescript\n\u002F\u002F ❌ mutation\nconst handleAdd = () => {\n  items.push(newItem);\n  setItems(items);\n};\n\n\u002F\u002F ✅ new array\nconst handleAdd = () => {\n  setItems([...items, newItem]);\n};\n\n\u002F\u002F ❌ object mutation\nstate.count = state.count + 1;\n\n\u002F\u002F ✅ new object\nconst next = { ...state, count: state.count + 1 };\n```\n\n## Always const\n\n```typescript\n\u002F\u002F ❌ let \u002F var\nlet MyComponent = () => \u003Cdiv \u002F>;\nvar count = items.length;\n\n\u002F\u002F ✅ const\nconst MyComponent = () => \u003Cdiv \u002F>;\nconst count = items.length;\n```\n\n## Derive, Don't Store\n\n```typescript\n\u002F\u002F ❌ redundant state\nconst [sortedItems, setSortedItems] = useState(items);\nuseEffect(() => setSortedItems([...items].sort()), [items]);\n\n\u002F\u002F ✅ derived value\nconst sortedItems = useMemo(() => [...items].sort(), [items]);\n```\n\n## Immutable Handlers\n\n```typescript\n\u002F\u002F ❌ inline mutation in JSX\n\u003Cbutton onClick={() => { arr.push(x); setState(arr) }}>Add\u003C\u002Fbutton>\n\n\u002F\u002F ✅ pure handler declared with const\nconst handleClick = () => setState(prev => [...prev, x])\n\u003Cbutton onClick={handleClick}>Add\u003C\u002Fbutton>\n```\n\n## Props and State Updates\n\n```typescript\n\u002F\u002F ❌ mutate props or state directly\nprops.user.name = \"Alice\";\nstate.items[0] = updated;\n\n\u002F\u002F ✅ spread for objects, map\u002Ffilter for arrays\nconst updatedUser = { ...props.user, name: \"Alice\" };\nconst updatedItems = state.items.map((item, i) => (i === 0 ? updated : item));\n```\n\n## Effect Atom Boundary (Effect-TS projects)\n\n```typescript\n\u002F\u002F ❌ imperative runtime call inside JSX\nconst value = runtime.runSync(someEffect);\n\n\u002F\u002F ✅ read atom declaratively; AsyncResult.match handles all states\nconst result = useAtomValue(benchmarkAtom);\nreturn AsyncResult.match(result, {\n  onInitial: () => \u003CLoading \u002F>,\n  onFailure: (e) => \u003CError error={e} \u002F>,\n  onSuccess: ({ value }) => \u003CView data={value} \u002F>,\n});\n```\n\n## List Rendering with map\n\n**Always render lists dynamically with `Array.map`. Never hardcode list items.**\n\n```tsx\n\u002F\u002F ❌ STATIC — violates DRY, hard to maintain\n\u003Cdiv>\n  \u003CUserItem name=\"Alice\" \u002F>\n  \u003CUserItem name=\"Bob\" \u002F>\n  \u003CUserItem name=\"Carol\" \u002F>\n\u003C\u002Fdiv>\n\n\u002F\u002F ✅ DYNAMIC — data-driven, composable, scalable\n\u003Cdiv>\n  {users.map((user) => (\n    \u003CUserItem key={user.id} name={user.name} \u002F>\n  ))}\n\u003C\u002Fdiv>\n```\n\n### Key Rules\n\n```tsx\n\u002F\u002F ❌ index as key — causes reordering bugs, broken state\n{\n  items.map((item, i) => \u003CItem key={i} {...item} \u002F>);\n}\n\n\u002F\u002F ✅ stable unique id\n{\n  items.map((item) => \u003CItem key={item.id} {...item} \u002F>);\n}\n\n\u002F\u002F ✅ fragment with key for multiple elements\n{\n  items.map((item) => (\n    \u003CReact.Fragment key={item.id}>\n      \u003Cdt>{item.name}\u003C\u002Fdt>\n      \u003Cdd>{item.value}\u003C\u002Fdd>\n    \u003C\u002FReact.Fragment>\n  ));\n}\n```\n\n## Custom Hooks for Logic Reuse\n\n```tsx\n\u002F\u002F ❌ logic in component\nfunction UserList() {\n  const [users, setUsers] = useState([]);\n  const [loading, setLoading] = useState(false);\n  useEffect(() => {\n    setLoading(true);\n    fetchUsers()\n      .then(setUsers)\n      .finally(() => setLoading(false));\n  }, []);\n  \u002F\u002F ... 50 more lines\n}\n\n\u002F\u002F ✅ custom hook\nfunction useUsers() {\n  const [users, setUsers] = useState\u003CUser[]>([]);\n  const [isLoading, setIsLoading] = useState(false);\n  useEffect(() => {\n    setIsLoading(true);\n    fetchUsers()\n      .then(setUsers)\n      .finally(() => setIsLoading(false));\n  }, []);\n  return { users, isLoading };\n}\n\n\u002F\u002F ✅ clean component\nfunction UserList() {\n  const { users, isLoading } = useUsers();\n  if (isLoading) return \u003CLoading \u002F>;\n  return (\n    \u003Cul>\n      {users.map((u) => (\n        \u003Cli key={u.id}>{u.name}\u003C\u002Fli>\n      ))}\n    \u003C\u002Ful>\n  );\n}\n```\n\n## useMemo and useCallback\n\n```tsx\n\u002F\u002F ✅ memoize expensive computation\nconst sortedUsers = useMemo(() => users.sort((a, b) => a.name.localeCompare(b.name)), [users]);\n\n\u002F\u002F ✅ memoize callback to prevent child re-renders\nconst handleSelect = useCallback((id: string) => {\n  setSelectedId(id);\n}, []);\n\n\u002F\u002F ❌ don't memoize everything — only when:\n\u002F\u002F 1. Expensive computation\n\u002F\u002F 2. Passed to memoized child component\n\u002F\u002F 3. Used in dependency array of useEffect\n\n\u002F\u002F ❌ unnecessary memoization\nconst count = useMemo(() => items.length, [items]); \u002F\u002F cheap, skip it\n```\n\n## Component Composition\n\n```tsx\n\u002F\u002F ✅ composition over configuration\n\u003CCard>\n  \u003CCard.Header title=\"Users\" \u002F>\n  \u003CCard.Body>\n    \u003CUserList \u002F>\n  \u003C\u002FCard.Body>\n  \u003CCard.Footer>\n    \u003CButton>Create\u003C\u002FButton>\n  \u003C\u002FCard.Footer>\n\u003C\u002FCard>\n\n\u002F\u002F ❌ prop drilling configuration\n\u003CCard\n  title=\"Users\"\n  body={\u003CUserList \u002F>}\n  footer={\u003CButton>Create\u003C\u002FButton>}\n\u002F>\n```\n\n## Error Boundaries\n\n```tsx\n\u002F\u002F ✅ functional error boundary (react-error-boundary)\nimport { ErrorBoundary } from \"react-error-boundary\";\n\n\u003CErrorBoundary\n  fallbackRender={({ error, resetErrorBoundary }) => (\n    \u003Cdiv>\n      \u003Cp>Something went wrong:\u003C\u002Fp>\n      \u003Cpre>{error.message}\u003C\u002Fpre>\n      \u003Cbutton onClick={resetErrorBoundary}>Try again\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  )}\n>\n  \u003CRiskyComponent \u002F>\n\u003C\u002FErrorBoundary>;\n```\n\n## Summary\n\n| Rule                   | Enforce                                     |\n| ---------------------- | ------------------------------------------- |\n| `const` everywhere     | No `let`\u002F`var` in component files           |\n| No in-place mutation   | Spread, `map`, `filter`, `structuredClone`  |\n| Derive over store      | `useMemo` \u002F inline expression               |\n| Pure render            | No side effects in render body              |\n| Declarative atom reads | `useAtomValue` + `AsyncResult.match`        |\n| Dynamic lists          | Always `Array.map`, never static            |\n| Stable keys            | Use `id`, never array index                 |\n| Custom hooks           | Extract logic, keep components thin         |\n| Composition            | `children` props over configuration props   |\n| Memoization            | Only for expensive ops or memoized children |\n","# React FP Style\n\nFunctional programming conventions for React components. These rules apply to\nall React code regardless of whether Effect-TS is used.\n\n## Core Rules\n\n- **Always `const`** — components, handlers, derived values; never `let` or `var`\n- **No mutation** — never mutate arrays or objects in place; always produce new values\n- **Pure components** — same props → same output; side effects only in `useEffect` or custom hooks\n- **Derive, don't store** — don't put derivable values in `useState`; compute them inline or with `useMemo`\n- **Immutable handlers** — declare event handlers as `const` at component scope\n\n## Never Mutate\n\n```typescript\n\u002F\u002F ❌ mutation\nconst handleAdd = () => {\n  items.push(newItem);\n  setItems(items);\n};\n\n\u002F\u002F ✅ new array\nconst handleAdd = () => {\n  setItems([...items, newItem]);\n};\n\n\u002F\u002F ❌ object mutation\nstate.count = state.count + 1;\n\n\u002F\u002F ✅ new object\nconst next = { ...state, count: state.count + 1 };\n```\n\n## Always const\n\n```typescript\n\u002F\u002F ❌ let \u002F var\nlet MyComponent = () => \u003Cdiv \u002F>;\nvar count = items.length;\n\n\u002F\u002F ✅ const\nconst MyComponent = () => \u003Cdiv \u002F>;\nconst count = items.length;\n```\n\n## Derive, Don't Store\n\n```typescript\n\u002F\u002F ❌ redundant state\nconst [sortedItems, setSortedItems] = useState(items);\nuseEffect(() => setSortedItems([...items].sort()), [items]);\n\n\u002F\u002F ✅ derived value\nconst sortedItems = useMemo(() => [...items].sort(), [items]);\n```\n\n## Immutable Handlers\n\n```typescript\n\u002F\u002F ❌ inline mutation in JSX\n\u003Cbutton onClick={() => { arr.push(x); setState(arr) }}>Add\u003C\u002Fbutton>\n\n\u002F\u002F ✅ pure handler declared with const\nconst handleClick = () => setState(prev => [...prev, x])\n\u003Cbutton onClick={handleClick}>Add\u003C\u002Fbutton>\n```\n\n## Props and State Updates\n\n```typescript\n\u002F\u002F ❌ mutate props or state directly\nprops.user.name = \"Alice\";\nstate.items[0] = updated;\n\n\u002F\u002F ✅ spread for objects, map\u002Ffilter for arrays\nconst updatedUser = { ...props.user, name: \"Alice\" };\nconst updatedItems = state.items.map((item, i) => (i === 0 ? updated : item));\n```\n\n## Effect Atom Boundary (Effect-TS projects)\n\n```typescript\n\u002F\u002F ❌ imperative runtime call inside JSX\nconst value = runtime.runSync(someEffect);\n\n\u002F\u002F ✅ read atom declaratively; AsyncResult.match handles all states\nconst result = useAtomValue(benchmarkAtom);\nreturn AsyncResult.match(result, {\n  onInitial: () => \u003CLoading \u002F>,\n  onFailure: (e) => \u003CError error={e} \u002F>,\n  onSuccess: ({ value }) => \u003CView data={value} \u002F>,\n});\n```\n\n## List Rendering with map\n\n**Always render lists dynamically with `Array.map`. Never hardcode list items.**\n\n```tsx\n\u002F\u002F ❌ STATIC — violates DRY, hard to maintain\n\u003Cdiv>\n  \u003CUserItem name=\"Alice\" \u002F>\n  \u003CUserItem name=\"Bob\" \u002F>\n  \u003CUserItem name=\"Carol\" \u002F>\n\u003C\u002Fdiv>\n\n\u002F\u002F ✅ DYNAMIC — data-driven, composable, scalable\n\u003Cdiv>\n  {users.map((user) => (\n    \u003CUserItem key={user.id} name={user.name} \u002F>\n  ))}\n\u003C\u002Fdiv>\n```\n\n### Key Rules\n\n```tsx\n\u002F\u002F ❌ index as key — causes reordering bugs, broken state\n{\n  items.map((item, i) => \u003CItem key={i} {...item} \u002F>);\n}\n\n\u002F\u002F ✅ stable unique id\n{\n  items.map((item) => \u003CItem key={item.id} {...item} \u002F>);\n}\n\n\u002F\u002F ✅ fragment with key for multiple elements\n{\n  items.map((item) => (\n    \u003CReact.Fragment key={item.id}>\n      \u003Cdt>{item.name}\u003C\u002Fdt>\n      \u003Cdd>{item.value}\u003C\u002Fdd>\n    \u003C\u002FReact.Fragment>\n  ));\n}\n```\n\n## Custom Hooks for Logic Reuse\n\n```tsx\n\u002F\u002F ❌ logic in component\nfunction UserList() {\n  const [users, setUsers] = useState([]);\n  const [loading, setLoading] = useState(false);\n  useEffect(() => {\n    setLoading(true);\n    fetchUsers()\n      .then(setUsers)\n      .finally(() => setLoading(false));\n  }, []);\n  \u002F\u002F ... 50 more lines\n}\n\n\u002F\u002F ✅ custom hook\nfunction useUsers() {\n  const [users, setUsers] = useState\u003CUser[]>([]);\n  const [isLoading, setIsLoading] = useState(false);\n  useEffect(() => {\n    setIsLoading(true);\n    fetchUsers()\n      .then(setUsers)\n      .finally(() => setIsLoading(false));\n  }, []);\n  return { users, isLoading };\n}\n\n\u002F\u002F ✅ clean component\nfunction UserList() {\n  const { users, isLoading } = useUsers();\n  if (isLoading) return \u003CLoading \u002F>;\n  return (\n    \u003Cul>\n      {users.map((u) => (\n        \u003Cli key={u.id}>{u.name}\u003C\u002Fli>\n      ))}\n    \u003C\u002Ful>\n  );\n}\n```\n\n## useMemo and useCallback\n\n```tsx\n\u002F\u002F ✅ memoize expensive computation\nconst sortedUsers = useMemo(() => users.sort((a, b) => a.name.localeCompare(b.name)), [users]);\n\n\u002F\u002F ✅ memoize callback to prevent child re-renders\nconst handleSelect = useCallback((id: string) => {\n  setSelectedId(id);\n}, []);\n\n\u002F\u002F ❌ don't memoize everything — only when:\n\u002F\u002F 1. Expensive computation\n\u002F\u002F 2. Passed to memoized child component\n\u002F\u002F 3. Used in dependency array of useEffect\n\n\u002F\u002F ❌ unnecessary memoization\nconst count = useMemo(() => items.length, [items]); \u002F\u002F cheap, skip it\n```\n\n## Component Composition\n\n```tsx\n\u002F\u002F ✅ composition over configuration\n\u003CCard>\n  \u003CCard.Header title=\"Users\" \u002F>\n  \u003CCard.Body>\n    \u003CUserList \u002F>\n  \u003C\u002FCard.Body>\n  \u003CCard.Footer>\n    \u003CButton>Create\u003C\u002FButton>\n  \u003C\u002FCard.Footer>\n\u003C\u002FCard>\n\n\u002F\u002F ❌ prop drilling configuration\n\u003CCard\n  title=\"Users\"\n  body={\u003CUserList \u002F>}\n  footer={\u003CButton>Create\u003C\u002FButton>}\n\u002F>\n```\n\n## Error Boundaries\n\n```tsx\n\u002F\u002F ✅ functional error boundary (react-error-boundary)\nimport { ErrorBoundary } from \"react-error-boundary\";\n\n\u003CErrorBoundary\n  fallbackRender={({ error, resetErrorBoundary }) => (\n    \u003Cdiv>\n      \u003Cp>Something went wrong:\u003C\u002Fp>\n      \u003Cpre>{error.message}\u003C\u002Fpre>\n      \u003Cbutton onClick={resetErrorBoundary}>Try again\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  )}\n>\n  \u003CRiskyComponent \u002F>\n\u003C\u002FErrorBoundary>;\n```\n\n## Summary\n\n| Rule                   | Enforce                                     |\n| ---------------------- | ------------------------------------------- |\n| `const` everywhere     | No `let`\u002F`var` in component files           |\n| No in-place mutation   | Spread, `map`, `filter`, `structuredClone`  |\n| Derive over store      | `useMemo` \u002F inline expression               |\n| Pure render            | No side effects in render body              |\n| Declarative atom reads | `useAtomValue` + `AsyncResult.match`        |\n| Dynamic lists          | Always `Array.map`, never static            |\n| Stable keys            | Use `id`, never array index                 |\n| Custom hooks           | Extract logic, keep components thin         |\n| Composition            | `children` props over configuration props   |\n| Memoization            | Only for expensive ops or memoized children |\n",{"name":5,"license":14,"description":7,"compatibility":35},"main","816c073aaf171300af3605b06f7ec5aa7370ef0b","reference\u002Fghui\u002F.opencode\u002Fskills\u002Freact\u002Fpatterns\u002F01-fp-style","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro","https:\u002F\u002Fgithub.com\u002Flambda-solver","2026-05-31 17:08:46",{"source":8,"skillName":5,"commands":51,"prompt":61,"zipAvailable":62},[52,55,58],{"tool":53,"command":54},"npx","npx skills add lambda-solver\u002Flambdabench-pro --skill 01-fp-style",{"tool":56,"command":57},"bunx","bunx skills add lambda-solver\u002Flambdabench-pro --skill 01-fp-style",{"tool":59,"command":60},"pnpm","pnpm dlx skills add lambda-solver\u002Flambdabench-pro --skill 01-fp-style","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Freact\u002Fpatterns\u002F01-fp-style\u002FSKILL.md",true,[],[65,94,111,130,150,167],{"skillNo":66,"name":67,"nameZh":6,"description":68,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":69,"categories":70,"keywords":74,"publishedAt":39},"01M71H9FNA5D6Y4ANXD18Z1Z3X","tmux-workflow","Development workflow with tmux — run dev servers, Storybook, and background processes in persistent sessions with live logs, while keeping OpenCode free for chat","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Ftmux\u002FSKILL.md",[71],{"categoryNo":72,"categoryName":73,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[75,76,77,78,79,80,81,82,35,83,84,85,86,87,88,89,90,91,92,93],"tmux","workflow","tmux workflow","dev servers","free","live","servers","run","with","chat","logs","development workflow","storybook","dev","sessions","for","development","processes","background",{"skillNo":95,"name":96,"nameZh":6,"description":97,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":98,"categories":99,"keywords":101,"publishedAt":39},"01M71H9DQJDAJVZX37NDN99D3P","04-anti-patterns","React anti-patterns to avoid — manual JSX repetition, useEffect misuse, reference instability, prop drilling, conditional hooks, and common performance traps","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Freact\u002Fpatterns\u002F04-anti-patterns\u002FSKILL.md",[100],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[38,102,103,104,105,106,29,107,108,109,35,110,32],"anti patterns","04 anti patterns","jsx","reference","conditional","manual","performance","anti-patterns","common",{"skillNo":112,"name":113,"nameZh":6,"description":114,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":115,"categories":116,"keywords":118,"publishedAt":39},"01M71H9BXF511W2R3B73S5P9ZN","03-state-management","React state management patterns — lifting state, colocation, URL state, server state with TanStack Query, local state with useState\u002FuseReducer","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Freact\u002Fpatterns\u002F03-state-management\u002FSKILL.md",[117],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[119,120,121,122,32,123,38,124,125,126,127,35,128,83,129],"management","state management","state","03 state management","query","URL","tanstack","react state management","tanstack query","server","local",{"skillNo":131,"name":132,"nameZh":6,"description":133,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":134,"categories":135,"keywords":137,"publishedAt":39},"01M71H9AAGVWMYQ4NG82QPYCTE","02-component-composition","React component composition patterns — render props, compound components, list rendering with map, slot patterns, and layout primitives","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Freact\u002Fpatterns\u002F02-component-composition\u002FSKILL.md",[136],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[138,139,140,141,35,83,142,143,32,30,38,144,145,146,147,148,149],"02 component composition","component","Composition","compound","layout","primitives","composition patterns","list","map","rendering","render","react component",{"skillNo":151,"name":152,"nameZh":6,"description":153,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":154,"categories":155,"keywords":157,"publishedAt":39},"01M71H95PYGAWBS5C8KN0C4WGT","react-animation","React animation with react\u002Fmotion (Framer Motion) — declarative animations, gestures, layout animations, and performance best practices","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Freact\u002Fanimation\u002FSKILL.md",[156],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[158,32,159,160,83,161,162,163,164,165,142,35,166,108],"react animation","Animation","declarative","best practices","motion","animations","gestures","framer","framer motion",{"skillNo":168,"name":169,"nameZh":6,"description":170,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":171,"categories":172,"keywords":177,"publishedAt":39},"01M71H92TG8T2E5ZQ95PHAKZZC","04-bun-test","Bun built-in test runner — zero-config testing for Effect, React, and TypeScript projects","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Feffect-ts\u002Ftesting\u002F04-bun-test\u002FSKILL.md",[173,176],{"categoryNo":174,"categoryName":175,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[178,179,180,181,25,182,183,35,184,185,186,187,90,188,32],"bun test","04 bun test","bun","test","projects","runner","config","typescript","test runner","ZeRO","testing"]