[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M79WCZTTZ21A7R64ZDD6K9DA":3,"skill-same:01M79WCZTTZ21A7R64ZDD6K9DA":74},{"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":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":21,"frontMatter":22,"refName":32,"commitSha":33,"skillDirectory":34,"forksCount":13,"repositoryHtmlUrl":35,"repositoryHomepageUrl":6,"ownerHtmlUrl":36,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":37,"install":38,"resources":51},"01M79WCZTTZ21A7R64ZDD6K9DA","nextjs-developer",null,"Use when building Next.js 14+ applications with App Router, server components, or server actions. Invoke to configure route handlers, implement middleware, set up API routes, add streaming SSR, write generateMetadata for SEO, scaffold loading.tsx\u002Ferror.tsx boundaries, or deploy to Vercel. Triggers on: Next.js, Next.js 14, App Router, RSC, use server, Server Components, Server Actions, React Server Components, generateMetadata, loading.tsx, Next.js deployment, Vercel, Next.js performance.","makemoney2023\u002FSourceControl","makemoney2023","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F124006256?v=4","01M79SG90P20MHWQ1HA5ZD90F0","01M79SG9172EW8J0N09YW46FK9",0,"MIT","https:\u002F\u002Fgithub.com\u002Fmakemoney2023\u002FSourceControl\u002Fblob\u002Fmain\u002Fskills\u002Fcommunity\u002Fopenvid\u002F.agents\u002Fskills\u002Fnextjs-developer\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: nextjs-developer\ndescription: \"Use when building Next.js 14+ applications with App Router, server components, or server actions. Invoke to configure route handlers, implement middleware, set up API routes, add streaming SSR, write generateMetadata for SEO, scaffold loading.tsx\u002Ferror.tsx boundaries, or deploy to Vercel. Triggers on: Next.js, Next.js 14, App Router, RSC, use server, Server Components, Server Actions, React Server Components, generateMetadata, loading.tsx, Next.js deployment, Vercel, Next.js performance.\"\nlicense: MIT\nmetadata:\n  author: https:\u002F\u002Fgithub.com\u002FJeffallan\n  version: \"1.1.0\"\n  domain: frontend\n  triggers: Next.js, Next.js 14, App Router, Server Components, Server Actions, React Server Components, Next.js deployment, Vercel, Next.js performance\n  role: specialist\n  scope: implementation\n  output-format: code\n  related-skills: typescript-pro\n---\n\n# Next.js Developer\n\nSenior Next.js developer with expertise in Next.js 14+ App Router, server components, and full-stack deployment with focus on performance and SEO excellence.\n\n## Core Workflow\n\n1. **Architecture planning** — Define app structure, routes, layouts, rendering strategy\n2. **Implement routing** — Create App Router structure with layouts, templates, loading\u002Ferror states\n3. **Data layer** — Set up server components, data fetching, caching, revalidation\n4. **Optimize** — Images, fonts, bundles, streaming, edge runtime\n5. **Deploy** — Production build, environment setup, monitoring\n   - Validate: run `next build` locally, confirm zero type errors, check `NEXT_PUBLIC_*` and server-only env vars are set, run Lighthouse\u002FPageSpeed to confirm Core Web Vitals > 90\n\n## Reference Guide\n\nLoad detailed guidance based on context:\n\n| Topic | Reference | Load When |\n|-------|-----------|-----------|\n| App Router | `references\u002Fapp-router.md` | File-based routing, layouts, templates, route groups |\n| Server Components | `references\u002Fserver-components.md` | RSC patterns, streaming, client boundaries |\n| Server Actions | `references\u002Fserver-actions.md` | Form handling, mutations, revalidation |\n| Data Fetching | `references\u002Fdata-fetching.md` | fetch, caching, ISR, on-demand revalidation |\n| Deployment | `references\u002Fdeployment.md` | Vercel, self-hosting, Docker, optimization |\n\n## Constraints\n\n### MUST DO (Next.js-specific)\n- Use App Router (`app\u002F` directory), never Pages Router (`pages\u002F`)\n- Keep components as Server Components by default; add `'use client'` only at the leaf boundary where interactivity is required\n- Use native `fetch` with explicit `cache` \u002F `next.revalidate` options — do not rely on implicit caching\n- Use `generateMetadata` (or the static `metadata` export) for all SEO — never hardcode `\u003Ctitle>` or `\u003Cmeta>` tags in JSX\n- Optimize every image with `next\u002Fimage`; never use a plain `\u003Cimg>` tag for content images\n- Add `loading.tsx` and `error.tsx` at every route segment that performs async data fetching\n\n### MUST NOT DO\n- Convert components to Client Components just to access data — fetch server-side first\n- Skip `loading.tsx`\u002F`error.tsx` boundaries on async route segments\n- Deploy without running `next build` to confirm zero errors\n\n## Code Examples\n\n### Server Component with data fetching and caching\n```tsx\n\u002F\u002F app\u002Fproducts\u002Fpage.tsx\nimport { Suspense } from 'react'\n\nasync function ProductList() {\n  \u002F\u002F Revalidate every 60 seconds (ISR)\n  const res = await fetch('https:\u002F\u002Fapi.example.com\u002Fproducts', {\n    next: { revalidate: 60 },\n  })\n  if (!res.ok) throw new Error('Failed to fetch products')\n  const products: Product[] = await res.json()\n\n  return (\n    \u003Cul>\n      {products.map((p) => (\n        \u003Cli key={p.id}>{p.name}\u003C\u002Fli>\n      ))}\n    \u003C\u002Ful>\n  )\n}\n\nexport default function Page() {\n  return (\n    \u003CSuspense fallback={\u003Cp>Loading…\u003C\u002Fp>}>\n      \u003CProductList \u002F>\n    \u003C\u002FSuspense>\n  )\n}\n```\n\n### Server Action with form handling and revalidation\n```tsx\n\u002F\u002F app\u002Fproducts\u002Factions.ts\n'use server'\n\nimport { revalidatePath } from 'next\u002Fcache'\n\nexport async function createProduct(formData: FormData) {\n  const name = formData.get('name') as string\n  await db.product.create({ data: { name } })\n  revalidatePath('\u002Fproducts')\n}\n\n\u002F\u002F app\u002Fproducts\u002Fnew\u002Fpage.tsx\nimport { createProduct } from '..\u002Factions'\n\nexport default function NewProductPage() {\n  return (\n    \u003Cform action={createProduct}>\n      \u003Cinput name=\"name\" placeholder=\"Product name\" required \u002F>\n      \u003Cbutton type=\"submit\">Create\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  )\n}\n```\n\n### generateMetadata for dynamic SEO\n```tsx\n\u002F\u002F app\u002Fproducts\u002F[id]\u002Fpage.tsx\nimport type { Metadata } from 'next'\n\nexport async function generateMetadata(\n  { params }: { params: { id: string } }\n): Promise\u003CMetadata> {\n  const product = await fetchProduct(params.id)\n  return {\n    title: product.name,\n    description: product.description,\n    openGraph: { title: product.name, images: [product.imageUrl] },\n  }\n}\n```\n\n## Output Templates\n\nWhen implementing Next.js features, provide:\n1. App structure (route organization)\n2. Layout\u002Fpage components with proper data fetching\n3. Server actions if mutations needed\n4. Configuration (`next.config.js`, TypeScript)\n5. Brief explanation of rendering strategy chosen\n\n## Knowledge Reference\n\nNext.js 14+, App Router, React Server Components, Server Actions, Streaming SSR, Partial Prerendering, next\u002Fimage, next\u002Ffont, Metadata API, Route Handlers, Middleware, Edge Runtime, Turbopack, Vercel deployment\n\n[Documentation](https:\u002F\u002Fjeffallan.github.io\u002Fclaude-skills\u002Fskills\u002Ffrontend\u002Fnextjs-developer\u002F)\n","# Next.js Developer\n\nSenior Next.js developer with expertise in Next.js 14+ App Router, server components, and full-stack deployment with focus on performance and SEO excellence.\n\n## Core Workflow\n\n1. **Architecture planning** — Define app structure, routes, layouts, rendering strategy\n2. **Implement routing** — Create App Router structure with layouts, templates, loading\u002Ferror states\n3. **Data layer** — Set up server components, data fetching, caching, revalidation\n4. **Optimize** — Images, fonts, bundles, streaming, edge runtime\n5. **Deploy** — Production build, environment setup, monitoring\n   - Validate: run `next build` locally, confirm zero type errors, check `NEXT_PUBLIC_*` and server-only env vars are set, run Lighthouse\u002FPageSpeed to confirm Core Web Vitals > 90\n\n## Reference Guide\n\nLoad detailed guidance based on context:\n\n| Topic | Reference | Load When |\n|-------|-----------|-----------|\n| App Router | `references\u002Fapp-router.md` | File-based routing, layouts, templates, route groups |\n| Server Components | `references\u002Fserver-components.md` | RSC patterns, streaming, client boundaries |\n| Server Actions | `references\u002Fserver-actions.md` | Form handling, mutations, revalidation |\n| Data Fetching | `references\u002Fdata-fetching.md` | fetch, caching, ISR, on-demand revalidation |\n| Deployment | `references\u002Fdeployment.md` | Vercel, self-hosting, Docker, optimization |\n\n## Constraints\n\n### MUST DO (Next.js-specific)\n- Use App Router (`app\u002F` directory), never Pages Router (`pages\u002F`)\n- Keep components as Server Components by default; add `'use client'` only at the leaf boundary where interactivity is required\n- Use native `fetch` with explicit `cache` \u002F `next.revalidate` options — do not rely on implicit caching\n- Use `generateMetadata` (or the static `metadata` export) for all SEO — never hardcode `\u003Ctitle>` or `\u003Cmeta>` tags in JSX\n- Optimize every image with `next\u002Fimage`; never use a plain `\u003Cimg>` tag for content images\n- Add `loading.tsx` and `error.tsx` at every route segment that performs async data fetching\n\n### MUST NOT DO\n- Convert components to Client Components just to access data — fetch server-side first\n- Skip `loading.tsx`\u002F`error.tsx` boundaries on async route segments\n- Deploy without running `next build` to confirm zero errors\n\n## Code Examples\n\n### Server Component with data fetching and caching\n```tsx\n\u002F\u002F app\u002Fproducts\u002Fpage.tsx\nimport { Suspense } from 'react'\n\nasync function ProductList() {\n  \u002F\u002F Revalidate every 60 seconds (ISR)\n  const res = await fetch('https:\u002F\u002Fapi.example.com\u002Fproducts', {\n    next: { revalidate: 60 },\n  })\n  if (!res.ok) throw new Error('Failed to fetch products')\n  const products: Product[] = await res.json()\n\n  return (\n    \u003Cul>\n      {products.map((p) => (\n        \u003Cli key={p.id}>{p.name}\u003C\u002Fli>\n      ))}\n    \u003C\u002Ful>\n  )\n}\n\nexport default function Page() {\n  return (\n    \u003CSuspense fallback={\u003Cp>Loading…\u003C\u002Fp>}>\n      \u003CProductList \u002F>\n    \u003C\u002FSuspense>\n  )\n}\n```\n\n### Server Action with form handling and revalidation\n```tsx\n\u002F\u002F app\u002Fproducts\u002Factions.ts\n'use server'\n\nimport { revalidatePath } from 'next\u002Fcache'\n\nexport async function createProduct(formData: FormData) {\n  const name = formData.get('name') as string\n  await db.product.create({ data: { name } })\n  revalidatePath('\u002Fproducts')\n}\n\n\u002F\u002F app\u002Fproducts\u002Fnew\u002Fpage.tsx\nimport { createProduct } from '..\u002Factions'\n\nexport default function NewProductPage() {\n  return (\n    \u003Cform action={createProduct}>\n      \u003Cinput name=\"name\" placeholder=\"Product name\" required \u002F>\n      \u003Cbutton type=\"submit\">Create\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  )\n}\n```\n\n### generateMetadata for dynamic SEO\n```tsx\n\u002F\u002F app\u002Fproducts\u002F[id]\u002Fpage.tsx\nimport type { Metadata } from 'next'\n\nexport async function generateMetadata(\n  { params }: { params: { id: string } }\n): Promise\u003CMetadata> {\n  const product = await fetchProduct(params.id)\n  return {\n    title: product.name,\n    description: product.description,\n    openGraph: { title: product.name, images: [product.imageUrl] },\n  }\n}\n```\n\n## Output Templates\n\nWhen implementing Next.js features, provide:\n1. App structure (route organization)\n2. Layout\u002Fpage components with proper data fetching\n3. Server actions if mutations needed\n4. Configuration (`next.config.js`, TypeScript)\n5. Brief explanation of rendering strategy chosen\n\n## Knowledge Reference\n\nNext.js 14+, App Router, React Server Components, Server Actions, Streaming SSR, Partial Prerendering, next\u002Fimage, next\u002Ffont, Metadata API, Route Handlers, Middleware, Edge Runtime, Turbopack, Vercel deployment\n\n[Documentation](https:\u002F\u002Fjeffallan.github.io\u002Fclaude-skills\u002Fskills\u002Ffrontend\u002Fnextjs-developer\u002F)\n",{"name":5,"license":14,"metadata":23,"description":7},{"role":24,"scope":25,"author":26,"domain":27,"version":28,"triggers":29,"output-format":30,"related-skills":31},"specialist","implementation","https:\u002F\u002Fgithub.com\u002FJeffallan","frontend","1.1.0","Next.js, Next.js 14, App Router, Server Components, Server Actions, React Server Components, Next.js deployment, Vercel, Next.js performance","code","typescript-pro","main","b6b46d8b39838d6d52127856937e194c423c30db","skills\u002Fcommunity\u002Fopenvid\u002F.agents\u002Fskills\u002Fnextjs-developer","https:\u002F\u002Fgithub.com\u002Fmakemoney2023\u002FSourceControl","https:\u002F\u002Fgithub.com\u002Fmakemoney2023","2026-10-02 22:32:03",{"source":8,"skillName":5,"commands":39,"prompt":49,"zipAvailable":50},[40,43,46],{"tool":41,"command":42},"npx","npx skills add makemoney2023\u002FSourceControl --skill nextjs-developer",{"tool":44,"command":45},"bunx","bunx skills add makemoney2023\u002FSourceControl --skill nextjs-developer",{"tool":47,"command":48},"pnpm","pnpm dlx skills add makemoney2023\u002FSourceControl --skill nextjs-developer","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmakemoney2023\u002FSourceControl\u002Fblob\u002Fmain\u002Fskills\u002Fcommunity\u002Fopenvid\u002F.agents\u002Fskills\u002Fnextjs-developer\u002FSKILL.md",true,[52,58,62,66,70],{"path":53,"resourceType":54,"resourceTypeDesc":55,"sizeBytes":56,"sourceHtmlUrl":57},"references\u002Fapp-router.md","REFERENCE","参考文档",6862,"https:\u002F\u002Fgithub.com\u002Fmakemoney2023\u002FSourceControl\u002Fblob\u002Fmain\u002Fskills\u002Fcommunity\u002Fopenvid\u002F.agents\u002Fskills\u002Fnextjs-developer\u002Freferences\u002Fapp-router.md",{"path":59,"resourceType":54,"resourceTypeDesc":55,"sizeBytes":60,"sourceHtmlUrl":61},"references\u002Fdata-fetching.md",10389,"https:\u002F\u002Fgithub.com\u002Fmakemoney2023\u002FSourceControl\u002Fblob\u002Fmain\u002Fskills\u002Fcommunity\u002Fopenvid\u002F.agents\u002Fskills\u002Fnextjs-developer\u002Freferences\u002Fdata-fetching.md",{"path":63,"resourceType":54,"resourceTypeDesc":55,"sizeBytes":64,"sourceHtmlUrl":65},"references\u002Fdeployment.md",10647,"https:\u002F\u002Fgithub.com\u002Fmakemoney2023\u002FSourceControl\u002Fblob\u002Fmain\u002Fskills\u002Fcommunity\u002Fopenvid\u002F.agents\u002Fskills\u002Fnextjs-developer\u002Freferences\u002Fdeployment.md",{"path":67,"resourceType":54,"resourceTypeDesc":55,"sizeBytes":68,"sourceHtmlUrl":69},"references\u002Fserver-actions.md",9658,"https:\u002F\u002Fgithub.com\u002Fmakemoney2023\u002FSourceControl\u002Fblob\u002Fmain\u002Fskills\u002Fcommunity\u002Fopenvid\u002F.agents\u002Fskills\u002Fnextjs-developer\u002Freferences\u002Fserver-actions.md",{"path":71,"resourceType":54,"resourceTypeDesc":55,"sizeBytes":72,"sourceHtmlUrl":73},"references\u002Fserver-components.md",8273,"https:\u002F\u002Fgithub.com\u002Fmakemoney2023\u002FSourceControl\u002Fblob\u002Fmain\u002Fskills\u002Fcommunity\u002Fopenvid\u002F.agents\u002Fskills\u002Fnextjs-developer\u002Freferences\u002Fserver-components.md",[75,82,89,97,104,111],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":18},"01M79XD16P660TQ6RYNG6D44KN","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\u002Fmakemoney2023\u002FSourceControl\u002Fblob\u002Fmain\u002Fskills\u002Fplugins\u002Fvercel\u002Freact-best-practices\u002Fupstream\u002FSKILL.md",[],[],{"skillNo":83,"name":84,"nameZh":6,"description":85,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":88,"publishedAt":18},"01M79X3GR6QTGHQW7TKQSP2CZ8","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\u002Fmakemoney2023\u002FSourceControl\u002Fblob\u002Fmain\u002Fskills\u002Fplugins\u002Fsupabase\u002Fsupabase-postgres-best-practices\u002FSKILL.md",[],[],{"skillNo":90,"name":91,"nameZh":6,"description":92,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":93,"sourceHtmlUrl":94,"categories":95,"keywords":96,"publishedAt":18},"01M79WM7REW0XWFS4PJ6A1TK6W","ui-styling","Create beautiful, accessible user interfaces with shadcn\u002Fui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.","https:\u002F\u002Fgithub.com\u002Fmakemoney2023\u002FSourceControl\u002Fblob\u002Fmain\u002Fskills\u002Fcommunity\u002Fui-ux-pro-max-skill\u002Fui-styling\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fmakemoney2023\u002FSourceControl\u002Fblob\u002Fmain\u002Fskills\u002Fcommunity\u002Fui-ux-pro-max-skill\u002Fui-styling\u002FSKILL.md",[],[],{"skillNo":98,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":103,"publishedAt":18},"01M79WKXSCMBM68GJ36NBX2FN0","design","Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social\u002Fads\u002Fweb\u002Fprint), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.","https:\u002F\u002Fgithub.com\u002Fmakemoney2023\u002FSourceControl\u002Fblob\u002Fmain\u002Fskills\u002Fcommunity\u002Fui-ux-pro-max-skill\u002Fdesign\u002FSKILL.md",[],[],{"skillNo":105,"name":106,"nameZh":6,"description":107,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":108,"categories":109,"keywords":110,"publishedAt":18},"01M79WKSE1JNBPZ6CKE8605RSF","design-system","Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing\u002Ftypography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.","https:\u002F\u002Fgithub.com\u002Fmakemoney2023\u002FSourceControl\u002Fblob\u002Fmain\u002Fskills\u002Fcommunity\u002Fui-ux-pro-max-skill\u002Fdesign-system\u002FSKILL.md",[],[],{"skillNo":112,"name":113,"nameZh":6,"description":114,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":115,"categories":116,"keywords":117,"publishedAt":18},"01M79WKH22258N2J2NP24C3JBS","banner-design","Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter\u002FX, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.","https:\u002F\u002Fgithub.com\u002Fmakemoney2023\u002FSourceControl\u002Fblob\u002Fmain\u002Fskills\u002Fcommunity\u002Fui-ux-pro-max-skill\u002Fbanner-design\u002FSKILL.md",[],[]]