[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71M2Y3XFFASDH8RVMFWV9CC":3,"skill-same:01M71M2Y3XFFASDH8RVMFWV9CC":78},{"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":23,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":55,"commitSha":56,"skillDirectory":57,"forksCount":58,"repositoryHtmlUrl":59,"repositoryHomepageUrl":6,"ownerHtmlUrl":60,"ownerBlogUrl":61,"ownerDescription":62,"updatedAt":63,"install":64,"resources":77},"01M71M2Y3XFFASDH8RVMFWV9CC","apollo-client",null,"Guide for building React applications with Apollo Client 4.x. Use this skill when: (1) setting up Apollo Client in a React project, (2) writing GraphQL queries or mutations with hooks, (3) configuring caching or cache policies, (4) managing local state with reactive variables, (5) troubleshooting Apollo Client errors or performance issues.","iDorgham\u002FWorkspace-Factory","iDorgham","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F136521493?v=4","01M6CNGBDAHE4ARW3YJEF4X2FD","Dorgham","01M71E8H3CXZ7DJX59MTM9JEB2",1,"MIT","https:\u002F\u002Fgithub.com\u002FiDorgham\u002FWorkspace-Factory\u002Fblob\u002Fmaster\u002Ffactory\u002Flibrary\u002Fskills\u002Fofficial_apollographql_apollo_client\u002Fskill.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"apollo client","client","apollo","caching","when","rsc","errors","Variables","react 19","project","local","writing","next","hooks","up","read","Bash","issues","react","performance","2026-11-10 10:56:23",false,"---\nname: apollo-client\ndescription: >\n  Guide for building React applications with Apollo Client 4.x. Use this skill when:\n  (1) setting up Apollo Client in a React project,\n  (2) writing GraphQL queries or mutations with hooks,\n  (3) configuring caching or cache policies,\n  (4) managing local state with reactive variables,\n  (5) troubleshooting Apollo Client errors or performance issues.\nlicense: MIT\ncompatibility: React 18+, React 19 (Suspense\u002FRSC). Works with Next.js, Vite, CRA, and other React frameworks.\nmetadata:\n  author: apollographql\n  version: \"1.0.0\"\nallowed-tools: Bash(npm:*) Bash(npx:*) Bash(node:*) Read Write Edit Glob Grep\n---\n\n# Apollo Client 4.x Guide\n\nApollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Version 4.x brings improved caching, better TypeScript support, and React 19 compatibility.\n\n## Integration Guides\n\nChoose the integration guide that matches your application setup:\n\n- **Client-Side Apps (`references\u002Fintegration_client.md`)** - For client-side React applications without SSR (Vite, Create React App, etc.)\n- **Next.js App Router (`references\u002Fintegration_nextjs.md`)** - For Next.js applications using the App Router with React Server Components\n- **React Router Framework Mode (`references\u002Fintegration_react_router.md`)** - For React Router 7 applications with streaming SSR\n- **TanStack Start (`references\u002Fintegration_tanstack_start.md`)** - For TanStack Start applications with modern routing\n\nEach guide includes installation steps, configuration, and framework-specific patterns optimized for that environment.\n\n## Quick Reference\n\n### Basic Query\n\n```tsx\nimport { gql } from \"@apollo\u002Fclient\";\nimport { useQuery } from \"@apollo\u002Fclient\u002Freact\";\n\nconst GET_USER = gql`\n  query GetUser($id: ID!) {\n    user(id: $id) {\n      id\n      name\n    }\n  }\n`;\n\nfunction UserProfile({ userId }: { userId: string }) {\n  const { loading, error, data, dataState } = useQuery(GET_USER, {\n    variables: { id: userId },\n  });\n\n  if (loading) return \u003Cp>Loading...\u003C\u002Fp>;\n  if (error) return \u003Cp>Error: {error.message}\u003C\u002Fp>;\n\n  \u002F\u002F TypeScript: dataState === \"ready\" provides better type narrowing than just checking data\n  return \u003Cdiv>{data.user.name}\u003C\u002Fdiv>;\n}\n```\n\n### Basic Mutation\n\n```tsx\nimport { gql } from \"@apollo\u002Fclient\";\nimport { useMutation } from \"@apollo\u002Fclient\u002Freact\";\n\nconst CREATE_USER = gql`\n  mutation CreateUser($input: CreateUserInput!) {\n    createUser(input: $input) {\n      id\n      name\n    }\n  }\n`;\n\nfunction CreateUserForm() {\n  const [createUser, { loading, error }] = useMutation(CREATE_USER);\n\n  const handleSubmit = async (name: string) => {\n    await createUser({ variables: { input: { name } } });\n  };\n\n  return \u003Cbutton onClick={() => handleSubmit(\"John\")}>Create User\u003C\u002Fbutton>;\n}\n```\n\n### Suspense Query\n\n```tsx\nimport { Suspense } from \"react\";\nimport { useSuspenseQuery } from \"@apollo\u002Fclient\u002Freact\";\n\nfunction UserProfile({ userId }: { userId: string }) {\n  const { data } = useSuspenseQuery(GET_USER, {\n    variables: { id: userId },\n  });\n\n  return \u003Cdiv>{data.user.name}\u003C\u002Fdiv>;\n}\n\nfunction App() {\n  return (\n    \u003CSuspense fallback={\u003Cp>Loading user...\u003C\u002Fp>}>\n      \u003CUserProfile userId=\"1\" \u002F>\n    \u003C\u002FSuspense>\n  );\n}\n```\n\n## Reference Files\n\nDetailed documentation for specific topics:\n\n- TypeScript Code Generation (`references\u002Ftypescript_codegen.md`) - GraphQL Code Generator setup for type-safe operations\n- Queries (`references\u002Fqueries.md`) - useQuery, useLazyQuery, polling, refetching\n- Suspense Hooks (`references\u002Fsuspense_hooks.md`) - useSuspenseQuery, useBackgroundQuery, useReadQuery, useLoadableQuery\n- Mutations (`references\u002Fmutations.md`) - useMutation, optimistic UI, cache updates\n- Fragments (`references\u002Ffragments.md`) - Fragment colocation, useFragment, useSuspenseFragment, data masking\n- Caching (`references\u002Fcaching.md`) - InMemoryCache, typePolicies, cache manipulation\n- State Management (`references\u002Fstate_management.md`) - Reactive variables, local state\n- Error Handling (`references\u002Ferror_handling.md`) - Error policies, error links, retries\n- Troubleshooting (`references\u002Ftroubleshooting.md`) - Common issues and solutions\n\n## Key Rules\n\n### Query Best Practices\n\n- **Each page should generally only have one query, composed from colocated fragments.** Use `useFragment` or `useSuspenseFragment` in all non-page-components. Use `@defer` to allow slow fields below the fold to stream in later and avoid blocking the page load.\n- **Fragments are for colocation, not reuse.** Each fragment should describe exactly the data needs of a specific component, not be shared across components for common fields. See Fragments reference (`references\u002Ffragments.md`) for details on fragment colocation and data masking.\n- Always handle `loading` and `error` states in UI when using non-suspenseful hooks (`useQuery`, `useLazyQuery`). When using Suspense hooks (`useSuspenseQuery`, `useBackgroundQuery`), React handles this through `\u003CSuspense>` boundaries and error boundaries.\n- Use `fetchPolicy` to control cache behavior per query\n- Use the TypeScript type server to look up documentation for functions and options (Apollo Client has extensive docblocks)\n\n### Mutation Best Practices\n\n- **If the schema permits, mutation return values should return everything necessary to update the cache.** Neither manual updates nor refetching should be necessary.\n- If the mutation response is insufficient, carefully weigh manual cache manipulation vs refetching. Manual updates risk missing server logic. Consider optimistic updates with a granular refetch if needed.\n- Handle errors gracefully in the UI\n- Use `refetchQueries` sparingly (prefer letting the cache update automatically)\n\n### Caching Best Practices\n\n- Configure `keyFields` for types without `id` field\n- Disable normalization by setting `keyFields: false` for types that don't include an identifier and are meant to group related fields under the parent\n- Use `typePolicies` for pagination and computed fields\n- Understand cache normalization to debug issues\n- **Enable data masking (`references\u002Ffragments.md#data-masking`) for all new applications** - it prevents components from accessing fragment data they don't own, enforcing proper data boundaries and preventing over-rendering\n\n### Performance\n\n- Avoid over-fetching with proper field selection\n- Configure appropriate `fetchPolicy` per use case\n- Use `@defer` for incremental delivery of deferred query parts, and `@stream` for streaming list fields (`@stream` available in Apollo Client 4.1+)\n- **Prefer Suspense hooks (`useSuspenseQuery`, `useBackgroundQuery`) in modern applications** for better loading state handling and code simplicity\n\n## Ground Rules\n\n- ALWAYS use Apollo Client 4.x patterns (not v3 or earlier)\n- ALWAYS wrap your app with `ApolloProvider`\n- ALWAYS handle loading and error states when using non-suspenseful hooks\n- PREFER Suspense hooks (`useSuspenseQuery`, `useBackgroundQuery`) in modern applications for better DX\n- NEVER store Apollo Client in React state (use module-level or context)\n- PREFER `cache-first` for read-heavy data, `network-only` for real-time data\n- USE TypeScript for better type safety with GraphQL\n- IMPLEMENT proper cache updates instead of refetching entire queries\n- ADVISE the human steering you to look into Apollo DevTools when collaboratively debugging Apollo Client issues\n","# Apollo Client 4.x Guide\n\nApollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Version 4.x brings improved caching, better TypeScript support, and React 19 compatibility.\n\n## Integration Guides\n\nChoose the integration guide that matches your application setup:\n\n- **Client-Side Apps (`references\u002Fintegration_client.md`)** - For client-side React applications without SSR (Vite, Create React App, etc.)\n- **Next.js App Router (`references\u002Fintegration_nextjs.md`)** - For Next.js applications using the App Router with React Server Components\n- **React Router Framework Mode (`references\u002Fintegration_react_router.md`)** - For React Router 7 applications with streaming SSR\n- **TanStack Start (`references\u002Fintegration_tanstack_start.md`)** - For TanStack Start applications with modern routing\n\nEach guide includes installation steps, configuration, and framework-specific patterns optimized for that environment.\n\n## Quick Reference\n\n### Basic Query\n\n```tsx\nimport { gql } from \"@apollo\u002Fclient\";\nimport { useQuery } from \"@apollo\u002Fclient\u002Freact\";\n\nconst GET_USER = gql`\n  query GetUser($id: ID!) {\n    user(id: $id) {\n      id\n      name\n    }\n  }\n`;\n\nfunction UserProfile({ userId }: { userId: string }) {\n  const { loading, error, data, dataState } = useQuery(GET_USER, {\n    variables: { id: userId },\n  });\n\n  if (loading) return \u003Cp>Loading...\u003C\u002Fp>;\n  if (error) return \u003Cp>Error: {error.message}\u003C\u002Fp>;\n\n  \u002F\u002F TypeScript: dataState === \"ready\" provides better type narrowing than just checking data\n  return \u003Cdiv>{data.user.name}\u003C\u002Fdiv>;\n}\n```\n\n### Basic Mutation\n\n```tsx\nimport { gql } from \"@apollo\u002Fclient\";\nimport { useMutation } from \"@apollo\u002Fclient\u002Freact\";\n\nconst CREATE_USER = gql`\n  mutation CreateUser($input: CreateUserInput!) {\n    createUser(input: $input) {\n      id\n      name\n    }\n  }\n`;\n\nfunction CreateUserForm() {\n  const [createUser, { loading, error }] = useMutation(CREATE_USER);\n\n  const handleSubmit = async (name: string) => {\n    await createUser({ variables: { input: { name } } });\n  };\n\n  return \u003Cbutton onClick={() => handleSubmit(\"John\")}>Create User\u003C\u002Fbutton>;\n}\n```\n\n### Suspense Query\n\n```tsx\nimport { Suspense } from \"react\";\nimport { useSuspenseQuery } from \"@apollo\u002Fclient\u002Freact\";\n\nfunction UserProfile({ userId }: { userId: string }) {\n  const { data } = useSuspenseQuery(GET_USER, {\n    variables: { id: userId },\n  });\n\n  return \u003Cdiv>{data.user.name}\u003C\u002Fdiv>;\n}\n\nfunction App() {\n  return (\n    \u003CSuspense fallback={\u003Cp>Loading user...\u003C\u002Fp>}>\n      \u003CUserProfile userId=\"1\" \u002F>\n    \u003C\u002FSuspense>\n  );\n}\n```\n\n## Reference Files\n\nDetailed documentation for specific topics:\n\n- TypeScript Code Generation (`references\u002Ftypescript_codegen.md`) - GraphQL Code Generator setup for type-safe operations\n- Queries (`references\u002Fqueries.md`) - useQuery, useLazyQuery, polling, refetching\n- Suspense Hooks (`references\u002Fsuspense_hooks.md`) - useSuspenseQuery, useBackgroundQuery, useReadQuery, useLoadableQuery\n- Mutations (`references\u002Fmutations.md`) - useMutation, optimistic UI, cache updates\n- Fragments (`references\u002Ffragments.md`) - Fragment colocation, useFragment, useSuspenseFragment, data masking\n- Caching (`references\u002Fcaching.md`) - InMemoryCache, typePolicies, cache manipulation\n- State Management (`references\u002Fstate_management.md`) - Reactive variables, local state\n- Error Handling (`references\u002Ferror_handling.md`) - Error policies, error links, retries\n- Troubleshooting (`references\u002Ftroubleshooting.md`) - Common issues and solutions\n\n## Key Rules\n\n### Query Best Practices\n\n- **Each page should generally only have one query, composed from colocated fragments.** Use `useFragment` or `useSuspenseFragment` in all non-page-components. Use `@defer` to allow slow fields below the fold to stream in later and avoid blocking the page load.\n- **Fragments are for colocation, not reuse.** Each fragment should describe exactly the data needs of a specific component, not be shared across components for common fields. See Fragments reference (`references\u002Ffragments.md`) for details on fragment colocation and data masking.\n- Always handle `loading` and `error` states in UI when using non-suspenseful hooks (`useQuery`, `useLazyQuery`). When using Suspense hooks (`useSuspenseQuery`, `useBackgroundQuery`), React handles this through `\u003CSuspense>` boundaries and error boundaries.\n- Use `fetchPolicy` to control cache behavior per query\n- Use the TypeScript type server to look up documentation for functions and options (Apollo Client has extensive docblocks)\n\n### Mutation Best Practices\n\n- **If the schema permits, mutation return values should return everything necessary to update the cache.** Neither manual updates nor refetching should be necessary.\n- If the mutation response is insufficient, carefully weigh manual cache manipulation vs refetching. Manual updates risk missing server logic. Consider optimistic updates with a granular refetch if needed.\n- Handle errors gracefully in the UI\n- Use `refetchQueries` sparingly (prefer letting the cache update automatically)\n\n### Caching Best Practices\n\n- Configure `keyFields` for types without `id` field\n- Disable normalization by setting `keyFields: false` for types that don't include an identifier and are meant to group related fields under the parent\n- Use `typePolicies` for pagination and computed fields\n- Understand cache normalization to debug issues\n- **Enable data masking (`references\u002Ffragments.md#data-masking`) for all new applications** - it prevents components from accessing fragment data they don't own, enforcing proper data boundaries and preventing over-rendering\n\n### Performance\n\n- Avoid over-fetching with proper field selection\n- Configure appropriate `fetchPolicy` per use case\n- Use `@defer` for incremental delivery of deferred query parts, and `@stream` for streaming list fields (`@stream` available in Apollo Client 4.1+)\n- **Prefer Suspense hooks (`useSuspenseQuery`, `useBackgroundQuery`) in modern applications** for better loading state handling and code simplicity\n\n## Ground Rules\n\n- ALWAYS use Apollo Client 4.x patterns (not v3 or earlier)\n- ALWAYS wrap your app with `ApolloProvider`\n- ALWAYS handle loading and error states when using non-suspenseful hooks\n- PREFER Suspense hooks (`useSuspenseQuery`, `useBackgroundQuery`) in modern applications for better DX\n- NEVER store Apollo Client in React state (use module-level or context)\n- PREFER `cache-first` for read-heavy data, `network-only` for real-time data\n- USE TypeScript for better type safety with GraphQL\n- IMPLEMENT proper cache updates instead of refetching entire queries\n- ADVISE the human steering you to look into Apollo DevTools when collaboratively debugging Apollo Client issues\n",{"name":5,"license":15,"metadata":49,"description":52,"allowed-tools":53,"compatibility":54},{"author":50,"version":51},"apollographql","1.0.0","Guide for building React applications with Apollo Client 4.x. Use this skill when: (1) setting up Apollo Client in a React project, (2) writing GraphQL queries or mutations with hooks, (3) configuring caching or cache policies, (4) managing local state with reactive variables, (5) troubleshooting Apollo Client errors or performance issues.\n","Bash(npm:*) Bash(npx:*) Bash(node:*) Read Write Edit Glob Grep","React 18+, React 19 (Suspense\u002FRSC). Works with Next.js, Vite, CRA, and other React frameworks.","master","c2e410e11df4d80d885e0ecf0583ef3c926df736","factory\u002Flibrary\u002Fskills\u002Fofficial_apollographql_apollo_client",0,"https:\u002F\u002Fgithub.com\u002FiDorgham\u002FWorkspace-Factory","https:\u002F\u002Fgithub.com\u002FiDorgham","Dorgham.me","hey I'm Dorgham \r\nI code, I create, and AI codes back. \r\nMaybe we can give AI the chance!! now we begin. 🚀🤖\r\n... . . . git commit -m \"Hello, Future\" ","2026-05-04 18:39:09",{"source":8,"skillName":5,"commands":65,"prompt":75,"zipAvailable":76},[66,69,72],{"tool":67,"command":68},"npx","npx skills add iDorgham\u002FWorkspace-Factory --skill apollo-client",{"tool":70,"command":71},"bunx","bunx skills add iDorgham\u002FWorkspace-Factory --skill apollo-client",{"tool":73,"command":74},"pnpm","pnpm dlx skills add iDorgham\u002FWorkspace-Factory --skill apollo-client","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FiDorgham\u002FWorkspace-Factory\u002Fblob\u002Fmaster\u002Ffactory\u002Flibrary\u002Fskills\u002Fofficial_apollographql_apollo_client\u002Fskill.md",true,[],[79,106,128,148,167,190],{"skillNo":80,"name":81,"nameZh":6,"description":82,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":83,"categories":84,"keywords":86,"publishedAt":105},"01M71P8WVBMB2X3D24R0YT0B0E","vercel-react-view-transitions","Guide for implementing smooth, native-feeling animations using React's View Transition API (`\u003CViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter\u002Fexit of components, animate list reorder, implement directional (forward\u002Fback) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.","https:\u002F\u002Fgithub.com\u002FiDorgham\u002FWorkspace-Factory\u002Fblob\u002Fmaster\u002Ffactory\u002Flibrary\u002Fskills\u002Fofficial_vercel_labs_react_view_transitions\u002Fskill.md",[85],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[42,87,88,89,90,91,92,93,94,95,96,97,98,99,28,100,101,102,103,104],"vercel react view transitions","view","react view transitions","vercel","transitions","shared","back","Animation","css","types","states","element","implementing","components","api","route","create","libraries","2026-11-10 13:02:02",{"skillNo":107,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":113,"publishedAt":105},"01M71P8TDGHZ289TSAC5VTG2EW","vercel-react-native-skills","React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.","https:\u002F\u002Fgithub.com\u002FiDorgham\u002FWorkspace-Factory\u002Fblob\u002Fmaster\u002Ffactory\u002Flibrary\u002Fskills\u002Fofficial_vercel_labs_react_native_skills\u002Fskill.md",[112],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[42,114,115,90,116,117,118,43,99,119,28,120,100,121,122,123,124,125,126,127],"react native","native","vercel react native skills","react native skills","modules","apps","tasks","mobile","expo","list","mobile performance","platform","animations","for",{"skillNo":129,"name":130,"nameZh":6,"description":131,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":132,"categories":133,"keywords":135,"publishedAt":105},"01M71P8QK4JF5BYRGYDDGPZQG9","vercel-react-best-practices","React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React\u002FNext.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.","https:\u002F\u002Fgithub.com\u002FiDorgham\u002FWorkspace-Factory\u002Fblob\u002Fmaster\u002Ffactory\u002Flibrary\u002Fskills\u002Fofficial_vercel_labs_react_best_practices\u002Fskill.md",[134],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[42,136,137,90,138,43,35,28,139,120,100,140,141,36,142,143,144,145,146,147],"react best practices","vercel react best practices","best practices","code","data fetching","react components","refactoring","data","patterns","Optimization","guidelines","triggers",{"skillNo":149,"name":150,"nameZh":6,"description":151,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":152,"categories":153,"keywords":155,"publishedAt":105},"01M71P8HVEA70K5N6ZVJCG2ED3","vercel-composition-patterns","React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.","https:\u002F\u002Fgithub.com\u002FiDorgham\u002FWorkspace-Factory\u002Fblob\u002Fmaster\u002Ffactory\u002Flibrary\u002Fskills\u002Fofficial_vercel_labs_composition_patterns\u002Fskill.md",[154],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[156,90,157,144,158,159,32,160,147,161,162,163,28,164,120,100,165,166,101,42],"Composition","composition patterns","vercel composition patterns","react composition patterns","render","boolean","component architecture","use","reusable","architecture","react composition",{"skillNo":168,"name":169,"nameZh":6,"description":170,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":171,"categories":172,"keywords":176,"publishedAt":105},"01M71P60XXKKP222ZFJRG7R373","supabase-postgres-best-practices","Postgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.","https:\u002F\u002Fgithub.com\u002FiDorgham\u002FWorkspace-Factory\u002Fblob\u002Fmaster\u002Ffactory\u002Flibrary\u002Fskills\u002Fofficial_supabase_supabase_postgres_best_practices\u002Fskill.md",[173],{"categoryNo":174,"categoryName":175,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",[177,178,179,180,138,181,182,183,127,145,43,184,185,35,186,163,187,188,189,28],"postgres best practices","supabase","postgres","supabase postgres best practices","categories","postgres performance","advanced","correct","schema","impact","Rules","critical","database",{"skillNo":191,"name":192,"nameZh":6,"description":193,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":194,"categories":195,"keywords":197,"publishedAt":44},"01M71P2ZCEJD0PKC458YTP1FJW","portable-text-serialization","Render and serialize Portable Text to React, Svelte, Vue, Astro, HTML, Markdown, and plain text. Use when implementing Portable Text rendering in any frontend framework, building custom serializers for non-standard block types, converting Portable Text to HTML strings server-side, converting Portable Text to Markdown, extracting plain text from Portable Text, or troubleshooting rendering issues with marks, blocks, lists, or custom types.","https:\u002F\u002Fgithub.com\u002FiDorgham\u002FWorkspace-Factory\u002Fblob\u002Fmaster\u002Ffactory\u002Flibrary\u002Fskills\u002Fofficial_sanity_io_portable_text_serialization\u002Fskill.md",[196],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[198,199,200,201,202,96,203,160,41,99,204,205,28,42,206,207,208,209,210,211],"text","portable text serialization","portable","serialization","extracting","strings","frontend","svelte","sanity","astro","server","markdown","rendering","vue"]