[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71H8JB9WMPK88ASY1T3XCQZ":3,"skill-same:01M71H8JB9WMPK88ASY1T3XCQZ":57},{"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":32,"linkOnly":33,"markdownContent":34,"markdownBody":35,"frontMatter":36,"refName":37,"commitSha":38,"skillDirectory":39,"forksCount":13,"repositoryHtmlUrl":40,"repositoryHomepageUrl":6,"ownerHtmlUrl":41,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":42,"install":43,"resources":56},"01M71H8JB9WMPK88ASY1T3XCQZ","01-atoms",null,"Effect Atom reactivity — useAtomValue, Atom.make, React integration via @effect\u002Fatom-react","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\u002Feffect-ts\u002Fplatform\u002F01-atoms\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[23,24,25,26,27,28,29,30,31],"Atoms","01 atoms","react","integration","effect","opencode","atom","via","make","2026-11-10 10:12:30",false,"---\nname: 01-atoms\ndescription: Effect Atom reactivity — useAtomValue, Atom.make, React integration via @effect\u002Fatom-react\nlicense: MIT\ncompatibility: opencode\n---\n\n# Effect Atom (Reactivity)\n\n**Package**: `effect\u002Funstable\u002Freactivity`, `@effect\u002Fatom-react`\n**Version**: `effect@4.0.0-beta.41`, `@effect\u002Fatom-react@4.0.0-beta.41`\n\n## Runtime setup\n\n```typescript\nimport { Layer } from \"effect\";\nimport { DevTools } from \"effect\u002Funstable\u002Fdevtools\";\nimport { FetchHttpClient } from \"effect\u002Funstable\u002Fhttp\";\nimport { Atom } from \"effect\u002Funstable\u002Freactivity\";\n\n\u002F\u002F Static site — no RPC server, just FetchHttpClient\nexport const runtime = Atom.runtime(\n  FetchHttpClient.layer.pipe(\n    Layer.provideMerge(import.meta.env.VITE_ENABLE_DEVTOOLS === \"true\" ? DevTools.layer() : Layer.empty),\n  ),\n);\n```\n\n## Atom types\n\n```typescript\n\u002F\u002F runtime.atom(Effect) — single-shot, loads once, reactive\nexport const benchmarkAtom = runtime.atom(\n  Effect.gen(function* () {\n    const client = yield* HttpClient.HttpClient;\n    const response = yield* client.get(url);\n    const body = yield* response.json;\n    return yield* Schema.decode(BenchmarkDataSchema)(body);\n  }),\n);\n\u002F\u002F Type: Atom\u003CAsyncResult\u003CBenchmarkData, E>>\n\n\u002F\u002F runtime.fn(arg => Effect) — triggered\u002Fparameterized atom\nexport const searchAtom = runtime.fn((query: string) =>\n  Effect.gen(function* () {\n    const svc = yield* SearchService;\n    return yield* svc.search(query);\n  }),\n);\n\u002F\u002F Type: AtomResultFn\u003Cstring, SearchResult, E>\n\n\u002F\u002F runtime.atom(Stream) — streaming atom\nexport const streamAtom = runtime.atom(Stream.fromPubSub(myPubSub));\n```\n\n## React hooks\n\n```typescript\nimport { useAtom, useAtomSet, useAtomValue } from \"@effect\u002Fatom-react\";\nimport { AsyncResult } from \"effect\u002Funstable\u002Freactivity\";\n\n\u002F\u002F Read-only\nconst result = useAtomValue(benchmarkAtom);\n\n\u002F\u002F Read + write (returns [value, setter])\nconst [result, trigger] = useAtom(searchAtom);\ntrigger(\"my query\");\n\n\u002F\u002F Write-only\nconst trigger = useAtomSet(searchAtom);\ntrigger(\"my query\");\n```\n\n## AsyncResult pattern matching\n\n```typescript\nimport { AsyncResult } from \"effect\u002Funstable\u002Freactivity\";\n\n\u002F\u002F In a React component\nconst result = useAtomValue(benchmarkAtom);\n\nreturn AsyncResult.match(result, {\n  onInitial: (_) => \u003CLoading \u002F>,\n  onFailure: (e) => \u003CError message={String(e.cause)} \u002F>,\n  onSuccess: (s) => \u003CLeaderboard data={s.value} \u002F>,\n});\n\n\u002F\u002F getOrElse for a default\nconst data = AsyncResult.getOrElse(result, () => emptyBenchmarkData);\n```\n\n## RegistryProvider — required in app root\n\n```typescript\n\u002F\u002F main.tsx — not needed explicitly when using Atom.runtime()\n\u002F\u002F The runtime() call registers itself globally.\n\u002F\u002F But for tests, wrap with RegistryProvider:\nimport { RegistryProvider } from \"@effect\u002Fatom-react\";\n\nrender(\n  \u003CRegistryProvider>\n    \u003CApp \u002F>\n  \u003C\u002FRegistryProvider>,\n);\n```\n\n## Key signatures from Atom.d.ts\n\n```typescript\n\u002F\u002F AtomRuntime.atom — wraps Effect or Stream → AsyncResult atom\nruntime.atom(effect: Effect\u003CA, E, R | AtomRegistry>): Atom\u003CAsyncResult\u003CA, E>>\n\n\u002F\u002F AtomRuntime.fn — triggered atom\nruntime.fn(fn: (arg: Arg) => Effect\u003CA, E, R | AtomRegistry>): AtomResultFn\u003CArg, A, E>\n\n\u002F\u002F AsyncResult states\ntype AsyncResult\u003CA, E> = Initial\u003CA, E> | Success\u003CA, E> | Failure\u003CA, E>\n\n\u002F\u002F Hooks\nuseAtomValue\u003CA>(atom: Atom\u003CA>): A\nuseAtom\u003CR,W>(atom: Writable\u003CR,W>): readonly [R, (value: W) => void]\nuseAtomSet\u003CR,W>(atom: Writable\u003CR,W>): (value: W) => void\n```\n","# Effect Atom (Reactivity)\n\n**Package**: `effect\u002Funstable\u002Freactivity`, `@effect\u002Fatom-react`\n**Version**: `effect@4.0.0-beta.41`, `@effect\u002Fatom-react@4.0.0-beta.41`\n\n## Runtime setup\n\n```typescript\nimport { Layer } from \"effect\";\nimport { DevTools } from \"effect\u002Funstable\u002Fdevtools\";\nimport { FetchHttpClient } from \"effect\u002Funstable\u002Fhttp\";\nimport { Atom } from \"effect\u002Funstable\u002Freactivity\";\n\n\u002F\u002F Static site — no RPC server, just FetchHttpClient\nexport const runtime = Atom.runtime(\n  FetchHttpClient.layer.pipe(\n    Layer.provideMerge(import.meta.env.VITE_ENABLE_DEVTOOLS === \"true\" ? DevTools.layer() : Layer.empty),\n  ),\n);\n```\n\n## Atom types\n\n```typescript\n\u002F\u002F runtime.atom(Effect) — single-shot, loads once, reactive\nexport const benchmarkAtom = runtime.atom(\n  Effect.gen(function* () {\n    const client = yield* HttpClient.HttpClient;\n    const response = yield* client.get(url);\n    const body = yield* response.json;\n    return yield* Schema.decode(BenchmarkDataSchema)(body);\n  }),\n);\n\u002F\u002F Type: Atom\u003CAsyncResult\u003CBenchmarkData, E>>\n\n\u002F\u002F runtime.fn(arg => Effect) — triggered\u002Fparameterized atom\nexport const searchAtom = runtime.fn((query: string) =>\n  Effect.gen(function* () {\n    const svc = yield* SearchService;\n    return yield* svc.search(query);\n  }),\n);\n\u002F\u002F Type: AtomResultFn\u003Cstring, SearchResult, E>\n\n\u002F\u002F runtime.atom(Stream) — streaming atom\nexport const streamAtom = runtime.atom(Stream.fromPubSub(myPubSub));\n```\n\n## React hooks\n\n```typescript\nimport { useAtom, useAtomSet, useAtomValue } from \"@effect\u002Fatom-react\";\nimport { AsyncResult } from \"effect\u002Funstable\u002Freactivity\";\n\n\u002F\u002F Read-only\nconst result = useAtomValue(benchmarkAtom);\n\n\u002F\u002F Read + write (returns [value, setter])\nconst [result, trigger] = useAtom(searchAtom);\ntrigger(\"my query\");\n\n\u002F\u002F Write-only\nconst trigger = useAtomSet(searchAtom);\ntrigger(\"my query\");\n```\n\n## AsyncResult pattern matching\n\n```typescript\nimport { AsyncResult } from \"effect\u002Funstable\u002Freactivity\";\n\n\u002F\u002F In a React component\nconst result = useAtomValue(benchmarkAtom);\n\nreturn AsyncResult.match(result, {\n  onInitial: (_) => \u003CLoading \u002F>,\n  onFailure: (e) => \u003CError message={String(e.cause)} \u002F>,\n  onSuccess: (s) => \u003CLeaderboard data={s.value} \u002F>,\n});\n\n\u002F\u002F getOrElse for a default\nconst data = AsyncResult.getOrElse(result, () => emptyBenchmarkData);\n```\n\n## RegistryProvider — required in app root\n\n```typescript\n\u002F\u002F main.tsx — not needed explicitly when using Atom.runtime()\n\u002F\u002F The runtime() call registers itself globally.\n\u002F\u002F But for tests, wrap with RegistryProvider:\nimport { RegistryProvider } from \"@effect\u002Fatom-react\";\n\nrender(\n  \u003CRegistryProvider>\n    \u003CApp \u002F>\n  \u003C\u002FRegistryProvider>,\n);\n```\n\n## Key signatures from Atom.d.ts\n\n```typescript\n\u002F\u002F AtomRuntime.atom — wraps Effect or Stream → AsyncResult atom\nruntime.atom(effect: Effect\u003CA, E, R | AtomRegistry>): Atom\u003CAsyncResult\u003CA, E>>\n\n\u002F\u002F AtomRuntime.fn — triggered atom\nruntime.fn(fn: (arg: Arg) => Effect\u003CA, E, R | AtomRegistry>): AtomResultFn\u003CArg, A, E>\n\n\u002F\u002F AsyncResult states\ntype AsyncResult\u003CA, E> = Initial\u003CA, E> | Success\u003CA, E> | Failure\u003CA, E>\n\n\u002F\u002F Hooks\nuseAtomValue\u003CA>(atom: Atom\u003CA>): A\nuseAtom\u003CR,W>(atom: Writable\u003CR,W>): readonly [R, (value: W) => void]\nuseAtomSet\u003CR,W>(atom: Writable\u003CR,W>): (value: W) => void\n```\n",{"name":5,"license":14,"description":7,"compatibility":28},"main","816c073aaf171300af3605b06f7ec5aa7370ef0b","reference\u002Fghui\u002F.opencode\u002Fskills\u002Feffect-ts\u002Fplatform\u002F01-atoms","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":44,"prompt":54,"zipAvailable":55},[45,48,51],{"tool":46,"command":47},"npx","npx skills add lambda-solver\u002Flambdabench-pro --skill 01-atoms",{"tool":49,"command":50},"bunx","bunx skills add lambda-solver\u002Flambdabench-pro --skill 01-atoms",{"tool":52,"command":53},"pnpm","pnpm dlx skills add lambda-solver\u002Flambdabench-pro --skill 01-atoms","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Feffect-ts\u002Fplatform\u002F01-atoms\u002FSKILL.md",true,[],[58,87,106,125,146,162],{"skillNo":59,"name":60,"nameZh":6,"description":61,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":62,"categories":63,"keywords":67,"publishedAt":32},"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",[64],{"categoryNo":65,"categoryName":66,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[68,69,70,71,72,73,74,75,76,77,78,28,79,80,81,82,83,84,85,86],"tmux","workflow","tmux workflow","chat","dev servers","background","processes","storybook","live","servers","run","with","logs","development workflow","free","dev","sessions","for","development",{"skillNo":88,"name":89,"nameZh":6,"description":90,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":91,"categories":92,"keywords":94,"publishedAt":32},"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",[93],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[95,96,97,98,99,100,101,102,103,104,105,28,25],"patterns","anti patterns","04 anti patterns","common","jsx","reference","conditional","hooks","manual","performance","anti-patterns",{"skillNo":107,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":113,"publishedAt":32},"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",[112],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[114,115,116,117,25,118,95,119,120,121,122,28,123,79,124],"management","state management","state","03 state management","query","URL","tanstack","react state management","local","server","tanstack query",{"skillNo":126,"name":127,"nameZh":6,"description":128,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":129,"categories":130,"keywords":132,"publishedAt":32},"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",[131],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[133,134,135,28,79,136,137,25,138,95,139,140,141,142,143,144,145],"02 component composition","component","Composition","compound","components","primitives","composition patterns","list","map","rendering","render","react component","layout",{"skillNo":147,"name":148,"nameZh":6,"description":149,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":150,"categories":151,"keywords":153,"publishedAt":32},"01M71H98RDXRQZDR496SRD906M","01-fp-style","React functional programming style — pure components, hooks conventions, Effect Atom integration, and Tailwind patterns","https:\u002F\u002Fgithub.com\u002Flambda-solver\u002Flambdabench-pro\u002Fblob\u002Fmain\u002Freference\u002Fghui\u002F.opencode\u002Fskills\u002Freact\u002Fpatterns\u002F01-fp-style\u002FSKILL.md",[152],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[154,155,29,95,156,26,28,157,25,158,137,102,159,160,161,27],"01 fp style","style","conventions","functional","programming","Tailwind","tailwind patterns","functional programming",{"skillNo":163,"name":164,"nameZh":6,"description":165,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":166,"categories":167,"keywords":169,"publishedAt":32},"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",[168],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[25,170,171,104,172,28,145,173,174,79,175,176,177,178],"react animation","Animation","framer motion","motion","best practices","framer","gestures","animations","declarative"]