[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6RC2EQSWD7R5QM5BYPP4HH7":3,"skill-same:01M6RC2EQSWD7R5QM5BYPP4HH7":115},{"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":37,"publishedAt":58,"linkOnly":59,"markdownContent":60,"markdownBody":61,"frontMatter":62,"refName":71,"commitSha":72,"skillDirectory":73,"forksCount":74,"repositoryHtmlUrl":75,"repositoryHomepageUrl":6,"ownerHtmlUrl":76,"ownerBlogUrl":77,"ownerDescription":6,"updatedAt":78,"install":79,"resources":92},"01M6RC2EQSWD7R5QM5BYPP4HH7","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.","PIXARTSeu\u002FSynapse","PIXARTSeu","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F274446381?v=4","01M6RB4XPN9YBZCRY4FVN9PJCT","Pixarts ","01M6RB4XTF8G9KHQEMC21FGDKD",12,"MIT","https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fnextjs-developer\u002FSKILL.md",[18,23,26,29,34],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000019","营销推广",{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",{"categoryNo":35,"categoryName":36,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000035","市场营销",[38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57],"nextjs developer","developer","nextjs","seo","invoke","for","Server Components","app","deploy to vercel","tsx","router","write","frontend","actions","server","streaming","deployment","react","components","typescript","2026-11-10 10:12:30",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","# 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",{"name":5,"license":15,"metadata":63,"description":7},{"role":64,"scope":65,"author":66,"domain":50,"version":67,"triggers":68,"output-format":69,"related-skills":70},"specialist","implementation","https:\u002F\u002Fgithub.com\u002FJeffallan","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","c19c0bc0a04d25a849ce749fe88250e688f06437",".agents\u002Fskills\u002Fnextjs-developer",1,"https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse","https:\u002F\u002Fgithub.com\u002FPIXARTSeu","https:\u002F\u002Fpixarts.eu\u002F","2026-09-24 06:30:45",{"source":8,"skillName":5,"commands":80,"prompt":90,"zipAvailable":91},[81,84,87],{"tool":82,"command":83},"npx","npx skills add PIXARTSeu\u002FSynapse --skill nextjs-developer",{"tool":85,"command":86},"bunx","bunx skills add PIXARTSeu\u002FSynapse --skill nextjs-developer",{"tool":88,"command":89},"pnpm","pnpm dlx skills add PIXARTSeu\u002FSynapse --skill nextjs-developer","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fnextjs-developer\u002FSKILL.md",true,[93,99,103,107,111],{"path":94,"resourceType":95,"resourceTypeDesc":96,"sizeBytes":97,"sourceHtmlUrl":98},"references\u002Fapp-router.md","REFERENCE","参考文档",6862,"https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fnextjs-developer\u002Freferences\u002Fapp-router.md",{"path":100,"resourceType":95,"resourceTypeDesc":96,"sizeBytes":101,"sourceHtmlUrl":102},"references\u002Fdata-fetching.md",10389,"https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fnextjs-developer\u002Freferences\u002Fdata-fetching.md",{"path":104,"resourceType":95,"resourceTypeDesc":96,"sizeBytes":105,"sourceHtmlUrl":106},"references\u002Fdeployment.md",10647,"https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fnextjs-developer\u002Freferences\u002Fdeployment.md",{"path":108,"resourceType":95,"resourceTypeDesc":96,"sizeBytes":109,"sourceHtmlUrl":110},"references\u002Fserver-actions.md",9658,"https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fnextjs-developer\u002Freferences\u002Fserver-actions.md",{"path":112,"resourceType":95,"resourceTypeDesc":96,"sizeBytes":113,"sourceHtmlUrl":114},"references\u002Fserver-components.md",8273,"https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fnextjs-developer\u002Freferences\u002Fserver-components.md",[116,142,149,174,197,221],{"skillNo":117,"name":118,"nameZh":6,"description":119,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":120,"categories":121,"keywords":124,"publishedAt":58},"01M6X0ECZKGP44NP2JW588B9RG","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\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002Fskills\u002Fvercel-react-best-practices\u002FSKILL.md",[122,123],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},[55,125,126,127,128,129,130,56,131,132,133,69,134,135,136,137,138,139,140,141],"vercel react best practices","best practices","react best practices","vercel","writing","performance","react components","guidelines","tasks","Optimization","data","refactoring","patterns","next","triggers","data fetching","when",{"skillNo":143,"name":118,"nameZh":6,"description":119,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":144,"categories":145,"keywords":148,"publishedAt":58},"01M6X05WCVH879XKZEAQ15PHQX","https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002Fpackages\u002Fcodegraph\u002Fdata\u002Fskill\u002Fvercel-react-best-practices\u002FSKILL.md",[146,147],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},[55,125,126,127,128,129,130,56,131,132,133,69,134,135,136,137,138,139,140,141],{"skillNo":150,"name":151,"nameZh":6,"description":152,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":153,"categories":154,"keywords":157,"publishedAt":58},"01M6WZ286AR2SYE9GZYVW0CNYG","wordpress-pro","Develops custom WordPress themes and plugins, creates and registers Gutenberg blocks and block patterns, configures WooCommerce stores, implements WordPress REST API endpoints, applies security hardening (nonces, sanitization, escaping, capability checks), and optimizes performance through caching and query tuning. Use when building WordPress themes, writing plugins, customizing Gutenberg blocks, extending WooCommerce, working with ACF, using the WordPress REST API, applying hooks and filters, or improving WordPress performance and security.","https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002Fpackages\u002Fcodegraph\u002Fdata\u002Flifecycle-skills\u002Fwordpress-pro\u002FSKILL.md",[155,156],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},[158,159,160,129,161,130,69,162,163,164,165,166,167,168,169,170,171,172,173,141],"wordpress","wordpress pro","pro","security","tuning","api","laravel","reviewer","hooks","filters","expert","query","woocommerce","caching","themes","sanitization",{"skillNo":175,"name":176,"nameZh":6,"description":177,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":178,"categories":179,"keywords":182,"publishedAt":58},"01M6WZ1ZVG6PJ4PVN9RTK0BX7Z","websocket-engineer","Use when building real-time communication systems with WebSockets or Socket.IO. Invoke for bidirectional messaging, horizontal scaling with Redis, presence tracking, room management.","https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002Fpackages\u002Fcodegraph\u002Fdata\u002Flifecycle-skills\u002Fwebsocket-engineer\u002FSKILL.md",[180,181],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},[183,184,185,186,69,187,188,163,165,189,168,190,191,192,193,194,195,196,42,141],"websocket","engineer","websocket engineer","architecture","messaging","monitoring","fastapi","time","scaling","io","communication systems","presence","updates","socket",{"skillNo":198,"name":199,"nameZh":6,"description":200,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":201,"categories":202,"keywords":206,"publishedAt":58},"01M6WZ1G86ZR73H0WNM6CGNRGF","vue-expert","Builds Vue 3 components with Composition API patterns, configures Nuxt 3 SSR\u002FSSG projects, sets up Pinia stores, scaffolds Quasar\u002FCapacitor mobile apps, implements PWA features, and optimises Vite builds. Use when creating Vue 3 applications with Composition API, writing reusable composables, managing state with Pinia, building hybrid mobile apps with Quasar or Capacitor, configuring service workers, or tuning Vite configuration and TypeScript integration.","https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002Fpackages\u002Fcodegraph\u002Fdata\u002Flifecycle-skills\u002Fvue-expert\u002FSKILL.md",[203,204,205],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},[207,168,208,50,129,57,56,209,210,211,212,213,214,48,215,216,217,218,219,220],"vue","vue expert","config","applications","Composition","projects","pinia","use","workers","mobile","reusable","worker","apps","hybrid",{"skillNo":222,"name":223,"nameZh":6,"description":224,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":225,"categories":226,"keywords":229,"publishedAt":58},"01M6WZ1AP3GFCBAMD712X8KRP7","vue-expert-js","Creates Vue 3 components, builds vanilla JS composables, configures Vite projects, and sets up routing and state management using JavaScript only — no TypeScript. Generates JSDoc-typed code with @typedef, @param, and @returns annotations for full type coverage without a TS compiler. Use when building Vue 3 applications with JavaScript only (no TypeScript), when projects require JSDoc-based type hints, when migrating from Vue 2 Options API to Composition API in JS, or when teams prefer vanilla JavaScript, .mjs modules, or need quick prototypes without TypeScript setup.","https:\u002F\u002Fgithub.com\u002FPIXARTSeu\u002FSynapse\u002Fblob\u002Fmain\u002Fpackages\u002Fcodegraph\u002Fdata\u002Flifecycle-skills\u002Fvue-expert-js\u002FSKILL.md",[227,228],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},[207,230,168,231,208,50,57,56,69,163,211,212,232,233,234,235,236,237,238,141],"js","vue expert js","coverage","only","up","modules","options","jsdoc","quick"]