diff --git a/app/components/PackageSkillsCard.vue b/app/components/PackageSkillsCard.vue
new file mode 100644
index 0000000000..5d309afb6e
--- /dev/null
+++ b/app/components/PackageSkillsCard.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { SkillListItem } from '#shared/types'
+
+defineProps<{
+  skills: SkillListItem[]
+  packageName: string
+  version?: string
+}>()
+
+const skillsModal = useModal('skills-modal')
+</script>
+
+<template>
+  <section v-if="skills.length" id="skills" class="scroll-mt-20">
+    <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
+      {{ $t('package.skills.title') }}
+    </h2>
+    <button
+      type="button"
+      class="w-full flex items-center gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-hover transition-colors duration-200"
+      @click="skillsModal.open()"
+    >
+      <span class="i-custom:agent-skills w-4 h-4 shrink-0 text-fg-muted" aria-hidden="true" />
+      <span class="text-fg-muted">{{
+        $t('package.skills.skills_available', { count: skills.length }, skills.length)
+      }}</span>
+    </button>
+  </section>
+</template>
diff --git a/app/components/PackageSkillsModal.vue b/app/components/PackageSkillsModal.vue
new file mode 100644
index 0000000000..bbe2b21cdd
--- /dev/null
+++ b/app/components/PackageSkillsModal.vue
@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import type { SkillListItem } from '#shared/types'
+
+const props = defineProps<{
+  skills: SkillListItem[]
+  packageName: string
+  version?: string
+}>()
+
+function getSkillSourceUrl(skill: SkillListItem): string {
+  const base = `/code/${props.packageName}`
+  const versionPath = props.version ? `/v/${props.version}` : ''
+  return `${base}${versionPath}/skills/${skill.dirName}/SKILL.md`
+}
+
+const expandedSkills = ref<Set<string>>(new Set())
+
+function toggleSkill(dirName: string) {
+  if (expandedSkills.value.has(dirName)) {
+    expandedSkills.value.delete(dirName)
+  } else {
+    expandedSkills.value.add(dirName)
+  }
+  expandedSkills.value = new Set(expandedSkills.value)
+}
+
+type InstallMethod = 'skills-npm' | 'skills-cli'
+const selectedMethod = ref<InstallMethod>('skills-npm')
+
+const baseUrl = computed(() =>
+  typeof window !== 'undefined' ? window.location.origin : 'https://npmx.dev',
+)
+
+const installCommand = computed(() => {
+  if (!props.skills.length) return null
+  return `npx skills add ${baseUrl.value}/${props.packageName}`
+})
+
+const { copied, copy } = useClipboard({ copiedDuring: 2000 })
+const copyCommand = () => installCommand.value && copy(installCommand.value)
+
+function getWarningTooltip(skill: SkillListItem): string | undefined {
+  if (!skill.warnings?.length) return undefined
+  return skill.warnings.map(w => w.message).join(', ')
+}
+</script>
+
+<template>
+  <Modal :modal-title="$t('package.skills.title')" id="skills-modal" class="sm:max-w-2xl">
+    <!-- Install header with tabs -->
+    <div class="flex flex-wrap items-center justify-between gap-2 mb-3">
+      <h3 class="text-xs text-fg-subtle uppercase tracking-wider">
+        {{ $t('package.skills.install') }}
+      </h3>
+      <div
+        class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md"
+        role="tablist"
+        :aria-label="$t('package.skills.installation_method')"
+      >
+        <button
+          role="tab"
+          :aria-selected="selectedMethod === 'skills-npm'"
+          :tabindex="selectedMethod === 'skills-npm' ? 0 : -1"
+          type="button"
+          class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          :class="
+            selectedMethod === 'skills-npm'
+              ? 'bg-bg border-border shadow-sm text-fg'
+              : 'border-transparent text-fg-subtle hover:text-fg'
+          "
+          @click="selectedMethod = 'skills-npm'"
+        >
+          skills-npm
+        </button>
+        <button
+          role="tab"
+          :aria-selected="selectedMethod === 'skills-cli'"
+          :tabindex="selectedMethod === 'skills-cli' ? 0 : -1"
+          type="button"
+          class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          :class="
+            selectedMethod === 'skills-cli'
+              ? 'bg-bg border-border shadow-sm text-fg'
+              : 'border-transparent text-fg-subtle hover:text-fg'
+          "
+          @click="selectedMethod = 'skills-cli'"
+        >
+          skills CLI
+        </button>
+      </div>
+    </div>
+
+    <!-- skills-npm: compatible -->
+    <div
+      v-if="selectedMethod === 'skills-npm'"
+      class="flex items-center justify-between gap-2 px-3 py-2.5 sm:px-4 bg-bg-subtle border border-border rounded-lg mb-5"
+    >
+      <i18n-t keypath="package.skills.compatible_with" tag="span" class="text-sm text-fg-muted">
+        <template #tool>
+          <code class="font-mono text-fg">skills-npm</code>
+        </template>
+      </i18n-t>
+      <a
+        href="/skills-npm"
+        class="inline-flex items-center gap-1 text-xs text-fg-subtle hover:text-fg transition-colors shrink-0"
+      >
+        {{ $t('package.skills.learn_more') }}
+        <span class="i-carbon:arrow-right w-3 h-3" />
+      </a>
+    </div>
+
+    <!-- skills CLI: terminal command -->
+    <div
+      v-else-if="installCommand"
+      class="bg-bg-subtle border border-border rounded-lg overflow-hidden mb-5"
+    >
+      <div class="flex gap-1.5 px-3 pt-2 sm:px-4 sm:pt-3">
+        <span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
+        <span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
+        <span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
+      </div>
+      <div class="px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4 overflow-x-auto">
+        <div class="relative group/cmd">
+          <code class="font-mono text-sm whitespace-nowrap">
+            <span class="text-fg-subtle select-none">$ </span>
+            <span class="text-fg">npx </span>
+            <span class="text-fg-muted">skills add {{ baseUrl }}/{{ packageName }}</span>
+          </code>
+          <button
+            type="button"
+            class="absolute top-0 right-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/cmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            :aria-label="$t('package.get_started.copy_command')"
+            @click.stop="copyCommand"
+          >
+            <span aria-live="polite">{{ copied ? $t('common.copied') : $t('common.copy') }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Skills list -->
+    <div class="flex items-baseline justify-between gap-2 mb-2">
+      <h3 class="text-xs text-fg-subtle uppercase tracking-wider">
+        {{ $t('package.skills.available_skills') }}
+      </h3>
+      <span class="text-xs text-fg-subtle/60">{{ $t('package.skills.click_to_expand') }}</span>
+    </div>
+    <ul class="space-y-0.5 list-none m-0 p-0">
+      <li v-for="skill in skills" :key="skill.dirName">
+        <button
+          type="button"
+          class="w-full flex items-center gap-2 py-1.5 text-start rounded transition-colors hover:bg-bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          :aria-expanded="expandedSkills.has(skill.dirName)"
+          @click="toggleSkill(skill.dirName)"
+        >
+          <span
+            class="i-carbon:chevron-right w-3 h-3 text-fg-subtle shrink-0 transition-transform duration-200"
+            :class="{ 'rotate-90': expandedSkills.has(skill.dirName) }"
+            aria-hidden="true"
+          />
+          <span class="font-mono text-sm text-fg-muted">{{ skill.name }}</span>
+          <span
+            v-if="skill.warnings?.length"
+            class="i-carbon:warning w-3.5 h-3.5 text-amber-500 shrink-0"
+            :title="getWarningTooltip(skill)"
+          />
+        </button>
+
+        <!-- Expandable details -->
+        <div
+          class="grid transition-[grid-template-rows] duration-200 ease-out"
+          :class="expandedSkills.has(skill.dirName) ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'"
+        >
+          <div class="overflow-hidden">
+            <div class="ps-5.5 pe-2 pb-2 pt-1 space-y-1.5">
+              <!-- Description -->
+              <p v-if="skill.description" class="text-sm text-fg-subtle">
+                {{ skill.description }}
+              </p>
+              <p v-else class="text-sm text-fg-subtle/50 italic">
+                {{ $t('package.skills.no_description') }}
+              </p>
+
+              <!-- File counts & warnings -->
+              <div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
+                <span v-if="skill.fileCounts?.scripts" class="text-fg-subtle">
+                  <span class="i-carbon:script size-3 inline-block align-[-2px] me-0.5" />{{
+                    $t(
+                      'package.skills.file_counts.scripts',
+                      { count: skill.fileCounts.scripts },
+                      skill.fileCounts.scripts,
+                    )
+                  }}
+                </span>
+                <span v-if="skill.fileCounts?.references" class="text-fg-subtle">
+                  <span class="i-carbon:document size-3 inline-block align-[-2px] me-0.5" />{{
+                    $t(
+                      'package.skills.file_counts.refs',
+                      { count: skill.fileCounts.references },
+                      skill.fileCounts.references,
+                    )
+                  }}
+                </span>
+                <span v-if="skill.fileCounts?.assets" class="text-fg-subtle">
+                  <span class="i-carbon:image size-3 inline-block align-[-2px] me-0.5" />{{
+                    $t(
+                      'package.skills.file_counts.assets',
+                      { count: skill.fileCounts.assets },
+                      skill.fileCounts.assets,
+                    )
+                  }}
+                </span>
+                <template v-for="warning in skill.warnings" :key="warning.message">
+                  <span class="text-amber-500">
+                    <span class="i-carbon:warning size-3 inline-block align-[-2px] me-0.5" />{{
+                      warning.message
+                    }}
+                  </span>
+                </template>
+              </div>
+
+              <!-- Source link -->
+              <NuxtLink
+                :to="getSkillSourceUrl(skill)"
+                class="inline-flex items-center gap-1 text-xs text-fg-subtle hover:text-fg transition-colors"
+                @click.stop
+              >
+                <span class="i-carbon:code size-3" />{{ $t('package.skills.view_source') }}
+              </NuxtLink>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </Modal>
+</template>
diff --git a/app/composables/useConnector.ts b/app/composables/useConnector.ts
index b37d18dc50..8efe83114e 100644
--- a/app/composables/useConnector.ts
+++ b/app/composables/useConnector.ts
@@ -1,4 +1,5 @@
 import type { PendingOperation, OperationStatus, OperationType } from '../../cli/src/types'
+import { $fetch } from 'ofetch'
 
 export interface NewOperation {
   type: OperationType
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index fcaecfbf80..1983d95f70 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import type { NpmVersionDist, PackumentVersion, ReadmeResponse } from '#shared/types'
+import type {
+  NpmVersionDist,
+  PackumentVersion,
+  ReadmeResponse,
+  SkillsListResponse,
+} from '#shared/types'
 import type { JsrPackageInfo } from '#shared/types/jsr'
 import { assertValidPackageName } from '#shared/utils/npm'
 import { joinURL } from 'ufo'
@@ -66,6 +71,15 @@ const {
 )
 onMounted(() => fetchInstallSize())
 
+const { data: skillsData } = useLazyFetch<SkillsListResponse>(
+  () => {
+    const base = `/skills/${packageName.value}`
+    const version = requestedVersion.value
+    return version ? `${base}/v/${version}` : base
+  },
+  { default: () => ({ package: '', version: '', skills: [] }) },
+)
+
 const { data: packageAnalysis } = usePackageAnalysis(packageName, requestedVersion)
 const { data: moduleReplacement } = useModuleReplacement(packageName)
 
@@ -836,6 +850,15 @@ function handleClick(event: MouseEvent) {
             </dd>
           </div>
         </dl>
+
+        <!-- Skills Modal -->
+        <ClientOnly>
+          <PackageSkillsModal
+            :skills="skillsData?.skills ?? []"
+            :package-name="pkg.name"
+            :version="displayVersion?.version"
+          />
+        </ClientOnly>
       </header>
 
       <!-- Binary-only packages: Show only execute command (no install) -->
@@ -977,6 +1000,16 @@ function handleClick(event: MouseEvent) {
             </ul>
           </section>
 
+          <!-- Agent Skills -->
+          <ClientOnly>
+            <PackageSkillsCard
+              v-if="skillsData?.skills?.length"
+              :skills="skillsData.skills"
+              :package-name="pkg.name"
+              :version="displayVersion?.version"
+            />
+          </ClientOnly>
+
           <!-- Download stats -->
           <PackageWeeklyDownloadStats :packageName />
 
diff --git a/app/pages/code/[...path].vue b/app/pages/code/[...path].vue
index 6ae19872e9..21ea44076e 100644
--- a/app/pages/code/[...path].vue
+++ b/app/pages/code/[...path].vue
@@ -99,9 +99,18 @@ const fileContentUrl = computed(() => {
   return `/api/registry/file/${packageName.value}/v/${version.value}/${filePath.value}`
 })
 
-const { data: fileContent, status: fileStatus } = useFetch<PackageFileContentResponse>(
-  () => fileContentUrl.value!,
-  { immediate: !!fileContentUrl.value },
+const {
+  data: fileContent,
+  status: fileStatus,
+  execute: fetchFileContent,
+} = useFetch<PackageFileContentResponse>(() => fileContentUrl.value!, { immediate: false })
+
+watch(
+  fileContentUrl,
+  url => {
+    if (url) fetchFileContent()
+  },
+  { immediate: true },
 )
 
 // Track hash manually since we update it via history API to avoid scroll
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 171309c19f..13c8c792b3 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -143,6 +143,7 @@
       "install_size": "Install Size",
       "vulns": "Vulns",
       "updated": "Updated",
+      "skills": "Skills",
       "view_dependency_graph": "View dependency graph",
       "inspect_dependency_tree": "Inspect dependency tree",
       "size_tooltip": {
@@ -150,6 +151,24 @@
         "total": "{size} total unpacked size (including all {count} dependencies for linux-x64)"
       }
     },
+    "skills": {
+      "title": "Agent Skills",
+      "skills_available": "{count} skill available | {count} skills available",
+      "view": "View",
+      "compatible_with": "Compatible with {tool}",
+      "install": "Install",
+      "installation_method": "Installation method",
+      "learn_more": "Learn more",
+      "available_skills": "Available Skills",
+      "click_to_expand": "Click to expand",
+      "no_description": "No description",
+      "file_counts": {
+        "scripts": "{count} script | {count} scripts",
+        "refs": "{count} ref | {count} refs",
+        "assets": "{count} asset | {count} assets"
+      },
+      "view_source": "View source"
+    },
     "links": {
       "repo": "repo",
       "homepage": "homepage",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 171309c19f..13c8c792b3 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -143,6 +143,7 @@
       "install_size": "Install Size",
       "vulns": "Vulns",
       "updated": "Updated",
+      "skills": "Skills",
       "view_dependency_graph": "View dependency graph",
       "inspect_dependency_tree": "Inspect dependency tree",
       "size_tooltip": {
@@ -150,6 +151,24 @@
         "total": "{size} total unpacked size (including all {count} dependencies for linux-x64)"
       }
     },
+    "skills": {
+      "title": "Agent Skills",
+      "skills_available": "{count} skill available | {count} skills available",
+      "view": "View",
+      "compatible_with": "Compatible with {tool}",
+      "install": "Install",
+      "installation_method": "Installation method",
+      "learn_more": "Learn more",
+      "available_skills": "Available Skills",
+      "click_to_expand": "Click to expand",
+      "no_description": "No description",
+      "file_counts": {
+        "scripts": "{count} script | {count} scripts",
+        "refs": "{count} ref | {count} refs",
+        "assets": "{count} asset | {count} assets"
+      },
+      "view_source": "View source"
+    },
     "links": {
       "repo": "repo",
       "homepage": "homepage",
diff --git a/package.json b/package.json
index 9fd8605687..d031eb01d5 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "module-replacements": "2.11.0",
     "nuxt": "4.3.0",
     "nuxt-og-image": "5.1.13",
+    "ofetch": "1.5.1",
     "perfect-debounce": "2.1.0",
     "sanitize-html": "2.17.0",
     "semver": "7.7.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3b949b61b9..27c94c352a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -128,6 +128,9 @@ importers:
       nuxt-og-image:
         specifier: 5.1.13
         version: 5.1.13(@unhead/vue@2.1.2(vue@3.5.27(typescript@5.9.3)))(magicast@0.5.1)(unstorage@1.17.4(@upstash/redis@1.36.1)(@vercel/kv@3.0.0)(db0@0.3.4(better-sqlite3@12.6.2))(ioredis@5.9.2))(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
+      ofetch:
+        specifier: 1.5.1
+        version: 1.5.1
       perfect-debounce:
         specifier: 2.1.0
         version: 2.1.0
diff --git a/server/plugins/fetch-cache.ts b/server/plugins/fetch-cache.ts
index 16349b5086..bf466adef5 100644
--- a/server/plugins/fetch-cache.ts
+++ b/server/plugins/fetch-cache.ts
@@ -1,5 +1,6 @@
 import type { H3Event } from 'h3'
 import type { CachedFetchEntry, CachedFetchResult } from '#shared/utils/fetch-cache-config'
+import { $fetch } from 'ofetch'
 import {
   FETCH_CACHE_DEFAULT_TTL,
   FETCH_CACHE_STORAGE_BASE,
diff --git a/server/routes/[...path].get.ts b/server/routes/[...path].get.ts
new file mode 100644
index 0000000000..ff1042dbdd
--- /dev/null
+++ b/server/routes/[...path].get.ts
@@ -0,0 +1,104 @@
+import type { H3Event } from 'h3'
+import * as v from 'valibot'
+import { PackageRouteParamsSchema } from '#shared/schemas/package'
+import { SkillNameSchema } from '#shared/schemas/skills'
+import { CACHE_MAX_AGE_ONE_HOUR, CACHE_MAX_AGE_ONE_YEAR } from '#shared/utils/constants'
+
+const CACHE_VERSION = 1
+
+/**
+ * Well-known skills endpoint for `npx skills add` CLI compatibility.
+ *
+ * URL patterns:
+ * - /vue/.well-known/skills/index.json         → skills index
+ * - /vue/.well-known/skills/my-skill/SKILL.md  → raw SKILL.md
+ * - /@scope/pkg/.well-known/skills/...         → scoped packages
+ */
+export default defineCachedEventHandler(
+  async event => {
+    const path = getRouterParam(event, 'path') || ''
+
+    const match = path.match(/^(.+?)\/\.well-known\/skills\/(.*)$/)
+    if (!match) {
+      // Not a well-known skills request, return 404 to let other handlers deal with it
+      throw createError({ statusCode: 404, message: 'Not found' })
+    }
+
+    const [, pkgPath, skillsPath] = match
+    const packageName = pkgPath!
+
+    try {
+      const validated = v.parse(PackageRouteParamsSchema, { packageName, version: undefined })
+
+      // Always resolve to latest for well-known endpoint
+      const packument = await fetchNpmPackage(validated.packageName)
+      const version = packument['dist-tags']?.latest
+      if (!version) {
+        throw createError({ statusCode: 404, message: 'No latest version found' })
+      }
+
+      if (skillsPath === 'index.json' || skillsPath === '') {
+        return await handleWellKnownIndex(event, validated.packageName, version)
+      }
+
+      const parts = skillsPath!.split('/')
+      const skillName = v.parse(SkillNameSchema, parts[0])
+      const fileName = parts.slice(1).join('/')
+
+      if (fileName === 'SKILL.md' || fileName === '') {
+        return await handleWellKnownSkillMd(event, validated.packageName, version, skillName)
+      }
+
+      throw createError({ statusCode: 404, message: 'File not found' })
+    } catch (error) {
+      if (error && typeof error === 'object' && 'statusCode' in error) throw error
+      throw createError({ statusCode: 500, message: 'Failed to fetch skills' })
+    }
+  },
+  {
+    maxAge: CACHE_MAX_AGE_ONE_HOUR,
+    swr: true,
+    getKey: event => {
+      const path = getRouterParam(event, 'path') ?? ''
+      return `well-known-skills:v${CACHE_VERSION}:${path.replace(/\/+$/, '').trim()}`
+    },
+  },
+)
+
+async function handleWellKnownIndex(event: H3Event, packageName: string, version: string) {
+  const fileTree = await getPackageFileTree(packageName, version)
+  const skillDirs = findSkillDirs(fileTree.tree)
+
+  if (skillDirs.length === 0) {
+    return { skills: [] }
+  }
+
+  const skillNames = skillDirs.map(s => s.name)
+  const skills = await fetchSkillsListForWellKnown(packageName, version, skillNames)
+
+  setHeader(event, 'Cache-Control', `public, max-age=${CACHE_MAX_AGE_ONE_HOUR}`)
+  setHeader(event, 'Content-Type', 'application/json')
+
+  return { skills }
+}
+
+async function handleWellKnownSkillMd(
+  event: H3Event,
+  packageName: string,
+  version: string,
+  skillName: string,
+) {
+  try {
+    const content = await fetchSkillFile(packageName, version, `skills/${skillName}/SKILL.md`)
+
+    setHeader(event, 'Cache-Control', `public, max-age=${CACHE_MAX_AGE_ONE_YEAR}, immutable`)
+    setHeader(event, 'Content-Type', 'text/markdown; charset=utf-8')
+
+    return content
+  } catch (error) {
+    if (error && typeof error === 'object' && 'statusCode' in error && error.statusCode === 404) {
+      throw createError({ statusCode: 404, message: 'SKILL.md not found' })
+    }
+    throw error
+  }
+}
diff --git a/server/routes/skills/[...pkg].get.ts b/server/routes/skills/[...pkg].get.ts
new file mode 100644
index 0000000000..345020b582
--- /dev/null
+++ b/server/routes/skills/[...pkg].get.ts
@@ -0,0 +1,150 @@
+import type { H3Event } from 'h3'
+import * as v from 'valibot'
+import { PackageRouteParamsSchema } from '#shared/schemas/package'
+import { SkillNameSchema } from '#shared/schemas/skills'
+import type { SkillsListResponse, SkillContentResponse } from '#shared/types'
+import {
+  CACHE_MAX_AGE_ONE_HOUR,
+  CACHE_MAX_AGE_ONE_YEAR,
+  ERROR_SKILLS_FETCH_FAILED,
+  ERROR_SKILL_NOT_FOUND,
+  ERROR_SKILL_FILE_NOT_FOUND,
+} from '#shared/utils/constants'
+import { parsePackageParam } from '#shared/utils/parse-package-param'
+
+const CACHE_VERSION = 1
+
+/**
+ * Skills discovery and content endpoint.
+ *
+ * URL patterns:
+ * - /skills/vue/v/3.4.0                         → discovery (list skills)
+ * - /skills/vue/v/3.4.0/my-skill                → skill content (SKILL.md parsed)
+ * - /skills/vue/v/3.4.0/my-skill/refs/guide.md  → supporting file (raw)
+ * - /skills/@scope/pkg/v/1.0.0                  → scoped package
+ */
+export default defineCachedEventHandler(
+  async event => {
+    const pkgParam = getRouterParam(event, 'pkg')
+    if (!pkgParam) {
+      throw createError({ statusCode: 404, message: 'Package name is required' })
+    }
+
+    const { packageName, version: rawVersion, rest } = parsePackageParam(pkgParam)
+
+    try {
+      const validated = v.parse(PackageRouteParamsSchema, { packageName, version: rawVersion })
+
+      let version = validated.version
+      let isVersioned = !!version
+      if (!version) {
+        const packument = await fetchNpmPackage(validated.packageName)
+        version = packument['dist-tags']?.latest
+        if (!version) {
+          throw createError({ statusCode: 404, message: 'No latest version found' })
+        }
+      }
+
+      // Set cache headers: 1 year for versioned, 1 hour for latest
+      if (isVersioned) {
+        setHeader(event, 'Cache-Control', `public, max-age=${CACHE_MAX_AGE_ONE_YEAR}, immutable`)
+      }
+
+      if (rest.length === 0) {
+        return await handleDiscovery(validated.packageName, version)
+      }
+
+      const skillName = v.parse(SkillNameSchema, rest[0])
+
+      if (rest.length === 1) {
+        return await handleSkillContent(validated.packageName, version, skillName)
+      }
+
+      const filePath = rest.slice(1).join('/')
+      return await handleSkillFile(event, validated.packageName, version, skillName, filePath)
+    } catch (error) {
+      handleApiError(error, { statusCode: 502, message: ERROR_SKILLS_FETCH_FAILED })
+    }
+  },
+  {
+    maxAge: CACHE_MAX_AGE_ONE_HOUR,
+    swr: true,
+    getKey: event => {
+      const pkg = getRouterParam(event, 'pkg') ?? ''
+      return `skills:v${CACHE_VERSION}:${pkg.replace(/\/+$/, '').trim()}`
+    },
+  },
+)
+
+async function handleDiscovery(packageName: string, version: string): Promise<SkillsListResponse> {
+  const fileTree = await getPackageFileTree(packageName, version)
+  const skillDirs = findSkillDirs(fileTree.tree)
+
+  if (skillDirs.length === 0) {
+    return { package: packageName, version, skills: [] }
+  }
+
+  const skills = await fetchSkillsList(packageName, version, skillDirs)
+  return { package: packageName, version, skills }
+}
+
+async function handleSkillContent(
+  packageName: string,
+  version: string,
+  skillName: string,
+): Promise<SkillContentResponse> {
+  try {
+    const { frontmatter, content } = await fetchSkillContent(packageName, version, skillName)
+    return { package: packageName, version, skill: skillName, frontmatter, content }
+  } catch (error) {
+    if (error && typeof error === 'object' && 'statusCode' in error && error.statusCode === 404) {
+      throw createError({ statusCode: 404, message: ERROR_SKILL_NOT_FOUND })
+    }
+    throw error
+  }
+}
+
+async function handleSkillFile(
+  event: H3Event,
+  packageName: string,
+  version: string,
+  skillName: string,
+  filePath: string,
+): Promise<string> {
+  // Validate file path to prevent directory traversal
+  if (filePath.includes('..') || filePath.startsWith('/')) {
+    throw createError({ statusCode: 400, message: 'Invalid file path' })
+  }
+
+  // Only allow files within skill subdirectories (scripts/, references/, assets/)
+  const allowedPrefixes = ['scripts/', 'references/', 'assets/', 'refs/']
+  if (!allowedPrefixes.some(p => filePath.startsWith(p))) {
+    throw createError({
+      statusCode: 400,
+      message: 'File must be in scripts/, references/, or assets/ subdirectory',
+    })
+  }
+
+  try {
+    const content = await fetchSkillFile(packageName, version, `skills/${skillName}/${filePath}`)
+
+    const ext = filePath.split('.').pop()?.toLowerCase() || ''
+    const contentTypes: Record<string, string> = {
+      md: 'text/markdown',
+      txt: 'text/plain',
+      json: 'application/json',
+      js: 'text/javascript',
+      ts: 'text/typescript',
+      sh: 'text/x-shellscript',
+      py: 'text/x-python',
+    }
+    setHeader(event, 'Content-Type', contentTypes[ext] || 'text/plain')
+
+    return content
+  } catch (error) {
+    if (error && typeof error === 'object' && 'statusCode' in error && error.statusCode === 404) {
+      throw createError({ statusCode: 404, message: ERROR_SKILL_FILE_NOT_FOUND })
+    }
+    throw error
+  }
+}
diff --git a/server/utils/docs/client.ts b/server/utils/docs/client.ts
index e347bb8e6e..4305dc4cc5 100644
--- a/server/utils/docs/client.ts
+++ b/server/utils/docs/client.ts
@@ -8,6 +8,7 @@
  */
 
 import { doc, type DocNode } from '@deno/doc'
+import { $fetch } from 'ofetch'
 import type { DenoDocNode, DenoDocResult } from '#shared/types/deno-doc'
 
 // =============================================================================
@@ -163,7 +164,7 @@ async function getTypesUrl(packageName: string, version: string): Promise<string
 
   try {
     const response = await $fetch.raw(url, {
-      method: 'HEAD',
+      method: 'HEAD' as 'GET', // Cast to satisfy Nitro's typed $fetch (external URL, any method is fine)
       timeout: FETCH_TIMEOUT_MS,
     })
     return response.headers.get('x-typescript-types')
diff --git a/server/utils/skills.ts b/server/utils/skills.ts
new file mode 100644
index 0000000000..ff3d1e0767
--- /dev/null
+++ b/server/utils/skills.ts
@@ -0,0 +1,238 @@
+import type {
+  PackageFileTree,
+  SkillFileCounts,
+  SkillFrontmatter,
+  SkillListItem,
+  SkillWarning,
+} from '#shared/types'
+
+const MAX_SKILL_FILE_SIZE = 500 * 1024
+
+/**
+ * Parse YAML frontmatter from SKILL.md content.
+ * Returns { frontmatter, content } where content is the markdown body without frontmatter.
+ */
+export function parseFrontmatter(raw: string): { frontmatter: SkillFrontmatter; content: string } {
+  const match = raw.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n([\s\S]*)$/)
+  if (!match) {
+    throw createError({ statusCode: 400, message: 'Invalid SKILL.md: missing YAML frontmatter' })
+  }
+
+  const yamlBlock = match[1]!
+  const content = match[2]!
+
+  const frontmatter: Record<string, string | Record<string, string>> = {}
+  let currentKey = ''
+  let inMetadata = false
+  const metadata: Record<string, string> = {}
+
+  for (const line of yamlBlock.split('\n')) {
+    const trimmed = line.trim()
+    if (!trimmed || trimmed.startsWith('#')) continue
+
+    if (line.startsWith('  ') && inMetadata) {
+      const [key, ...valueParts] = trimmed.split(':')
+      if (key && valueParts.length) {
+        metadata[key.trim()] = valueParts
+          .join(':')
+          .trim()
+          .replace(/^["']|["']$/g, '')
+      }
+    } else {
+      const colonIndex = line.indexOf(':')
+      if (colonIndex !== -1) {
+        currentKey = line.slice(0, colonIndex).trim()
+        const value = line.slice(colonIndex + 1).trim()
+        inMetadata = currentKey === 'metadata' && !value
+        if (!inMetadata && value) {
+          frontmatter[currentKey] = value.replace(/^["']|["']$/g, '')
+        }
+      }
+    }
+  }
+
+  if (Object.keys(metadata).length > 0) {
+    frontmatter.metadata = metadata
+  }
+
+  if (!frontmatter.name || !frontmatter.description) {
+    throw createError({
+      statusCode: 400,
+      message: 'Invalid SKILL.md: missing required name or description',
+    })
+  }
+
+  return { frontmatter: frontmatter as unknown as SkillFrontmatter, content }
+}
+
+export interface SkillDirInfo {
+  name: string
+  children: PackageFileTree[]
+}
+
+/**
+ * Find skill directories in a package file tree.
+ * Returns skill names and their children for file counting.
+ * @public
+ */
+export function findSkillDirs(tree: PackageFileTree[]): SkillDirInfo[] {
+  const skillsDir = tree.find(node => node.type === 'directory' && node.name === 'skills')
+  if (!skillsDir?.children) return []
+
+  return skillsDir.children
+    .filter(
+      child =>
+        child.type === 'directory' &&
+        child.children?.some(f => f.type === 'file' && f.name === 'SKILL.md'),
+    )
+    .map(child => ({ name: child.name, children: child.children || [] }))
+}
+
+/**
+ * Count files in skill subdirectories (scripts, references, assets).
+ */
+export function countSkillFiles(children: PackageFileTree[]): SkillFileCounts | undefined {
+  const counts: SkillFileCounts = {}
+  const countFilesRecursive = (nodes: PackageFileTree[]): number =>
+    nodes.reduce(
+      (acc, n) => acc + (n.type === 'file' ? 1 : countFilesRecursive(n.children || [])),
+      0,
+    )
+
+  for (const child of children) {
+    if (child.type !== 'directory') continue
+    const name = child.name.toLowerCase()
+    const count = countFilesRecursive(child.children || [])
+    if (count === 0) continue
+    if (name === 'scripts') counts.scripts = count
+    else if (name === 'references' || name === 'refs')
+      counts.references = (counts.references || 0) + count
+    else if (name === 'assets') counts.assets = count
+  }
+  return Object.keys(counts).length ? counts : undefined
+}
+
+/**
+ * Fetch file content from jsDelivr CDN with size limit.
+ */
+export async function fetchSkillFile(
+  packageName: string,
+  version: string,
+  filePath: string,
+): Promise<string> {
+  const url = `https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`
+  const response = await fetch(url)
+
+  if (!response.ok) {
+    if (response.status === 404) {
+      throw createError({ statusCode: 404, message: 'File not found' })
+    }
+    throw createError({ statusCode: 502, message: 'Failed to fetch file from jsDelivr' })
+  }
+
+  const contentLength = response.headers.get('content-length')
+  if (contentLength && parseInt(contentLength, 10) > MAX_SKILL_FILE_SIZE) {
+    throw createError({
+      statusCode: 413,
+      message: `File too large (${(parseInt(contentLength, 10) / 1024 / 1024).toFixed(1)}MB). Maximum size is ${MAX_SKILL_FILE_SIZE / 1024}KB.`,
+    })
+  }
+
+  const content = await response.text()
+
+  if (content.length > MAX_SKILL_FILE_SIZE) {
+    throw createError({
+      statusCode: 413,
+      message: `File too large (${(content.length / 1024 / 1024).toFixed(1)}MB). Maximum size is ${MAX_SKILL_FILE_SIZE / 1024}KB.`,
+    })
+  }
+
+  return content
+}
+
+/**
+ * Fetch and parse SKILL.md content for a skill.
+ */
+export async function fetchSkillContent(
+  packageName: string,
+  version: string,
+  skillName: string,
+): Promise<{ frontmatter: SkillFrontmatter; content: string }> {
+  const raw = await fetchSkillFile(packageName, version, `skills/${skillName}/SKILL.md`)
+  return parseFrontmatter(raw)
+}
+
+/**
+ * Validate skill frontmatter and return warnings.
+ */
+export function validateSkill(frontmatter: SkillFrontmatter): SkillWarning[] {
+  const warnings: SkillWarning[] = []
+  if (!frontmatter.license) {
+    warnings.push({ type: 'warning', message: 'No license specified' })
+  }
+  if (!frontmatter.compatibility) {
+    warnings.push({ type: 'warning', message: 'No compatibility info' })
+  }
+  return warnings
+}
+
+/**
+ * Fetch skill list with frontmatter for discovery endpoint.
+ * @public
+ */
+export async function fetchSkillsList(
+  packageName: string,
+  version: string,
+  skillDirs: SkillDirInfo[],
+): Promise<SkillListItem[]> {
+  const skills = await Promise.all(
+    skillDirs.map(async ({ name: dirName, children }) => {
+      try {
+        const { frontmatter } = await fetchSkillContent(packageName, version, dirName)
+        const warnings = validateSkill(frontmatter)
+        const fileCounts = countSkillFiles(children)
+        const item: SkillListItem = {
+          name: frontmatter.name,
+          description: frontmatter.description,
+          dirName,
+          license: frontmatter.license,
+          compatibility: frontmatter.compatibility,
+          warnings: warnings.length > 0 ? warnings : undefined,
+          fileCounts,
+        }
+        return item
+      } catch {
+        return null
+      }
+    }),
+  )
+  return skills.filter((s): s is SkillListItem => s !== null)
+}
+
+export interface WellKnownSkillItem {
+  name: string
+  description: string
+  files: string[]
+}
+
+/**
+ * Fetch skill list for well-known index.json format (CLI compatibility).
+ * @public
+ */
+export async function fetchSkillsListForWellKnown(
+  packageName: string,
+  version: string,
+  skillNames: string[],
+): Promise<WellKnownSkillItem[]> {
+  const skills = await Promise.all(
+    skillNames.map(async dirName => {
+      try {
+        const { frontmatter } = await fetchSkillContent(packageName, version, dirName)
+        return { name: dirName, description: frontmatter.description, files: ['SKILL.md'] }
+      } catch {
+        return null
+      }
+    }),
+  )
+  return skills.filter((s): s is WellKnownSkillItem => s !== null)
+}
diff --git a/shared/schemas/skills.ts b/shared/schemas/skills.ts
new file mode 100644
index 0000000000..84a73c67dc
--- /dev/null
+++ b/shared/schemas/skills.ts
@@ -0,0 +1,9 @@
+import * as v from 'valibot'
+
+export const SkillNameSchema = v.pipe(
+  v.string(),
+  v.minLength(1),
+  v.maxLength(64),
+  v.regex(/^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/, 'Invalid skill name'),
+  v.check(s => !s.includes('--'), 'No consecutive hyphens'),
+)
diff --git a/shared/types/index.ts b/shared/types/index.ts
index 240bba407c..96f55a32b5 100644
--- a/shared/types/index.ts
+++ b/shared/types/index.ts
@@ -7,3 +7,4 @@ export * from './env'
 export * from './deno-doc'
 export * from './i18n-status'
 export * from './comparison'
+export * from './skills'
diff --git a/shared/types/skills.ts b/shared/types/skills.ts
new file mode 100644
index 0000000000..eb5a7be92a
--- /dev/null
+++ b/shared/types/skills.ts
@@ -0,0 +1,42 @@
+export interface SkillFrontmatter {
+  name: string
+  description: string
+  license?: string
+  compatibility?: string
+  metadata?: Record<string, string>
+}
+
+export interface SkillWarning {
+  type: 'error' | 'warning'
+  message: string
+}
+
+export interface SkillFileCounts {
+  scripts?: number
+  references?: number
+  assets?: number
+}
+
+export interface SkillListItem {
+  name: string
+  description: string
+  dirName: string
+  license?: string
+  compatibility?: string
+  warnings?: SkillWarning[]
+  fileCounts?: SkillFileCounts
+}
+
+export interface SkillsListResponse {
+  package: string
+  version: string
+  skills: SkillListItem[]
+}
+
+export interface SkillContentResponse {
+  package: string
+  version: string
+  skill: string
+  frontmatter: SkillFrontmatter
+  content: string
+}
diff --git a/shared/utils/constants.ts b/shared/utils/constants.ts
index ad25d98356..d2292de6a1 100644
--- a/shared/utils/constants.ts
+++ b/shared/utils/constants.ts
@@ -17,6 +17,9 @@ export const ERROR_JSR_FETCH_FAILED = 'Failed to fetch package from JSR registry
 export const ERROR_NPM_FETCH_FAILED = 'Failed to fetch package from npm registry.'
 export const UNSET_NUXT_SESSION_PASSWORD = 'NUXT_SESSION_PASSWORD not set'
 export const ERROR_SUGGESTIONS_FETCH_FAILED = 'Failed to fetch suggestions.'
+export const ERROR_SKILLS_FETCH_FAILED = 'Failed to fetch skills.'
+export const ERROR_SKILL_NOT_FOUND = 'Skill not found.'
+export const ERROR_SKILL_FILE_NOT_FOUND = 'Skill file not found.'
 
 // microcosm services
 export const CONSTELLATION_HOST = 'constellation.microcosm.blue'
diff --git a/uno.config.ts b/uno.config.ts
index d87a7898a0..67a80d9548 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -9,9 +9,12 @@ import type { Theme } from '@unocss/preset-wind4/theme'
 import { presetRtl } from './uno-preset-rtl'
 
 const customIcons = {
-  tangled:
+  'agent-skills':
+    '<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 0.5L29.4234 8.25V23.75L16 31.5L2.57661 23.75V8.25L16 0.5Z" fill="currentColor"/><path d="M16 6L24.6603 11V21L16 26L7.33975 21V11L16 6Z" fill="none" stroke="currentColor" stroke-width="3"/></svg>',
+  'tangled':
     '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><path fill="currentColor" d="M16.346 24.11c-.785-.007-1.384-.235-2.034-.632-.932-.49-1.643-1.314-2.152-2.222-.808 1.003-1.888 1.611-3.097 1.955-.515.15-1.416.301-2.911-.24-2.154-.724-3.723-2.965-3.545-5.25-.033-.946.313-1.875.802-2.674-1.305-.7-2.37-1.876-2.777-3.318-.248-.79-.237-1.64-.146-2.452.327-1.916 1.764-3.582 3.615-4.182.738-1.683 2.35-2.938 4.176-3.193a5.54 5.54 0 0 1 3.528.7C13.351.89 16.043.383 18.1 1.436c1.568.75 2.69 2.312 2.962 4.015 1.492.598 2.749 1.817 3.242 3.365.33.958.34 2.013.127 2.997-.382 1.536-1.465 2.842-2.868 3.557.003.273.901 2.243.751 3.73-.033 1.858-1.211 3.62-2.846 4.475-.954.557-2.085.546-3.12.535m-4.47-5.35c1.322-.148 2.19-1.3 2.862-2.339.319-.473.562-1.002.803-1.506.314.287.58.828 1.075.957.522.163 1.133.03 1.453-.443.611-1.14.31-2.517-.046-3.699-.22-.679-.507-1.375-1.054-1.856.116-.823-.372-1.66-1.065-2.09-.592.47-1.491.468-2.061-.037-1.093 1.115-2.095 1.078-3.063.195-.217-.199-.632 1.212-2.088.413-.837.7-1.485 1.375-2.06 2.346-.559 1.046-1.143 1.976-1.194 3.113-.024.664.495 1.36 1.198 1.306.703.063 1.182-.63 1.714-.917.08.928.169 1.924.482 2.829.36 1.171 1.627 1.916 2.825 1.745zm.687-3.498c-.644-.394-.334-1.25-.36-1.871.064-.75.115-1.538.453-2.221.356-.487 1.226-.3 1.265.326-.026.628-.314 1.254-.28 1.905-.075.544.054 1.155-.186 1.653-.198.275-.6.355-.892.208m-2.81-.358c-.605-.329-.413-1.156-.508-1.73.08-.666.014-1.51.571-1.978.545-.38 1.287.271 1.03.869-.276.755-.096 1.58-.09 2.346a.712.712 0 0 1-1.002.493"/></svg>',
-  vlt: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.9991 5.03666C7.9991 5.46387 7.93211 5.87545 7.80808 6.26145C7.45933 7.34674 7.1975 8.58253 7.7669 9.57009L10.389 14.1177C10.7072 14.6697 11.3617 14.9108 11.9989 14.9108V14.9108V14.9108C12.6352 14.9108 13.2886 14.6699 13.6064 14.1187L16.2301 9.5682C16.7993 8.58097 16.5379 7.34565 16.1895 6.26064C16.0656 5.87488 15.9987 5.46358 15.9987 5.03666C15.9987 2.82777 17.7894 1.03711 19.9983 1.03711C22.2071 1.03711 23.9978 2.82777 23.9978 5.03666C23.9978 7.24555 22.2071 9.03621 19.9983 9.03621V9.03621C19.3609 9.03621 18.7062 9.27733 18.3878 9.82951L15.7661 14.3766C15.1967 15.3642 15.4586 16.6001 15.8074 17.6854C15.9314 18.0715 15.9984 18.4831 15.9984 18.9104C15.9984 21.1193 14.2078 22.9099 11.9989 22.9099C9.79001 22.9099 7.99935 21.1193 7.99935 18.9104C7.99935 18.4834 8.06626 18.072 8.19016 17.6862C8.53863 16.6012 8.80017 15.3657 8.23092 14.3785L5.60752 9.8285C5.28961 9.27712 4.63601 9.03621 3.99955 9.03621V9.03621C1.79066 9.03621 0 7.24555 0 5.03666C0 2.82777 1.79066 1.03711 3.99955 1.03711C6.20844 1.03711 7.9991 2.82777 7.9991 5.03666Z" fill="currentColor"></path></svg>',
+  'vlt':
+    '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.9991 5.03666C7.9991 5.46387 7.93211 5.87545 7.80808 6.26145C7.45933 7.34674 7.1975 8.58253 7.7669 9.57009L10.389 14.1177C10.7072 14.6697 11.3617 14.9108 11.9989 14.9108V14.9108V14.9108C12.6352 14.9108 13.2886 14.6699 13.6064 14.1187L16.2301 9.5682C16.7993 8.58097 16.5379 7.34565 16.1895 6.26064C16.0656 5.87488 15.9987 5.46358 15.9987 5.03666C15.9987 2.82777 17.7894 1.03711 19.9983 1.03711C22.2071 1.03711 23.9978 2.82777 23.9978 5.03666C23.9978 7.24555 22.2071 9.03621 19.9983 9.03621V9.03621C19.3609 9.03621 18.7062 9.27733 18.3878 9.82951L15.7661 14.3766C15.1967 15.3642 15.4586 16.6001 15.8074 17.6854C15.9314 18.0715 15.9984 18.4831 15.9984 18.9104C15.9984 21.1193 14.2078 22.9099 11.9989 22.9099C9.79001 22.9099 7.99935 21.1193 7.99935 18.9104C7.99935 18.4834 8.06626 18.072 8.19016 17.6862C8.53863 16.6012 8.80017 15.3657 8.23092 14.3785L5.60752 9.8285C5.28961 9.27712 4.63601 9.03621 3.99955 9.03621V9.03621C1.79066 9.03621 0 7.24555 0 5.03666C0 2.82777 1.79066 1.03711 3.99955 1.03711C6.20844 1.03711 7.9991 2.82777 7.9991 5.03666Z" fill="currentColor"></path></svg>',
 }
 
 export default defineConfig({