[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EEPFG9QESQPC335ZWB3GY0":3,"skill-same:01M6EEPFG9QESQPC335ZWB3GY0":51},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":20,"frontMatter":21,"refName":22,"commitSha":23,"skillDirectory":24,"forksCount":25,"repositoryHtmlUrl":26,"repositoryHomepageUrl":27,"ownerHtmlUrl":28,"ownerBlogUrl":6,"ownerDescription":29,"updatedAt":30,"install":31,"resources":44},"01M6EEPFG9QESQPC335ZWB3GY0","contentful",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fcontentful\u002FSKILL.md",[],[5],"2026-11-10 10:12:30",false,"# Contentful — Enterprise Headless CMS\n\nYou are an expert in Contentful, the API-first content platform for enterprise teams. You help developers integrate Contentful's Content Delivery API (CDN-backed, read), Content Management API (write), and Content Preview API (draft content) into websites and apps — using typed content models, localization, rich text rendering, image transformations, and webhooks for build triggers.\n\n## Core Capabilities\n\n### Content Delivery API\n\n```typescript\n\u002F\u002F src\u002Flib\u002Fcontentful.ts — Contentful client setup\nimport { createClient, type Entry, type Asset } from \"contentful\";\n\nconst client = createClient({\n  space: process.env.CONTENTFUL_SPACE_ID!,\n  accessToken: process.env.CONTENTFUL_DELIVERY_TOKEN!,\n  \u002F\u002F For draft preview:\n  \u002F\u002F accessToken: process.env.CONTENTFUL_PREVIEW_TOKEN,\n  \u002F\u002F host: \"preview.contentful.com\",\n});\n\n\u002F\u002F TypeScript interfaces matching content model\ninterface BlogPostFields {\n  title: string;\n  slug: string;\n  excerpt: string;\n  body: Document;                         \u002F\u002F Rich Text\n  featuredImage: Asset;\n  author: Entry\u003CAuthorFields>;\n  tags: string[];\n  publishDate: string;\n}\n\n\u002F\u002F Fetch entries with type safety\nasync function getBlogPosts(limit = 10): Promise\u003CEntry\u003CBlogPostFields>[]> {\n  const response = await client.getEntries\u003CBlogPostFields>({\n    content_type: \"blogPost\",\n    order: [\"-fields.publishDate\"],\n    limit,\n    include: 2,                           \u002F\u002F Resolve 2 levels of linked entries\n    \"fields.slug[exists]\": true,          \u002F\u002F Only entries with slug\n  });\n  return response.items;\n}\n\nasync function getBlogPostBySlug(slug: string) {\n  const response = await client.getEntries\u003CBlogPostFields>({\n    content_type: \"blogPost\",\n    \"fields.slug\": slug,\n    include: 3,\n    limit: 1,\n  });\n  return response.items[0] || null;\n}\n```\n\n### Rich Text Rendering\n\n```tsx\n\u002F\u002F src\u002Fcomponents\u002FRichTextRenderer.tsx — Render Contentful rich text\nimport { documentToReactComponents, Options } from \"@contentful\u002Frich-text-react-renderer\";\nimport { BLOCKS, INLINES, Document } from \"@contentful\u002Frich-text-types\";\nimport Image from \"next\u002Fimage\";\n\nconst renderOptions: Options = {\n  renderNode: {\n    [BLOCKS.EMBEDDED_ASSET]: (node) => {\n      const { title, file } = node.data.target.fields;\n      return (\n        \u003CImage\n          src={`https:${file.url}`}\n          alt={title}\n          width={file.details.image.width}\n          height={file.details.image.height}\n          className=\"rounded-lg my-6\"\n        \u002F>\n      );\n    },\n    [BLOCKS.EMBEDDED_ENTRY]: (node) => {\n      const entry = node.data.target;\n      if (entry.sys.contentType.sys.id === \"codeBlock\") {\n        return (\n          \u003Cpre className=\"bg-gray-900 p-4 rounded-lg overflow-x-auto\">\n            \u003Ccode className={`language-${entry.fields.language}`}>\n              {entry.fields.code}\n            \u003C\u002Fcode>\n          \u003C\u002Fpre>\n        );\n      }\n      return null;\n    },\n    [INLINES.HYPERLINK]: (node, children) => (\n      \u003Ca href={node.data.uri} className=\"text-blue-600 underline\" target=\"_blank\" rel=\"noopener\">\n        {children}\n      \u003C\u002Fa>\n    ),\n  },\n};\n\nexport function RichText({ document }: { document: Document }) {\n  return \u003Cdiv className=\"prose max-w-none\">{documentToReactComponents(document, renderOptions)}\u003C\u002Fdiv>;\n}\n```\n\n### Image Transformations\n\n```tsx\n\u002F\u002F Contentful Images API — resize, crop, format on the fly\nfunction contentfulImageUrl(asset: Asset, options?: {\n  width?: number;\n  height?: number;\n  quality?: number;\n  format?: \"webp\" | \"avif\" | \"jpg\" | \"png\";\n  fit?: \"pad\" | \"fill\" | \"scale\" | \"crop\" | \"thumb\";\n  focus?: \"face\" | \"center\" | \"top\" | \"bottom\";\n}) {\n  const url = new URL(`https:${asset.fields.file.url}`);\n  if (options?.width) url.searchParams.set(\"w\", String(options.width));\n  if (options?.height) url.searchParams.set(\"h\", String(options.height));\n  if (options?.quality) url.searchParams.set(\"q\", String(options.quality));\n  if (options?.format) url.searchParams.set(\"fm\", options.format);\n  if (options?.fit) url.searchParams.set(\"fit\", options.fit);\n  if (options?.focus) url.searchParams.set(\"f\", options.focus);\n  return url.toString();\n}\n\n\u002F\u002F Usage: auto-optimize for web\n\u003CImage\n  src={contentfulImageUrl(post.fields.featuredImage, {\n    width: 800,\n    format: \"webp\",\n    quality: 80,\n  })}\n  alt={post.fields.title}\n\u002F>\n```\n\n## Installation\n\n```bash\nnpm install contentful                     # Delivery SDK\nnpm install @contentful\u002Frich-text-react-renderer  # Rich text → React\nnpm install contentful-management          # Management API (write)\n```\n\n## Best Practices\n\n1. **Delivery API for reads** — Use CDN-backed Delivery API for production; Preview API only for draft preview\n2. **Type generation** — Use `contentful-typescript-codegen` to generate TypeScript types from your content model\n3. **Rich text renderer** — Always use `@contentful\u002Frich-text-react-renderer` with custom renderers for embedded assets and entries\n4. **Image API** — Transform images on the fly with URL params; serve WebP with quality 80 for 70% size reduction\n5. **Webhooks for builds** — Configure webhooks to trigger Vercel\u002FNetlify builds on publish; ISR for immediate updates\n6. **Localization** — Set up locales in Contentful; fetch with `locale: \"de\"` or `locale: \"*\"` for all locales\n7. **Include depth** — Set `include: 2-3` to resolve linked entries; avoids N+1 queries for related content\n8. **Environment branching** — Use Contentful Environments (like Git branches) for content model changes; merge to master when ready\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002FTerminalSkills\u002Fskills\u002Fcontentful",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":32,"prompt":42,"zipAvailable":43},[33,36,39],{"tool":34,"command":35},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill contentful",{"tool":37,"command":38},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill contentful",{"tool":40,"command":41},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill contentful","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fcontentful\u002FSKILL.md",true,[45],{"path":46,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":49,"sourceHtmlUrl":50},"scripts\u002Fledger-check.ts","SCRIPT","脚本",3822,"https:\u002F\u002Fgithub.com\u002FfpcMotif\u002Fnix-darwin\u002Fblob\u002Fmain\u002Fmodules\u002Fhome\u002Fskills\u002Fpersonal\u002Fverified-architecture-review\u002Fscripts\u002Fledger-check.ts",[52,66,76,85,91,98],{"skillNo":53,"name":54,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":55,"categories":56,"keywords":62,"publishedAt":18},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[57],{"categoryNo":58,"categoryName":59,"taxonomyType":60,"taxonomyTypeDesc":61},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[63,64,65],"model","model hierarchy","model hierarchy skill",{"skillNo":67,"name":68,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":69,"categories":70,"keywords":72,"publishedAt":18},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[71],{"categoryNo":58,"categoryName":59,"taxonomyType":60,"taxonomyTypeDesc":61},[73,74,75],"MCP","zoom","zoom mcp",{"skillNo":77,"name":78,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":18},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[82,83,84,74],"sdk","zoom apps sdk","apps",{"skillNo":86,"name":87,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":90,"publishedAt":18},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[87],{"skillNo":92,"name":93,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":97,"publishedAt":18},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[96],{"categoryNo":58,"categoryName":59,"taxonomyType":60,"taxonomyTypeDesc":61},[93],{"skillNo":99,"name":100,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":103,"publishedAt":18},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[100]]