[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M73FCXTGYHDW195YYMHX130C":3,"skill-same:01M73FCXTGYHDW195YYMHX130C":49},{"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":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":25,"commitSha":26,"skillDirectory":27,"forksCount":28,"repositoryHtmlUrl":29,"repositoryHomepageUrl":30,"ownerHtmlUrl":31,"ownerBlogUrl":32,"ownerDescription":33,"updatedAt":34,"install":35,"resources":48},"01M73FCXTGYHDW195YYMHX130C","react-performance",null,"React and Next.js performance optimization — eliminate waterfalls, reduce bundle size, optimize renders, server-side patterns. 70+ rules by impact priority. Profile first, optimize second.","Horonomos-laps\u002FYana-AI","Horonomos-laps","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F355299122?v=4","01M76B3QPXE88ET2SQPDPVATZT"," Horonomos-laps","01M72ZQRJPCYPSSWT4D00VJR2A",13,"MIT","https:\u002F\u002Fgithub.com\u002FHoronomos-laps\u002FYana-AI\u002Fblob\u002Fmain\u002Fcore\u002Fskills\u002Freact-performance\u002FSKILL.md",[],[],"2026-11-11 15:11:14",false,"---\nname: react-performance\ndescription: React and Next.js performance optimization — eliminate waterfalls, reduce bundle size, optimize renders, server-side patterns. 70+ rules by impact priority. Profile first, optimize second.\nlicense: MIT\nsource: https:\u002F\u002Fgithub.com\u002Faffaan-m\u002FECC\n---\n\n# React Performance\n\nOrdered by impact. Fix P1 before P2. Profile before adding memo.\n\n**Trigger phrases:** \"slow React\", \"performance\", \"bundle size\", \"waterfall\", \"re-render\", \"optimize Next.js\", \"LCP\", \"FCP\"\n\n---\n\n## P1 — Waterfall Elimination\n\n```tsx\n\u002F\u002F ❌ Sequential\nconst user = await getUser(id)\nconst posts = await getPosts(user.id)\n\n\u002F\u002F ✅ Parallel\nconst [user, posts] = await Promise.all([getUser(id), getPosts(id)])\n```\n\n---\n\n## P2 — Bundle Size\n\n```tsx\n\u002F\u002F ✅ Dynamic imports\nconst HeavyChart = dynamic(() => import('.\u002FChart'), { loading: () => \u003CSkeleton \u002F>, ssr: false })\n\n\u002F\u002F ✅ Tree-shake\nimport { debounce } from 'lodash\u002Fdebounce'   \u002F\u002F ✅ not import from 'lodash'\n```\n\nTarget: JS bundle \u003C 200KB gzipped per route.\n\n---\n\n## P3 — Server-Side Patterns\n\n```tsx\n\u002F\u002F Server Component — zero client JS\nasync function ProductList() {\n  const products = await db.products.findMany({ take: 20 })\n  return \u003Cul>{products.map(p => \u003CProductCard key={p.id} {...p} \u002F>)}\u003C\u002Ful>\n}\n\n\u002F\u002F Cache expensive computations\nimport { cache } from 'react'\nconst getUser = cache(async (id: string) => db.users.findUnique({ where: { id } }))\n```\n\n---\n\n## P4 — Client Data Fetching\n\n```tsx\nconst { data } = useQuery({ queryKey: ['users'], queryFn: getUsers, staleTime: 1000 * 60 * 5 })\n```\n\n---\n\n## P5 — Re-render Prevention\n\n```tsx\nconst ExpensiveList = memo(({ items }) => \u003Cul>{items.map(i => \u003CItem key={i.id} {...i} \u002F>)}\u003C\u002Ful>)\nconst handleClick = useCallback((id: string) => setSelected(id), [])\nconst sorted = useMemo(() => items.sort(compareFn), [items])\n```\n\n**Only add memo after React DevTools Profiler confirms the cost.**\n\n---\n\n## P6 — Virtualize Long Lists\n\n```tsx\nimport { useVirtualizer } from '@tanstack\u002Freact-virtual'\n\u002F\u002F For lists > 100 items\n```\n\n---\n\n## Anti-Fake-Pass\n\n```\n❌ Adding memo everywhere without profiling — adds overhead\n❌ Parallel fetches split across separate useEffect → still sequential\n❌ No staleTime in TanStack Query → refetches on every focus\n❌ Large images without next\u002Fimage\n```\n","# React Performance\n\nOrdered by impact. Fix P1 before P2. Profile before adding memo.\n\n**Trigger phrases:** \"slow React\", \"performance\", \"bundle size\", \"waterfall\", \"re-render\", \"optimize Next.js\", \"LCP\", \"FCP\"\n\n---\n\n## P1 — Waterfall Elimination\n\n```tsx\n\u002F\u002F ❌ Sequential\nconst user = await getUser(id)\nconst posts = await getPosts(user.id)\n\n\u002F\u002F ✅ Parallel\nconst [user, posts] = await Promise.all([getUser(id), getPosts(id)])\n```\n\n---\n\n## P2 — Bundle Size\n\n```tsx\n\u002F\u002F ✅ Dynamic imports\nconst HeavyChart = dynamic(() => import('.\u002FChart'), { loading: () => \u003CSkeleton \u002F>, ssr: false })\n\n\u002F\u002F ✅ Tree-shake\nimport { debounce } from 'lodash\u002Fdebounce'   \u002F\u002F ✅ not import from 'lodash'\n```\n\nTarget: JS bundle \u003C 200KB gzipped per route.\n\n---\n\n## P3 — Server-Side Patterns\n\n```tsx\n\u002F\u002F Server Component — zero client JS\nasync function ProductList() {\n  const products = await db.products.findMany({ take: 20 })\n  return \u003Cul>{products.map(p => \u003CProductCard key={p.id} {...p} \u002F>)}\u003C\u002Ful>\n}\n\n\u002F\u002F Cache expensive computations\nimport { cache } from 'react'\nconst getUser = cache(async (id: string) => db.users.findUnique({ where: { id } }))\n```\n\n---\n\n## P4 — Client Data Fetching\n\n```tsx\nconst { data } = useQuery({ queryKey: ['users'], queryFn: getUsers, staleTime: 1000 * 60 * 5 })\n```\n\n---\n\n## P5 — Re-render Prevention\n\n```tsx\nconst ExpensiveList = memo(({ items }) => \u003Cul>{items.map(i => \u003CItem key={i.id} {...i} \u002F>)}\u003C\u002Ful>)\nconst handleClick = useCallback((id: string) => setSelected(id), [])\nconst sorted = useMemo(() => items.sort(compareFn), [items])\n```\n\n**Only add memo after React DevTools Profiler confirms the cost.**\n\n---\n\n## P6 — Virtualize Long Lists\n\n```tsx\nimport { useVirtualizer } from '@tanstack\u002Freact-virtual'\n\u002F\u002F For lists > 100 items\n```\n\n---\n\n## Anti-Fake-Pass\n\n```\n❌ Adding memo everywhere without profiling — adds overhead\n❌ Parallel fetches split across separate useEffect → still sequential\n❌ No staleTime in TanStack Query → refetches on every focus\n❌ Large images without next\u002Fimage\n```\n",{"name":5,"source":24,"license":15,"description":7},"https:\u002F\u002Fgithub.com\u002Faffaan-m\u002FECC","main","481dcd7dd2e288b9d627a2bd017db70e64e6c6fa","core\u002Fskills\u002Freact-performance",1,"https:\u002F\u002Fgithub.com\u002FHoronomos-laps\u002FYana-AI","https:\u002F\u002Fyana.vutam.link\u002F","https:\u002F\u002Fgithub.com\u002FHoronomos-laps","https:\u002F\u002Fyana.vutam.link","An open-source governed runtime & execution environment for multi-agent AI systems.","2026-11-11 23:56:26",{"source":8,"skillName":5,"commands":36,"prompt":46,"zipAvailable":47},[37,40,43],{"tool":38,"command":39},"npx","npx skills add Horonomos-laps\u002FYana-AI --skill react-performance",{"tool":41,"command":42},"bunx","bunx skills add Horonomos-laps\u002FYana-AI --skill react-performance",{"tool":44,"command":45},"pnpm","pnpm dlx skills add Horonomos-laps\u002FYana-AI --skill react-performance","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FHoronomos-laps\u002FYana-AI\u002Fblob\u002Fmain\u002Fcore\u002Fskills\u002Freact-performance\u002FSKILL.md",true,[],[50,57,65,73,81,89],{"skillNo":51,"name":52,"nameZh":6,"description":53,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":54,"categories":55,"keywords":56,"publishedAt":19},"01M735GKET5YVYKAY62W2P5YXB","openai--sentry--sentry","Use when the user asks to inspect Sentry issues or events, summarize recent production errors, or pull basic Sentry health data via the Sentry API; perform read-only queries with the bundled script and require `SENTRY_AUTH_TOKEN`.","https:\u002F\u002Fgithub.com\u002FHoronomos-laps\u002FYana-AI\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fopenai--sentry--sentry\u002FSKILL.md",[],[],{"skillNo":58,"name":59,"nameZh":6,"description":60,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":61,"licenseFileUrl":6,"sourceHtmlUrl":62,"categories":63,"keywords":64,"publishedAt":19},"01M73DCAP83T17HY7SMGK7MGFE","ito-basket-compare","Compare Itô prediction-market baskets against a user's knowledge base, portfolio notes, financial context, watchlist, or research thesis. Use for read-only basket comparison and gap analysis without investment advice or live trading.","Apache-2.0","https:\u002F\u002Fgithub.com\u002FHoronomos-laps\u002FYana-AI\u002Fblob\u002Fmain\u002Fcore\u002Fskills\u002Fito-basket-compare\u002FSKILL.md",[],[],{"skillNo":66,"name":67,"nameZh":6,"description":68,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":61,"licenseFileUrl":69,"sourceHtmlUrl":70,"categories":71,"keywords":72,"publishedAt":19},"01M734CYEMZFDR3KH6SW0JP8TD","implementing-network-traffic-baselining","Build network traffic baselines from NetFlow\u002FIPFIX data using Python pandas for statistical analysis, z-score anomaly detection, and hourly\u002Fdaily traffic pattern profiling","https:\u002F\u002Fgithub.com\u002Fyanacuti1121\u002FYana-AI\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fimplementing-network-traffic-baselining\u002FLICENSE","https:\u002F\u002Fgithub.com\u002FHoronomos-laps\u002FYana-AI\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fimplementing-network-traffic-baselining\u002FSKILL.md",[],[],{"skillNo":74,"name":75,"nameZh":6,"description":76,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":61,"licenseFileUrl":77,"sourceHtmlUrl":78,"categories":79,"keywords":80,"publishedAt":19},"01M73ASZ6NJRJM44Z2P84NGQ3Q","detecting-evasion-techniques-in-endpoint-logs","Detects defense evasion techniques used by adversaries in endpoint logs including log tampering, timestomping, process injection, and security tool disabling. Use when investigating suspicious endpoint behavior, building detection rules for evasion tactics, or conducting threat hunting for stealthy adversary activity. Activates for requests involving evasion detection, defense evasion analysis, log tampering detection, or MITRE ATT&CK TA0005.","https:\u002F\u002Fgithub.com\u002Fyanacuti1121\u002FYana-AI\u002Fblob\u002Fmain\u002Fcore\u002Fskills\u002Fdetecting-evasion-techniques-in-endpoint-logs\u002FLICENSE","https:\u002F\u002Fgithub.com\u002FHoronomos-laps\u002FYana-AI\u002Fblob\u002Fmain\u002Fcore\u002Fskills\u002Fdetecting-evasion-techniques-in-endpoint-logs\u002FSKILL.md",[],[],{"skillNo":82,"name":83,"nameZh":6,"description":84,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":61,"licenseFileUrl":85,"sourceHtmlUrl":86,"categories":87,"keywords":88,"publishedAt":19},"01M734AFNXD06Z78QRK0VKGT7Q","implementing-microsegmentation-with-guardicore","Implementing microsegmentation using Akamai Guardicore Segmentation to map application dependencies, create granular network policies, visualize east-west traffic flows, and enforce least-privilege communication between workloads across data centers and cloud.","https:\u002F\u002Fgithub.com\u002Fyanacuti1121\u002FYana-AI\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fimplementing-microsegmentation-with-guardicore\u002FLICENSE","https:\u002F\u002Fgithub.com\u002FHoronomos-laps\u002FYana-AI\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fimplementing-microsegmentation-with-guardicore\u002FSKILL.md",[],[],{"skillNo":90,"name":91,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":61,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":94,"publishedAt":19},"01M736TK27QMCXK0DVCH25SJN5","ramdisk-tmpfs-patterns","https:\u002F\u002Fgithub.com\u002FHoronomos-laps\u002FYana-AI\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Framdisk-tmpfs-patterns\u002FSKILL.md",[],[]]