[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6CQKKCYS8001PZ8Y57MTH3D":3,"skill-same:01M6CQKKCYS8001PZ8Y57MTH3D":96},{"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":26,"publishedAt":46,"linkOnly":47,"markdownContent":48,"markdownBody":49,"frontMatter":50,"refName":59,"commitSha":60,"skillDirectory":61,"forksCount":14,"repositoryHtmlUrl":62,"repositoryHomepageUrl":63,"ownerHtmlUrl":64,"ownerBlogUrl":65,"ownerDescription":66,"updatedAt":67,"install":68,"resources":81},"01M6CQKKCYS8001PZ8Y57MTH3D","frontend-react",null,"React 19 patterns: hooks, state, performance, components, testing.","Trollz1004\u002FANTIGRAVITY","Trollz1004","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F132442315?v=4","01M6CQ4Z97ERZA2CXR388F6NZ1","Joshua Coleman","01M6CQ4ZCYE67QPNWBBV8H9DBE",0,"MIT","https:\u002F\u002Fgithub.com\u002FTrollz1004\u002FANTIGRAVITY\u002Fblob\u002Fmain\u002Fhermes\u002Ffrontend-react\u002Ffrontend-react\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",[27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],"frontend","frontend react","react","react 19 patterns","testing","react 19","patterns","hooks","hermes agent","hermes","nextjs","ui","state","windows","components","performance","linux","macos","design","2026-11-10 10:12:30",false,"---\nname: frontend-react\ndescription: \"React 19 patterns: hooks, state, performance, components, testing.\"\nversion: 1.0.0\nauthor: Joshua (joshlcoleman), Hermes Agent\nlicense: MIT\nplatforms: [linux, macos, windows]\nmetadata:\n  hermes:\n    tags: [react, frontend, hooks, state, performance, components]\n    related_skills: [nextjs, design-ui, testing]\n---\n\n# Frontend & React\n\n## When to Use\n\n- Building React components or applications\n- State management decisions\n- Performance optimization\n- Component architecture\n\n## Quick Reference\n\n| Task | Approach |\n|------|----------|\n| State | useState → useReducer → Zustand\u002FJotai (only when needed) |\n| Data fetching | TanStack Query \u002F SWR |\n| Forms | React Hook Form + Zod |\n| Styling | Tailwind CSS + cn() utility |\n| Testing | Vitest + Testing Library |\n| Icons | Lucide React |\n\n## React 19 Patterns\n\n### Server Components (RSC)\n\n```tsx\n\u002F\u002F Server Component (default in Next.js App Router)\nasync function UserProfile({ id }: { id: string }) {\n  const user = await db.user.findUnique({ where: { id } });\n  return \u003Cdiv>{user.name}\u003C\u002Fdiv>;\n}\n\n\u002F\u002F Client Component (interactive parts)\n'use client';\nfunction LikeButton({ postId }: { postId: string }) {\n  const [liked, setLiked] = useState(false);\n  return \u003Cbutton onClick={() => setLiked(!liked)}>{liked ? '❤️' : '?'}\u003C\u002Fbutton>;\n}\n```\n\n### Custom Hooks Pattern\n\n```tsx\n\u002F\u002F ✅ Good: Encapsulates logic, reusable\nfunction useDebounce\u003CT>(value: T, delay: number): T {\n  const [debounced, setDebounced] = useState(value);\n  useEffect(() => {\n    const timer = setTimeout(() => setDebounced(value), delay);\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n  return debounced;\n}\n\n\u002F\u002F Usage\nconst search = useDebounce(query, 300);\n```\n\n### Performance Checklist\n\n- [ ] Use `React.memo()` only when re-renders measured (not prematurely)\n- [ ] Lazy load below-fold components with `React.lazy()` + `Suspense`\n- [ ] Virtualize long lists with `@tanstack\u002Freact-virtual`\n- [ ] Code-split routes automatically (Next.js does this)\n- [ ] Use `useMemo`\u002F`useCallback` only when profiling shows benefit\n\n### Component Composition\n\n```tsx\n\u002F\u002F ✅ Good: Composition over props drilling\nfunction Card({ children }: { children: React.ReactNode }) {\n  return \u003Cdiv className=\"card\">{children}\u003C\u002Fdiv>;\n}\nfunction CardHeader({ title }: { title: string }) { return \u003Ch3>{title}\u003C\u002Fh3>; }\nfunction CardBody({ children }: { children: React.ReactNode }) { return \u003Cdiv>{children}\u003C\u002Fdiv>; }\n\n\u002F\u002F Usage\n\u003CCard>\n  \u003CCardHeader title=\"Hello\" \u002F>\n  \u003CCardBody>Content here\u003C\u002FCardBody>\n\u003C\u002FCard>\n```\n\n## Pitfalls\n\n- **Prop drilling 3+ levels** → Use Context or composition\n- **useEffect for derived state** → Compute during render instead\n- **Object\u002Farray in useEffect deps** → Use primitive deps or `useMemo`\n- **Index as key** → Use stable unique IDs\n- **Over-optimizing early** → Profile first, optimize second\n\n## Verification\n\n- [ ] Components render without errors\n- [ ] State updates trigger correct re-renders\n- [ ] No unnecessary re-renders (React DevTools Profiler)\n- [ ] Loading and error states handled\n- [ ] Accessible (keyboard nav, screen readers)\n","# Frontend & React\n\n## When to Use\n\n- Building React components or applications\n- State management decisions\n- Performance optimization\n- Component architecture\n\n## Quick Reference\n\n| Task | Approach |\n|------|----------|\n| State | useState → useReducer → Zustand\u002FJotai (only when needed) |\n| Data fetching | TanStack Query \u002F SWR |\n| Forms | React Hook Form + Zod |\n| Styling | Tailwind CSS + cn() utility |\n| Testing | Vitest + Testing Library |\n| Icons | Lucide React |\n\n## React 19 Patterns\n\n### Server Components (RSC)\n\n```tsx\n\u002F\u002F Server Component (default in Next.js App Router)\nasync function UserProfile({ id }: { id: string }) {\n  const user = await db.user.findUnique({ where: { id } });\n  return \u003Cdiv>{user.name}\u003C\u002Fdiv>;\n}\n\n\u002F\u002F Client Component (interactive parts)\n'use client';\nfunction LikeButton({ postId }: { postId: string }) {\n  const [liked, setLiked] = useState(false);\n  return \u003Cbutton onClick={() => setLiked(!liked)}>{liked ? '❤️' : '?'}\u003C\u002Fbutton>;\n}\n```\n\n### Custom Hooks Pattern\n\n```tsx\n\u002F\u002F ✅ Good: Encapsulates logic, reusable\nfunction useDebounce\u003CT>(value: T, delay: number): T {\n  const [debounced, setDebounced] = useState(value);\n  useEffect(() => {\n    const timer = setTimeout(() => setDebounced(value), delay);\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n  return debounced;\n}\n\n\u002F\u002F Usage\nconst search = useDebounce(query, 300);\n```\n\n### Performance Checklist\n\n- [ ] Use `React.memo()` only when re-renders measured (not prematurely)\n- [ ] Lazy load below-fold components with `React.lazy()` + `Suspense`\n- [ ] Virtualize long lists with `@tanstack\u002Freact-virtual`\n- [ ] Code-split routes automatically (Next.js does this)\n- [ ] Use `useMemo`\u002F`useCallback` only when profiling shows benefit\n\n### Component Composition\n\n```tsx\n\u002F\u002F ✅ Good: Composition over props drilling\nfunction Card({ children }: { children: React.ReactNode }) {\n  return \u003Cdiv className=\"card\">{children}\u003C\u002Fdiv>;\n}\nfunction CardHeader({ title }: { title: string }) { return \u003Ch3>{title}\u003C\u002Fh3>; }\nfunction CardBody({ children }: { children: React.ReactNode }) { return \u003Cdiv>{children}\u003C\u002Fdiv>; }\n\n\u002F\u002F Usage\n\u003CCard>\n  \u003CCardHeader title=\"Hello\" \u002F>\n  \u003CCardBody>Content here\u003C\u002FCardBody>\n\u003C\u002FCard>\n```\n\n## Pitfalls\n\n- **Prop drilling 3+ levels** → Use Context or composition\n- **useEffect for derived state** → Compute during render instead\n- **Object\u002Farray in useEffect deps** → Use primitive deps or `useMemo`\n- **Index as key** → Use stable unique IDs\n- **Over-optimizing early** → Profile first, optimize second\n\n## Verification\n\n- [ ] Components render without errors\n- [ ] State updates trigger correct re-renders\n- [ ] No unnecessary re-renders (React DevTools Profiler)\n- [ ] Loading and error states handled\n- [ ] Accessible (keyboard nav, screen readers)\n",{"name":5,"author":51,"license":15,"version":52,"metadata":53,"platforms":58,"description":7},"Joshua (joshlcoleman), Hermes Agent","1.0.0",{"hermes":54},{"tags":55,"related_skills":56},[29,27,34,39,42,41],[37,57,31],"design-ui",[43,44,40],"main","6deb42cc8c67a99d7613cb5802f8bbe01a0f3d12","hermes\u002Ffrontend-react\u002Ffrontend-react","https:\u002F\u002Fgithub.com\u002FTrollz1004\u002FANTIGRAVITY","https:\u002F\u002Fwww.ai-solutions.store","https:\u002F\u002Fgithub.com\u002FTrollz1004","https:\u002F\u002Fyouandinotai.com","Founder building YouAndINotAI, OnlineRecycle, and AIDoesItAll through Trash Or Treasure Online Recycler LLC.","2026-11-13 22:54:18",{"source":8,"skillName":5,"commands":69,"prompt":79,"zipAvailable":80},[70,73,76],{"tool":71,"command":72},"npx","npx skills add Trollz1004\u002FANTIGRAVITY --skill frontend-react",{"tool":74,"command":75},"bunx","bunx skills add Trollz1004\u002FANTIGRAVITY --skill frontend-react",{"tool":77,"command":78},"pnpm","pnpm dlx skills add Trollz1004\u002FANTIGRAVITY --skill frontend-react","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FTrollz1004\u002FANTIGRAVITY\u002Fblob\u002Fmain\u002Fhermes\u002Ffrontend-react\u002Ffrontend-react\u002FSKILL.md",true,[82,88,92],{"path":83,"resourceType":84,"resourceTypeDesc":85,"sizeBytes":86,"sourceHtmlUrl":87},"references\u002Fbackends.md","REFERENCE","参考文档",12011,"https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fai-research\u002Fprompt-engineering-guidance\u002Freferences\u002Fbackends.md",{"path":89,"resourceType":84,"resourceTypeDesc":85,"sizeBytes":90,"sourceHtmlUrl":91},"references\u002Fconstraints.md",15887,"https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fai-research\u002Fprompt-engineering-guidance\u002Freferences\u002Fconstraints.md",{"path":93,"resourceType":84,"resourceTypeDesc":85,"sizeBytes":94,"sourceHtmlUrl":95},"references\u002Fexamples.md",20080,"https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fai-research\u002Fprompt-engineering-guidance\u002Freferences\u002Fexamples.md",[97,125,158,184,207,232],{"skillNo":98,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":101,"sourceHtmlUrl":102,"categories":103,"keywords":104,"publishedAt":46},"01M6M5BT49KEBHJM9D0P5NM8ED","security-audit","Security guidance and vulnerability review for codebases, APIs, services, CLI tools, libraries, and daemons. Use for security questions, focused reviews, vulnerability research, security audits, or pen tests. Run the complete workflow only for explicit codebase audit or pen-test requests, full\u002Fcomprehensive\u002Fend-to-end reviews, or requested report artifacts.","https:\u002F\u002Fgithub.com\u002FTrollz1004\u002FANTIGRAVITY\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fsecurity-audit\u002FLICENSE","https:\u002F\u002Fgithub.com\u002FTrollz1004\u002FANTIGRAVITY\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fsecurity-audit\u002FSKILL.md",[],[105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124],"security audit","audit","security","reviews","end","only","workflow","vulnerability","review","libraries","cli","run","Tools","full","for","complete","security guidance","codebase audit","tests","use",{"skillNo":126,"name":127,"nameZh":6,"description":128,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":129,"licenseFileUrl":130,"sourceHtmlUrl":131,"categories":132,"keywords":142,"publishedAt":46},"01M6M5B16Q534MKFHKBHRZ2773","impeccable","Use when the user wants to design, redesign, shape, critique, audit, polish, simplify, harden, animate, or otherwise improve a frontend interface: websites, landing pages, dashboards, product UI, components, forms, settings, onboarding, empty states, and native iOS or Android screens. Handles UX review, hierarchy, layout, typography, color, motion, UX copy, accessibility, responsive behavior, edge cases, and capturing or documenting design systems (DESIGN.md, tokens). Also for making bland UI bolder, loud UI quieter, or ambitious visual effects. Not for backend-only or non-UI tasks.","Apache-2.0","https:\u002F\u002Fgithub.com\u002FTrollz1004\u002FANTIGRAVITY\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fimpeccable\u002FLICENSE","https:\u002F\u002Fgithub.com\u002FTrollz1004\u002FANTIGRAVITY\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fimpeccable\u002FSKILL.md",[133,134,137],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":135,"categoryName":136,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":138,"categoryName":139,"taxonomyType":140,"taxonomyTypeDesc":141},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[127,143,144,145,27,146,45,147,110,148,149,150,151,41,113,152,153,154,155,156,157],"ux copy","states","quieter","improve","interface","design systems","effects","simplify","tasks","hierarchy","critique","native","product","layout","when",{"skillNo":159,"name":160,"nameZh":6,"description":161,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":162,"sourceHtmlUrl":163,"categories":164,"keywords":169,"publishedAt":46},"01M6M5AHHV2NPZYVMW48HP7A6H","hallmark","Design skill for websites and new pages that look designed, not generated. Use when the user asks to build or design something new, or names Hallmark. Never use it on an existing design unless the user names Hallmark, as in `\u002Fhallmark redesign \u003Cpath>`.","https:\u002F\u002Fgithub.com\u002FTrollz1004\u002FANTIGRAVITY\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fhallmark\u002FLICENSE","https:\u002F\u002Fgithub.com\u002FTrollz1004\u002FANTIGRAVITY\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fhallmark\u002FSKILL.md",[165,166],{"categoryNo":135,"categoryName":136,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":167,"categoryName":168,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[160,170,171,119,172,173,45,174,124,175,176,177,106,178,179,180,181,182,183,157],"as","never","true","pages","generated","Existing","prompt","build","redesign","look","it","user","path","new",{"skillNo":185,"name":186,"nameZh":6,"description":187,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":129,"licenseFileUrl":188,"sourceHtmlUrl":189,"categories":190,"keywords":193,"publishedAt":46},"01M6CQDXJ785JCD5PMKYD239ZZ","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","https:\u002F\u002Fgithub.com\u002FTrollz1004\u002FANTIGRAVITY\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FTrollz1004\u002FANTIGRAVITY\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fwebapp-testing\u002FSKILL.md",[191,192],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[194,31,195,196,27,197,198,199,200,201,202,203,38,204,119,205,206],"webapp","webapp testing","applications","debugging","toolkit","logs","browser","playwright","web","behavior","screenshots","local","with",{"skillNo":208,"name":209,"nameZh":6,"description":210,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":211,"sourceHtmlUrl":212,"categories":213,"keywords":214,"publishedAt":46},"01M6CQ5HBDE9Q5WJZXQ7G72MYD","appinsights-instrumentation","Guidance for instrumenting webapps with Azure Application Insights. Provides telemetry patterns, SDK setup, and configuration references. USE FOR: how to instrument app, App Insights SDK, telemetry patterns, what is App Insights, Application Insights guidance, instrumentation examples, APM best practices. DO NOT USE FOR: adding App Insights to my app (use azure-prepare), add telemetry to my project (use azure-prepare), add monitoring (use azure-prepare). This skill provides guidance—azure-prepare orchestrates component changes.","https:\u002F\u002Fgithub.com\u002FTrollz1004\u002FANTIGRAVITY\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fappinsights-instrumentation\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FTrollz1004\u002FANTIGRAVITY\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fappinsights-instrumentation\u002FSKILL.md",[],[215,216,217,218,219,124,220,221,222,223,33,224,225,226,227,228,229,230,231,119],"appinsights instrumentation","instrumentation","do","azure","telemetry","monitoring","references","component","how","apm","sdk setup","app","project","insights","how to","my","add",{"skillNo":233,"name":234,"nameZh":6,"description":235,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":236,"categories":237,"keywords":251,"publishedAt":46},"01M6CQNQ5FNDP6K32RKXQ9X157","youtube-automation","YouTube automation: upload, SEO, thumbnails, scheduling, analytics.","https:\u002F\u002Fgithub.com\u002FTrollz1004\u002FANTIGRAVITY\u002Fblob\u002Fmain\u002Fops\u002Fskills\u002Fyoutube-automation\u002FSKILL.md",[238,241,244,245,248],{"categoryNo":239,"categoryName":240,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000013","分析与可视化",{"categoryNo":242,"categoryName":243,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000019","营销推广",{"categoryNo":167,"categoryName":168,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":246,"categoryName":247,"taxonomyType":140,"taxonomyTypeDesc":141},"01JBSEEDCAT000000000000033","数据分析师",{"categoryNo":249,"categoryName":250,"taxonomyType":140,"taxonomyTypeDesc":141},"01JBSEEDCAT000000000000035","市场营销",[252,253,254,40,255,43,256,257,36,258,35,259,44,260],"automation","youtube","youtube automation","seo","scheduling","thumbnails","analytics","content","upload"]