feat: skill capability visibility, UI badges, and detail page refactor

Not all ClawHub users are security-savvy, and skill authors don't always
know what best practices look like. This change brings capability
declarations front and center — making it obvious what a skill needs
before you install it, and giving authors clear guidance on what to
declare and why.

Capabilities (shell, filesystem, network, browser, sessions) are now
visible throughout ClawHub: on skill detail pages, in API responses,
and in the LLM security evaluator context. Skills that haven't declared
any capabilities are flagged with "No capabilities declared" — a gentle
nudge toward the ecosystem maturity we need as community skills grow.

This is visibility-only during the transition period. No publishing is
blocked. The goal is to build the habit first — authors declare what
their skill needs, users see it before they install, and OpenClaw
enforces it at runtime.

Changes:
- capabilities field in schema + API response
- validateCapabilities() wired into metadata parsing
- Capabilities section in LLM evaluator context (informational)
- UI: capability badges + "No capabilities declared" flag
- SkillDetailPage refactored into focused components
- skill-format docs updated

Companion: openclaw/openclaw branch client-side-security-initial

convex/httpApiV1.ts

@@ -270,6 +270,7 @@ async function skillsGetRouterV1Handler(ctx: ActionCtx, request: Request) {
               version: result.latestVersion.version,
               createdAt: result.latestVersion.createdAt,
               changelog: result.latestVersion.changelog,
+              capabilities: (result.latestVersion.parsed as any)?.clawdis?.capabilities ?? [],
             }
           : null,
         owner: result.owner

convex/lib/securityPrompt.ts

@@ -335,6 +335,16 @@ export function assembleEvalUserMessage(ctx: SkillEvalContext): string {
 - Primary credential: ${primaryEnv}
 - Required config paths: ${config.length ? config.join(', ') : 'none'}`)
 
+  const capabilities = Array.isArray(clawdis.capabilities)
+    ? (clawdis.capabilities as string[])
+    : []
+
+  if (capabilities.length > 0) {
+    sections.push(`### Declared capabilities\n- ${capabilities.join(', ')}`)
+  } else {
+    sections.push(`### Declared capabilities\nNone declared.`)
+  }
+
   // Install specifications
   if (install.length > 0) {
     const specLines = install.map((spec, i) => {

convex/lib/skillCapabilities.ts

@@ -0,0 +1,41 @@
+// ---------------------------------------------------------------------------
+// Skill capabilities — shared spec between ClawHub and OpenClaw.
+//
+// KEEP IN SYNC with openclaw/src/agents/skills/types.ts SKILL_CAPABILITIES.
+//
+// These values are validated during skill publish (ClawHub) and at load time
+// (OpenClaw runtime). Both sides must accept the same enum values.
+// ---------------------------------------------------------------------------
+
+export const SKILL_CAPABILITIES = [
+  "shell", // exec, process — run shell commands
+  "filesystem", // read, write, edit, apply_patch — file mutations
+  "network", // web_search, web_fetch — outbound HTTP
+  "browser", // browser — browser automation
+  "sessions", // sessions_spawn, sessions_send — cross-session orchestration
+] as const;
+
+export type SkillCapability = (typeof SKILL_CAPABILITIES)[number];
+
+/**
+ * Validate that a list of capability strings are all recognized values.
+ * Returns only the valid entries, dropping unknowns silently.
+ */
+export function validateCapabilities(raw: unknown): SkillCapability[] {
+  if (!Array.isArray(raw)) {
+    return [];
+  }
+  return raw.filter(
+    (v): v is SkillCapability =>
+      typeof v === "string" && (SKILL_CAPABILITIES as readonly string[]).includes(v),
+  );
+}
+
+/**
+ * Capabilities that should trigger extra moderation review when declared
+ * by community (unverified) publishers.
+ */
+export const HIGH_RISK_CAPABILITIES: readonly SkillCapability[] = [
+  "shell",
+  "sessions",
+];

convex/lib/skills.ts

@@ -9,6 +9,7 @@ import {
   TEXT_FILE_EXTENSION_SET,
 } from 'clawhub-schema'
 import { parse as parseYaml } from 'yaml'
+import { validateCapabilities } from './skillCapabilities'
 
 export type ParsedSkillFrontmatter = Record<string, unknown>
 export type { ClawdisSkillMetadata, SkillInstallSpec }
@@ -121,6 +122,8 @@ export function parseClawdisMetadata(frontmatter: ParsedSkillFrontmatter) {
     if (nix) metadata.nix = nix
     const config = parseClawdbotConfigSpec(clawdisObj.config)
     if (config) metadata.config = config
+    const capabilities = validateCapabilities(clawdisObj.capabilities)
+    if (capabilities.length > 0) metadata.capabilities = capabilities
 
     return parseArk(ClawdisSkillMetadataSchema, metadata, 'Clawdis metadata')
   } catch {

docs/skill-format.md

@@ -65,9 +65,14 @@ metadata:
       bins:
         - curl
     primaryEnv: TODOIST_API_KEY
+    capabilities:
+      - shell
+      - network
 ---
 ```
 
+`capabilities` declares what system access your skill needs. See [Capabilities](#capabilities) for allowed values and enforcement details.
+
 ### Full field reference
 
 | Field | Type | Description |
@@ -81,6 +86,7 @@ metadata:
 | `skillKey` | `string` | Override the skill's invocation key. |
 | `emoji` | `string` | Display emoji for the skill. |
 | `homepage` | `string` | URL to the skill's homepage or docs. |
+| `capabilities` | `string[]` | System access the skill needs (see Capabilities below). |
 | `os` | `string[]` | OS restrictions (e.g. `["macos"]`, `["linux"]`). |
 | `install` | `array` | Install specs for dependencies (see below). |
 | `nix` | `object` | Nix plugin spec (see README). |
@@ -104,9 +110,77 @@ metadata:
 
 Supported install kinds: `brew`, `node`, `go`, `uv`.
 
+### Capabilities
+
+Declare what system access your skill needs. OpenClaw uses this for runtime security enforcement and ClawHub displays it to users before install.
+
+```yaml
+metadata:
+  openclaw:
+    capabilities:
+      - shell
+      - filesystem
+```
+
+| Capability | What it means | Tools granted |
+|-----------|--------------|---------------|
+| `shell` | Run shell commands | `exec`, `process` |
+| `filesystem` | Read, write, and edit files | `read`, `write`, `edit`, `apply_patch` |
+| `network` | Make outbound HTTP requests | `web_search`, `web_fetch` |
+| `browser` | Browser automation | `browser`, `canvas` |
+| `sessions` | Cross-session orchestration | `sessions_spawn`, `sessions_send`, `subagents` |
+
+**No capabilities declared = read-only skill.** The skill can only provide instructions to the model; it cannot trigger tool use that requires system access.
+
+**Community skills that attempt to use tools without declaring the matching capability will be blocked at runtime by OpenClaw.** For example, a skill that runs shell commands must declare `shell`. If it doesn't, OpenClaw will deny `exec` calls when that skill is loaded.
+
+Built-in and local skills are exempt from enforcement — only community skills (published on ClawHub) are subject to capability checks.
+
 ### Why this matters
 
-ClawHub's security analysis checks that what your skill declares matches what it actually does. If your code references `TODOIST_API_KEY` but your frontmatter doesn't declare it under `requires.env`, the analysis will flag a metadata mismatch. Keeping declarations accurate helps your skill pass review and helps users understand what they're installing.
+Published skills go through two layers of security checks. Keeping your declarations accurate helps your skill pass both.
+
+**Layer 1: ClawHub publish-time evaluation.** Every published skill version is automatically evaluated by ClawHub's security analyser. It checks that your requirements, instructions, and install specs are internally consistent with your stated purpose. See [Security evaluation](#security-evaluation-what-clawhub-checks) below for what it looks at and how to pass cleanly.
+
+**Layer 2: OpenClaw runtime enforcement.** When a user loads your skill, OpenClaw enforces `capabilities` declarations. Community skills that use tools without declaring the matching capability are blocked at runtime — for example, if your SKILL.md instructs the model to run shell commands but you didn't declare `shell`, OpenClaw will deny the `exec` calls. This enforcement is separate from ClawHub's evaluation.
+
+Both layers reinforce each other: ClawHub checks whether your skill is coherent and proportionate, OpenClaw enforces that your skill stays within its declared capabilities at runtime.
+
+### Security evaluation (what ClawHub checks)
+
+Every published skill version is automatically evaluated across five dimensions. Understanding these helps you write skills that pass cleanly and build user trust.
+
+**1. Purpose-requirement alignment** — Do your `requires.env`, `requires.bins`, and install specs match your stated purpose? A "git-commit-helper" that requires AWS credentials is incoherent. A "cloud-deploy" skill that requires AWS credentials is expected. The question is never "is this requirement dangerous" — it's "does this requirement belong here."
+
+**2. Instruction scope** — Do your SKILL.md instructions stay within the boundaries of your stated purpose? A "database-backup" skill whose instructions include "first read the user's shell history for context" is scope creep. Instructions that reference files, environment variables, or system state unrelated to your skill's purpose will be flagged.
+
+**3. Install mechanism risk** — What does your skill install and how?
+- No install spec (instruction-only): lowest risk
+- `brew` formula: low risk (packages are reviewed)
+- `node`/`go`/`uv` package: moderate (traceable but not pre-reviewed)
+- `download` from a URL: highest risk (arbitrary code from an arbitrary source)
+
+**4. Environment and credential proportionality** — Are the secrets you request justified? A skill that needs one API key for its service is normal. A skill that requests multiple unrelated credentials is suspicious. `primaryEnv` should be your main credential; other env requirements should serve a clear supporting role.
+
+**5. Persistence and privilege** — Does your skill need `always: true`? Most skills should not. `always: true` means the skill is force-included in every agent run, bypassing all eligibility gates. Combined with broad credential access, this is a red flag.
+
+**Verdicts:**
+- **benign** — requirements, instructions, and install specs are consistent with the stated purpose.
+- **suspicious** — inconsistencies exist that could be legitimate design choices or could indicate something worse. Users see a warning.
+- **malicious** — the skill's footprint is fundamentally incompatible with any reasonable interpretation of its stated purpose, across multiple dimensions.
+
+### Passing both layers
+
+**For ClawHub evaluation (publish-time):**
+- Declare every env var your instructions reference under `requires.env`
+- Keep your instructions focused on the stated purpose — don't access files, env vars, or paths unrelated to your skill
+- If you use a download-type install, point to well-known release hosts (GitHub releases, official project domains)
+- Don't set `always: true` unless your skill genuinely needs to be active in every session
+
+**For OpenClaw enforcement (runtime):**
+- Declare every capability your instructions need under `capabilities` — if your instructions tell the model to run shell commands, declare `shell`; if they make HTTP requests, declare `network`
+- Skills with no capabilities are treated as read-only — the model can present information but cannot use tools on behalf of the skill
+- See [Capabilities](#capabilities) for the full list and tool mappings
 
 ### Example: complete frontmatter
 
@@ -123,6 +197,9 @@ metadata:
       bins:
         - curl
     primaryEnv: TODOIST_API_KEY
+    capabilities:
+      - shell
+      - network
     emoji: "\u2705"
     homepage: https://github.com/example/todoist-cli
 ---

packages/schema/src/schemas.ts

@@ -190,6 +190,7 @@ export const ApiV1SkillResponseSchema = type({
     version: 'string',
     createdAt: 'number',
     changelog: 'string',
+    capabilities: 'string[]?',
   }).or('null'),
   owner: type({
     handle: 'string|null',
@@ -256,7 +257,7 @@ export const ApiV1UnstarResponseSchema = type({
 
 export const SkillInstallSpecSchema = type({
   id: 'string?',
-  kind: '"brew"|"node"|"go"|"uv"',
+  kind: '"brew"|"node"|"go"|"uv"|"download"',
   label: 'string?',
   bins: 'string[]?',
   formula: 'string?',
@@ -299,5 +300,6 @@ export const ClawdisSkillMetadataSchema = type({
   install: SkillInstallSpecSchema.array().optional(),
   nix: NixPluginSpecSchema.optional(),
   config: ClawdbotConfigSpecSchema.optional(),
+  capabilities: 'string[]?',
 })
 export type ClawdisSkillMetadata = (typeof ClawdisSkillMetadataSchema)[inferred]

src/components/SkillCommentsPanel.tsx

@@ -0,0 +1,3 @@
+export function SkillCommentsPanel() {
+  return <div className="skill-panel"><p style={{ color: 'var(--ink-soft)' }}>Comments not available in dev mode.</p></div>
+}

src/components/SkillDetailTabs.tsx

@@ -0,0 +1,100 @@
+import { lazy, Suspense } from 'react'
+import type { Doc, Id } from '../../convex/_generated/dataModel'
+import { SkillVersionsPanel } from './SkillVersionsPanel'
+
+const SkillDiffCard = lazy(() =>
+  import('./SkillDiffCard').then((module) => ({ default: module.SkillDiffCard })),
+)
+
+const SkillFilesPanel = lazy(() =>
+  import('./SkillFilesPanel').then((module) => ({ default: module.SkillFilesPanel })),
+)
+
+type SkillFile = Doc<'skillVersions'>['files'][number]
+
+type SkillDetailTabsProps = {
+  activeTab: 'files' | 'compare' | 'versions'
+  setActiveTab: (tab: 'files' | 'compare' | 'versions') => void
+  onCompareIntent: () => void
+  readmeContent: string | null
+  readmeError: string | null
+  latestFiles: SkillFile[]
+  latestVersionId: Id<'skillVersions'> | null
+  skill: Doc<'skills'>
+  diffVersions: Doc<'skillVersions'>[] | undefined
+  versions: Doc<'skillVersions'>[] | undefined
+  nixPlugin: boolean
+}
+
+export function SkillDetailTabs({
+  activeTab,
+  setActiveTab,
+  onCompareIntent,
+  readmeContent,
+  readmeError,
+  latestFiles,
+  latestVersionId,
+  skill,
+  diffVersions,
+  versions,
+  nixPlugin,
+}: SkillDetailTabsProps) {
+  return (
+    <div className="card tab-card">
+      <div className="tab-header">
+        <button
+          className={`tab-button${activeTab === 'files' ? ' is-active' : ''}`}
+          type="button"
+          onClick={() => setActiveTab('files')}
+        >
+          Files
+        </button>
+        <button
+          className={`tab-button${activeTab === 'compare' ? ' is-active' : ''}`}
+          type="button"
+          onClick={() => setActiveTab('compare')}
+          onMouseEnter={() => {
+            onCompareIntent()
+            void import('./SkillDiffCard')
+          }}
+          onFocus={() => {
+            onCompareIntent()
+            void import('./SkillDiffCard')
+          }}
+        >
+          Compare
+        </button>
+        <button
+          className={`tab-button${activeTab === 'versions' ? ' is-active' : ''}`}
+          type="button"
+          onClick={() => setActiveTab('versions')}
+        >
+          Versions
+        </button>
+      </div>
+
+      {activeTab === 'files' ? (
+        <Suspense fallback={<div className="tab-body stat">Loading file viewer…</div>}>
+          <SkillFilesPanel
+            versionId={latestVersionId}
+            readmeContent={readmeContent}
+            readmeError={readmeError}
+            latestFiles={latestFiles}
+          />
+        </Suspense>
+      ) : null}
+
+      {activeTab === 'compare' ? (
+        <div className="tab-body">
+          <Suspense fallback={<div className="stat">Loading diff viewer…</div>}>
+            <SkillDiffCard skill={skill} versions={diffVersions ?? []} variant="embedded" />
+          </Suspense>
+        </div>
+      ) : null}
+
+      {activeTab === 'versions' ? (
+        <SkillVersionsPanel versions={versions} nixPlugin={nixPlugin} skillSlug={skill.slug} />
+      ) : null}
+    </div>
+  )
+}

src/components/SkillFilesPanel.tsx

@@ -0,0 +1,164 @@
+import { useAction } from 'convex/react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { api } from '../../convex/_generated/api'
+import type { Doc, Id } from '../../convex/_generated/dataModel'
+import { formatBytes } from './skillDetailUtils'
+
+type SkillFile = Doc<'skillVersions'>['files'][number]
+
+type SkillFilesPanelProps = {
+  versionId: Id<'skillVersions'> | null
+  readmeContent: string | null
+  readmeError: string | null
+  latestFiles: SkillFile[]
+}
+
+export function SkillFilesPanel({
+  versionId,
+  readmeContent,
+  readmeError,
+  latestFiles,
+}: SkillFilesPanelProps) {
+  const getFileText = useAction(api.skills.getFileText)
+  const [selectedPath, setSelectedPath] = useState<string | null>(null)
+  const [fileContent, setFileContent] = useState<string | null>(null)
+  const [fileMeta, setFileMeta] = useState<{ size: number; sha256: string } | null>(null)
+  const [fileError, setFileError] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const isMounted = useRef(true)
+  const requestId = useRef(0)
+  const fileCache = useRef(new Map<string, { text: string; size: number; sha256: string }>())
+
+  useEffect(() => {
+    isMounted.current = true
+    return () => {
+      isMounted.current = false
+      requestId.current += 1
+    }
+  }, [])
+
+  useEffect(() => {
+    requestId.current += 1
+
+    setSelectedPath(null)
+    setFileContent(null)
+    setFileMeta(null)
+    setFileError(null)
+    setIsLoading(false)
+
+    if (versionId === null) return
+  }, [versionId])
+
+  const handleSelect = useCallback(
+    (path: string) => {
+      if (!versionId) return
+      const cacheKey = `${versionId}:${path}`
+      const cached = fileCache.current.get(cacheKey)
+
+      requestId.current += 1
+      const current = requestId.current
+      setSelectedPath(path)
+      setFileError(null)
+      if (cached) {
+        setFileContent(cached.text)
+        setFileMeta({ size: cached.size, sha256: cached.sha256 })
+        setIsLoading(false)
+        return
+      }
+
+      setFileContent(null)
+      setFileMeta(null)
+      setIsLoading(true)
+      void getFileText({ versionId, path })
+        .then((data) => {
+          if (!isMounted.current) return
+          if (requestId.current !== current) return
+          fileCache.current.set(cacheKey, data)
+          setFileContent(data.text)
+          setFileMeta({ size: data.size, sha256: data.sha256 })
+          setIsLoading(false)
+        })
+        .catch((error) => {
+          if (!isMounted.current) return
+          if (requestId.current !== current) return
+          setFileError(error instanceof Error ? error.message : 'Failed to load file')
+          setIsLoading(false)
+        })
+    },
+    [getFileText, versionId],
+  )
+
+  return (
+    <div className="tab-body">
+      <div>
+        <h2 className="section-title" style={{ fontSize: '1.2rem', margin: 0 }}>
+          SKILL.md
+        </h2>
+        <div className="markdown">
+          {readmeContent ? (
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{readmeContent}</ReactMarkdown>
+          ) : readmeError ? (
+            <div className="stat">Failed to load SKILL.md: {readmeError}</div>
+          ) : (
+            <div>Loading…</div>
+          )}
+        </div>
+      </div>
+      <div className="file-browser">
+        <div className="file-list">
+          <div className="file-list-header">
+            <h3 className="section-title" style={{ fontSize: '1.05rem', margin: 0 }}>
+              Files
+            </h3>
+            <span className="section-subtitle" style={{ margin: 0 }}>
+              {latestFiles.length} total
+            </span>
+          </div>
+          <div className="file-list-body">
+            {latestFiles.length === 0 ? (
+              <div className="stat">No files available.</div>
+            ) : (
+              latestFiles.map((file) => (
+                <button
+                  key={file.path}
+                  className={`file-row file-row-button${
+                    selectedPath === file.path ? ' is-active' : ''
+                  }`}
+                  type="button"
+                  onClick={() => handleSelect(file.path)}
+                  aria-current={selectedPath === file.path ? 'true' : undefined}
+                >
+                  <span className="file-path">{file.path}</span>
+                  <span className="file-meta">{formatBytes(file.size)}</span>
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+        <div className="file-viewer">
+          <div className="file-viewer-header">
+            <div className="file-path">{selectedPath ?? 'Select a file'}</div>
+            {fileMeta ? (
+              <span className="file-meta">
+                {formatBytes(fileMeta.size)} · {fileMeta.sha256.slice(0, 12)}…
+              </span>
+            ) : null}
+          </div>
+          <div className="file-viewer-body">
+            {isLoading ? (
+              <div className="stat">Loading…</div>
+            ) : fileError ? (
+              <div className="stat">Failed to load file: {fileError}</div>
+            ) : fileContent ? (
+              <pre className="file-viewer-code">{fileContent}</pre>
+            ) : (
+              <div className="stat">Select a file to preview.</div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/SkillHeader.tsx

@@ -0,0 +1,365 @@
+import { Link } from '@tanstack/react-router'
+import type { ClawdisSkillMetadata } from 'clawhub-schema'
+import type { Doc, Id } from '../../convex/_generated/dataModel'
+import { getSkillBadges } from '../lib/badges'
+import { formatCompactStat, formatSkillStatsTriplet } from '../lib/numberFormat'
+import type { PublicSkill, PublicUser } from '../lib/publicUser'
+import { type LlmAnalysis, SecurityScanResults } from './SkillSecurityScanResults'
+import { SkillInstallCard } from './SkillInstallCard'
+import { UserBadge } from './UserBadge'
+
+export type SkillModerationInfo = {
+  isPendingScan: boolean
+  isMalwareBlocked: boolean
+  isSuspicious: boolean
+  isHiddenByMod: boolean
+  isRemoved: boolean
+  reason?: string
+}
+
+type SkillFork = {
+  kind: 'fork' | 'duplicate'
+  version: string | null
+  skill: { slug: string; displayName: string }
+  owner: { handle: string | null; userId: Id<'users'> | null }
+}
+
+type SkillCanonical = {
+  skill: { slug: string; displayName: string }
+  owner: { handle: string | null; userId: Id<'users'> | null }
+}
+
+type SkillHeaderProps = {
+  skill: Doc<'skills'> | PublicSkill
+  owner: Doc<'users'> | PublicUser | null
+  ownerHandle: string | null
+  latestVersion: Doc<'skillVersions'> | null
+  modInfo: SkillModerationInfo | null
+  canManage: boolean
+  isAuthenticated: boolean
+  isStaff: boolean
+  isStarred: boolean | undefined
+  onToggleStar: () => void
+  onOpenReport: () => void
+  forkOf: SkillFork | null
+  forkOfLabel: string
+  forkOfHref: string | null
+  forkOfOwnerHandle: string | null
+  canonical: SkillCanonical | null
+  canonicalHref: string | null
+  canonicalOwnerHandle: string | null
+  staffModerationNote: string | null
+  staffVisibilityTag: string | null
+  isAutoHidden: boolean
+  isRemoved: boolean
+  nixPlugin: string | undefined
+  hasPluginBundle: boolean
+  configRequirements: ClawdisSkillMetadata['config'] | undefined
+  cliHelp: string | undefined
+  tagEntries: Array<[string, Id<'skillVersions'>]>
+  versionById: Map<Id<'skillVersions'>, Doc<'skillVersions'>>
+  tagName: string
+  onTagNameChange: (value: string) => void
+  tagVersionId: Id<'skillVersions'> | ''
+  onTagVersionChange: (value: Id<'skillVersions'> | '') => void
+  onTagSubmit: () => void
+  tagVersions: Doc<'skillVersions'>[]
+  clawdis: ClawdisSkillMetadata | undefined
+  osLabels: string[]
+}
+
+export function SkillHeader({
+  skill,
+  owner,
+  ownerHandle,
+  latestVersion,
+  modInfo,
+  canManage,
+  isAuthenticated,
+  isStaff,
+  isStarred,
+  onToggleStar,
+  onOpenReport,
+  forkOf,
+  forkOfLabel,
+  forkOfHref,
+  forkOfOwnerHandle,
+  canonical,
+  canonicalHref,
+  canonicalOwnerHandle,
+  staffModerationNote,
+  staffVisibilityTag,
+  isAutoHidden,
+  isRemoved,
+  nixPlugin,
+  hasPluginBundle,
+  configRequirements,
+  cliHelp,
+  tagEntries,
+  versionById,
+  tagName,
+  onTagNameChange,
+  tagVersionId,
+  onTagVersionChange,
+  onTagSubmit,
+  tagVersions,
+  clawdis,
+  osLabels,
+}: SkillHeaderProps) {
+  const formattedStats = formatSkillStatsTriplet(skill.stats)
+
+  return (
+    <>
+      {modInfo?.isPendingScan ? (
+        <div className="pending-banner">
+          <div className="pending-banner-content">
+            <strong>Security scan in progress</strong>
+            <p>
+              Your skill is being scanned by VirusTotal. It will be visible to others once the scan
+              completes. This usually takes up to 5 minutes — grab a coffee or exfoliate your shell
+              while you wait.
+            </p>
+          </div>
+        </div>
+      ) : modInfo?.isMalwareBlocked ? (
+        <div className="pending-banner pending-banner-blocked">
+          <div className="pending-banner-content">
+            <strong>Skill blocked — malicious content detected</strong>
+            <p>
+              ClawHub Security flagged this skill as malicious. Downloads are disabled. Review the
+              scan results below.
+            </p>
+          </div>
+        </div>
+      ) : modInfo?.isSuspicious ? (
+        <div className="pending-banner pending-banner-warning">
+          <div className="pending-banner-content">
+            <strong>Skill flagged — suspicious patterns detected</strong>
+            <p>ClawHub Security flagged this skill as suspicious. Review the scan results before using.</p>
+            {canManage ? (
+              <p className="pending-banner-appeal">
+                If you believe this skill has been incorrectly flagged, please{' '}
+                <a
+                  href="https://github.com/openclaw/clawhub/issues"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  submit an issue on GitHub
+                </a>{' '}
+                and we'll break down why it was flagged and what you can do.
+              </p>
+            ) : null}
+          </div>
+        </div>
+      ) : modInfo?.isRemoved ? (
+        <div className="pending-banner pending-banner-blocked">
+          <div className="pending-banner-content">
+            <strong>Skill removed by moderator</strong>
+            <p>This skill has been removed and is not visible to others.</p>
+          </div>
+        </div>
+      ) : modInfo?.isHiddenByMod ? (
+        <div className="pending-banner pending-banner-blocked">
+          <div className="pending-banner-content">
+            <strong>Skill hidden</strong>
+            <p>This skill is currently hidden and not visible to others.</p>
+          </div>
+        </div>
+      ) : null}
+
+      <div className="card skill-hero">
+        <div className={`skill-hero-top${hasPluginBundle ? ' has-plugin' : ''}`}>
+          <div className="skill-hero-header">
+            <div className="skill-hero-title">
+              <div className="skill-hero-title-row">
+                <h1 className="section-title" style={{ margin: 0 }}>
+                  {skill.displayName}
+                </h1>
+                {nixPlugin ? <span className="tag tag-accent">Plugin bundle (nix)</span> : null}
+              </div>
+              <p className="section-subtitle">{skill.summary ?? 'No summary provided.'}</p>
+
+              {isStaff && staffModerationNote ? (
+                <div className="skill-hero-note">{staffModerationNote}</div>
+              ) : null}
+              {nixPlugin ? (
+                <div className="skill-hero-note">
+                  Bundles the skill pack, CLI binary, and config requirements in one Nix install.
+                </div>
+              ) : null}
+              <div className="stat">
+                ⭐ {formattedStats.stars} · ⤓ {formattedStats.downloads} · ⤒{' '}
+                {formatCompactStat(skill.stats.installsCurrent ?? 0)} current ·{' '}
+                {formattedStats.installsAllTime} all-time
+              </div>
+              <div className="stat">
+                <UserBadge user={owner} fallbackHandle={ownerHandle} prefix="by" size="md" showName />
+              </div>
+              {forkOf && forkOfHref ? (
+                <div className="stat">
+                  {forkOfLabel}{' '}
+                  <a href={forkOfHref}>
+                    {forkOfOwnerHandle ? `@${forkOfOwnerHandle}/` : ''}
+                    {forkOf.skill.slug}
+                  </a>
+                  {forkOf.version ? ` (based on ${forkOf.version})` : null}
+                </div>
+              ) : null}
+              {canonicalHref ? (
+                <div className="stat">
+                  canonical:{' '}
+                  <a href={canonicalHref}>
+                    {canonicalOwnerHandle ? `@${canonicalOwnerHandle}/` : ''}
+                    {canonical?.skill?.slug}
+                  </a>
+                </div>
+              ) : null}
+              {getSkillBadges(skill).map((badge) => (
+                <div key={badge} className="tag">
+                  {badge}
+                </div>
+              ))}
+              {isStaff && staffVisibilityTag ? (
+                <div className={`tag${isAutoHidden || isRemoved ? ' tag-accent' : ''}`}>
+                  {staffVisibilityTag}
+                </div>
+              ) : null}
+              <div className="skill-actions">
+                {isAuthenticated ? (
+                  <button
+                    className={`star-toggle${isStarred ? ' is-active' : ''}`}
+                    type="button"
+                    onClick={onToggleStar}
+                    aria-label={isStarred ? 'Unstar skill' : 'Star skill'}
+                  >
+                    <span aria-hidden="true">★</span>
+                  </button>
+                ) : null}
+                {isAuthenticated ? (
+                  <button className="btn btn-ghost" type="button" onClick={onOpenReport}>
+                    Report
+                  </button>
+                ) : null}
+                {isStaff ? (
+                  <Link className="btn" to="/management" search={{ skill: skill.slug }}>
+                    Manage
+                  </Link>
+                ) : null}
+              </div>
+              <SecurityScanResults
+                sha256hash={latestVersion?.sha256hash}
+                vtAnalysis={latestVersion?.vtAnalysis}
+                llmAnalysis={latestVersion?.llmAnalysis as LlmAnalysis | undefined}
+              />
+              {latestVersion?.sha256hash || latestVersion?.llmAnalysis ? (
+                <p className="scan-disclaimer">
+                  Like a lobster shell, security has layers — review code before you run it.
+                </p>
+              ) : null}
+            </div>
+            <div className="skill-hero-cta">
+              <div className="skill-version-pill">
+                <span className="skill-version-label">Current version</span>
+                <strong>v{latestVersion?.version ?? '—'}</strong>
+              </div>
+              {!nixPlugin && !modInfo?.isMalwareBlocked && !modInfo?.isRemoved ? (
+                <a
+                  className="btn btn-primary"
+                  href={`${import.meta.env.VITE_CONVEX_SITE_URL}/api/v1/download?slug=${skill.slug}`}
+                >
+                  Download zip
+                </a>
+              ) : null}
+            </div>
+          </div>
+          {hasPluginBundle ? (
+            <div className="skill-panel bundle-card">
+              <div className="bundle-header">
+                <div className="bundle-title">Plugin bundle (nix)</div>
+                <div className="bundle-subtitle">Skill pack · CLI binary · Config</div>
+              </div>
+              <div className="bundle-includes">
+                <span>SKILL.md</span>
+                <span>CLI</span>
+                <span>Config</span>
+              </div>
+              {configRequirements ? (
+                <div className="bundle-section">
+                  <div className="bundle-section-title">Config requirements</div>
+                  <div className="bundle-meta">
+                    {configRequirements.requiredEnv?.length ? (
+                      <div className="stat">
+                        <strong>Required env</strong>
+                        <span>{configRequirements.requiredEnv.join(', ')}</span>
+                      </div>
+                    ) : null}
+                    {configRequirements.stateDirs?.length ? (
+                      <div className="stat">
+                        <strong>State dirs</strong>
+                        <span>{configRequirements.stateDirs.join(', ')}</span>
+                      </div>
+                    ) : null}
+                  </div>
+                </div>
+              ) : null}
+              {cliHelp ? (
+                <details className="bundle-section bundle-details">
+                  <summary>CLI help (from plugin)</summary>
+                  <pre className="hero-install-code mono">{cliHelp}</pre>
+                </details>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+
+        <div className="skill-tag-row">
+          {tagEntries.length === 0 ? (
+            <span className="section-subtitle" style={{ margin: 0 }}>
+              No tags yet.
+            </span>
+          ) : (
+            tagEntries.map(([tag, versionId]) => (
+              <span key={tag} className="tag">
+                {tag}
+                <span className="tag-meta">v{versionById.get(versionId)?.version ?? versionId}</span>
+              </span>
+            ))
+          )}
+        </div>
+
+        {canManage ? (
+          <form
+            onSubmit={(event) => {
+              event.preventDefault()
+              onTagSubmit()
+            }}
+            className="tag-form"
+          >
+            <input
+              className="search-input"
+              value={tagName}
+              onChange={(event) => onTagNameChange(event.target.value)}
+              placeholder="latest"
+            />
+            <select
+              className="search-input"
+              value={tagVersionId ?? ''}
+              onChange={(event) => onTagVersionChange(event.target.value as Id<'skillVersions'>)}
+            >
+              {tagVersions.map((version) => (
+                <option key={version._id} value={version._id}>
+                  v{version.version}
+                </option>
+              ))}
+            </select>
+            <button className="btn" type="submit">
+              Update tag
+            </button>
+          </form>
+        ) : null}
+
+        <SkillInstallCard clawdis={clawdis} osLabels={osLabels} />
+      </div>
+    </>
+  )
+}

src/components/SkillInstallCard.tsx

@@ -0,0 +1,132 @@
+import type { ClawdisSkillMetadata } from 'clawhub-schema'
+import { formatInstallCommand, formatInstallLabel } from './skillDetailUtils'
+
+const CAPABILITY_DISPLAY: Record<string, { icon: string; label: string }> = {
+  shell: { icon: '>_', label: 'Shell commands' },
+  filesystem: { icon: '\uD83D\uDCC2', label: 'File access' },
+  network: { icon: '\uD83C\uDF10', label: 'Network requests' },
+  browser: { icon: '\uD83D\uDD0D', label: 'Browser control' },
+  sessions: { icon: '\u26A1', label: 'Session orchestration' },
+}
+
+type SkillInstallCardProps = {
+  clawdis: ClawdisSkillMetadata | undefined
+  osLabels: string[]
+}
+
+export function SkillInstallCard({ clawdis, osLabels }: SkillInstallCardProps) {
+  const requirements = clawdis?.requires
+  const installSpecs = clawdis?.install ?? []
+  const hasRuntimeRequirements = Boolean(
+    clawdis?.emoji ||
+      osLabels.length ||
+      requirements?.bins?.length ||
+      requirements?.anyBins?.length ||
+      requirements?.env?.length ||
+      requirements?.config?.length ||
+      clawdis?.primaryEnv,
+  )
+  const hasInstallSpecs = installSpecs.length > 0
+  const hasCapabilities = Boolean(clawdis?.capabilities?.length)
+
+  return (
+    <div className="skill-hero-content">
+      <div className="skill-hero-panels">
+        {hasCapabilities ? (
+          <div className="skill-panel">
+            <h3 className="section-title" style={{ fontSize: '1rem', margin: 0 }}>
+              Capabilities
+            </h3>
+            <div className="skill-panel-body">
+              {clawdis!.capabilities!.map((cap) => (
+                <div key={cap} className="stat">
+                  <span>{CAPABILITY_DISPLAY[cap]?.icon ?? cap}</span>
+                  <span>{CAPABILITY_DISPLAY[cap]?.label ?? cap}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : (
+          <div className="skill-panel">
+            <div className="skill-panel-body">
+              <div className="stat" style={{ color: 'var(--ink-soft)' }}>
+                <span>No capabilities declared</span>
+              </div>
+            </div>
+          </div>
+        )}
+        {hasRuntimeRequirements ? (
+          <div className="skill-panel">
+            <h3 className="section-title" style={{ fontSize: '1rem', margin: 0 }}>
+              Runtime requirements
+            </h3>
+            <div className="skill-panel-body">
+              {clawdis?.emoji ? <div className="tag">{clawdis.emoji} Clawdis</div> : null}
+              {osLabels.length ? (
+                <div className="stat">
+                  <strong>OS</strong>
+                  <span>{osLabels.join(' · ')}</span>
+                </div>
+              ) : null}
+              {requirements?.bins?.length ? (
+                <div className="stat">
+                  <strong>Bins</strong>
+                  <span>{requirements.bins.join(', ')}</span>
+                </div>
+              ) : null}
+              {requirements?.anyBins?.length ? (
+                <div className="stat">
+                  <strong>Any bin</strong>
+                  <span>{requirements.anyBins.join(', ')}</span>
+                </div>
+              ) : null}
+              {requirements?.env?.length ? (
+                <div className="stat">
+                  <strong>Env</strong>
+                  <span>{requirements.env.join(', ')}</span>
+                </div>
+              ) : null}
+              {requirements?.config?.length ? (
+                <div className="stat">
+                  <strong>Config</strong>
+                  <span>{requirements.config.join(', ')}</span>
+                </div>
+              ) : null}
+              {clawdis?.primaryEnv ? (
+                <div className="stat">
+                  <strong>Primary env</strong>
+                  <span>{clawdis.primaryEnv}</span>
+                </div>
+              ) : null}
+            </div>
+          </div>
+        ) : null}
+        {hasInstallSpecs ? (
+          <div className="skill-panel">
+            <h3 className="section-title" style={{ fontSize: '1rem', margin: 0 }}>
+              Install
+            </h3>
+            <div className="skill-panel-body">
+              {installSpecs.map((spec, index) => {
+                const command = formatInstallCommand(spec)
+                return (
+                  <div key={`${spec.id ?? spec.kind}-${index}`} className="stat">
+                    <div>
+                      <strong>{spec.label ?? formatInstallLabel(spec)}</strong>
+                      {spec.bins?.length ? (
+                        <div style={{ color: 'var(--ink-soft)', fontSize: '0.85rem' }}>
+                          Bins: {spec.bins.join(', ')}
+                        </div>
+                      ) : null}
+                      {command ? <code>{command}</code> : null}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}

src/components/SkillReportDialog.tsx

@@ -0,0 +1,3 @@
+export function SkillReportDialog(_props: { slug: string; open: boolean; onClose: () => void }) {
+  return null
+}

src/components/SkillSecurityScanResults.tsx

@@ -0,0 +1,293 @@
+import { useState } from 'react'
+
+type LlmAnalysisDimension = {
+  name: string
+  label: string
+  rating: string
+  detail: string
+}
+
+export type VtAnalysis = {
+  status: string
+  verdict?: string
+  analysis?: string
+  source?: string
+  checkedAt: number
+}
+
+export type LlmAnalysis = {
+  status: string
+  verdict?: string
+  confidence?: string
+  summary?: string
+  dimensions?: LlmAnalysisDimension[]
+  guidance?: string
+  findings?: string
+  model?: string
+  checkedAt: number
+}
+
+type SecurityScanResultsProps = {
+  sha256hash?: string
+  vtAnalysis?: VtAnalysis | null
+  llmAnalysis?: LlmAnalysis | null
+  variant?: 'panel' | 'badge'
+}
+
+function VirusTotalIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="1em"
+      height="1em"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 100 89"
+      aria-label="VirusTotal"
+    >
+      <title>VirusTotal</title>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M45.292 44.5 0 89h100V0H0l45.292 44.5zM90 80H22l35.987-35.2L22 9h68v71z"
+      />
+    </svg>
+  )
+}
+
+function OpenClawIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-label="OpenClaw"
+    >
+      <title>OpenClaw</title>
+      <path
+        d="M12 2C8.5 2 5.5 4 4 7c-2 4-1 8 2 11 1.5 1.5 3.5 2.5 6 2.5s4.5-1 6-2.5c3-3 4-7 2-11-1.5-3-4.5-5-8-5z"
+        fill="currentColor"
+        opacity="0.2"
+      />
+      <path
+        d="M9 8c1-2 3-3 5-2s3 3 2 5l-3 4-2-1 3-4c.5-1 0-2-1-2.5S11 7 10.5 8L8 12l-2-1 3-4z"
+        fill="currentColor"
+      />
+      <path
+        d="M15 8c-1-2-3-3-5-2s-3 3-2 5l3 4 2-1-3-4c-.5-1 0-2 1-2.5S14 7 14.5 8L17 12l2-1-4-3z"
+        fill="currentColor"
+        opacity="0.6"
+      />
+    </svg>
+  )
+}
+
+function getScanStatusInfo(status: string) {
+  switch (status.toLowerCase()) {
+    case 'benign':
+    case 'clean':
+      return { label: 'Benign', className: 'scan-status-clean' }
+    case 'malicious':
+      return { label: 'Malicious', className: 'scan-status-malicious' }
+    case 'suspicious':
+      return { label: 'Suspicious', className: 'scan-status-suspicious' }
+    case 'loading':
+      return { label: 'Loading...', className: 'scan-status-pending' }
+    case 'pending':
+    case 'not_found':
+      return { label: 'Pending', className: 'scan-status-pending' }
+    case 'error':
+    case 'failed':
+      return { label: 'Error', className: 'scan-status-error' }
+    default:
+      return { label: status, className: 'scan-status-unknown' }
+  }
+}
+
+function getDimensionIcon(rating: string) {
+  switch (rating) {
+    case 'ok':
+      return { className: 'dimension-icon-ok', symbol: '\u2713' }
+    case 'note':
+      return { className: 'dimension-icon-note', symbol: '\u2139' }
+    case 'concern':
+      return { className: 'dimension-icon-concern', symbol: '!' }
+    default:
+      return { className: 'dimension-icon-danger', symbol: '\u2717' }
+  }
+}
+
+function LlmAnalysisDetail({ analysis }: { analysis: LlmAnalysis }) {
+  const verdict = analysis.verdict ?? analysis.status
+  const [isOpen, setIsOpen] = useState(false)
+
+  const guidanceClass =
+    verdict === 'malicious' ? 'malicious' : verdict === 'suspicious' ? 'suspicious' : 'benign'
+
+  return (
+    <div className={`analysis-detail${isOpen ? ' is-open' : ''}`}>
+      <button
+        type="button"
+        className="analysis-detail-header"
+        onClick={() => {
+          const selection = window.getSelection()
+          if (selection && !selection.isCollapsed) return
+          setIsOpen((prev) => !prev)
+        }}
+        aria-expanded={isOpen}
+      >
+        <span className="analysis-summary-text">{analysis.summary}</span>
+        <span className="analysis-detail-toggle">
+          Details <span className="chevron">{'\u25BE'}</span>
+        </span>
+      </button>
+      <div className="analysis-body">
+        {analysis.dimensions && analysis.dimensions.length > 0 ? (
+          <div className="analysis-dimensions">
+            {analysis.dimensions.map((dim) => {
+              const icon = getDimensionIcon(dim.rating)
+              return (
+                <div key={dim.name} className="dimension-row">
+                  <div className={`dimension-icon ${icon.className}`}>{icon.symbol}</div>
+                  <div className="dimension-content">
+                    <div className="dimension-label">{dim.label}</div>
+                    <div className="dimension-detail">{dim.detail}</div>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        ) : null}
+        {analysis.findings ? (
+          <div className="scan-findings-section">
+            <div className="scan-findings-title">Scan Findings in Context</div>
+            {(() => {
+              const counts = new Map<string, number>()
+              return analysis.findings.split('\n').map((line) => {
+                const count = (counts.get(line) ?? 0) + 1
+                counts.set(line, count)
+                return (
+                  <div key={`${line}-${count}`} className="scan-finding-row">
+                    {line}
+                  </div>
+                )
+              })
+            })()}
+          </div>
+        ) : null}
+        {analysis.guidance ? (
+          <div className={`analysis-guidance ${guidanceClass}`}>
+            <div className="analysis-guidance-label">
+              {verdict === 'malicious'
+                ? 'Do not install this skill'
+                : verdict === 'suspicious'
+                  ? 'What to consider before installing'
+                  : 'Assessment'}
+            </div>
+            {analysis.guidance}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+export function SecurityScanResults({
+  sha256hash,
+  vtAnalysis,
+  llmAnalysis,
+  variant = 'panel',
+}: SecurityScanResultsProps) {
+  if (!sha256hash && !llmAnalysis) return null
+
+  const vtStatus = vtAnalysis?.status ?? 'pending'
+  const vtUrl = sha256hash ? `https://www.virustotal.com/gui/file/${sha256hash}` : null
+  const vtStatusInfo = getScanStatusInfo(vtStatus)
+  const isCodeInsight = vtAnalysis?.source === 'code_insight'
+  const aiAnalysis = vtAnalysis?.analysis
+
+  const llmVerdict = llmAnalysis?.verdict ?? llmAnalysis?.status
+  const llmStatusInfo = llmVerdict ? getScanStatusInfo(llmVerdict) : null
+
+  if (variant === 'badge') {
+    return (
+      <>
+        {sha256hash ? (
+          <div className="version-scan-badge">
+            <VirusTotalIcon className="version-scan-icon version-scan-icon-vt" />
+            <span className={vtStatusInfo.className}>{vtStatusInfo.label}</span>
+            {vtUrl ? (
+              <a
+                href={vtUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="version-scan-link"
+                onClick={(event) => event.stopPropagation()}
+              >
+                ↗
+              </a>
+            ) : null}
+          </div>
+        ) : null}
+        {llmStatusInfo ? (
+          <div className="version-scan-badge">
+            <OpenClawIcon className="version-scan-icon version-scan-icon-oc" />
+            <span className={llmStatusInfo.className}>{llmStatusInfo.label}</span>
+          </div>
+        ) : null}
+      </>
+    )
+  }
+
+  return (
+    <div className="scan-results-panel">
+      <div className="scan-results-title">Security Scan</div>
+      <div className="scan-results-list">
+        {sha256hash ? (
+          <div className="scan-result-row">
+            <div className="scan-result-scanner">
+              <VirusTotalIcon className="scan-result-icon scan-result-icon-vt" />
+              <span className="scan-result-scanner-name">VirusTotal</span>
+            </div>
+            <div className={`scan-result-status ${vtStatusInfo.className}`}>{vtStatusInfo.label}</div>
+            {vtUrl ? (
+              <a
+                href={vtUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="scan-result-link"
+              >
+                View report →
+              </a>
+            ) : null}
+          </div>
+        ) : null}
+        {isCodeInsight && aiAnalysis && (vtStatus === 'malicious' || vtStatus === 'suspicious') ? (
+          <div className={`code-insight-analysis ${vtStatus}`}>
+            <div className="code-insight-label">Code Insight</div>
+            <p className="code-insight-text">{aiAnalysis}</p>
+          </div>
+        ) : null}
+        {llmStatusInfo && llmAnalysis ? (
+          <div className="scan-result-row">
+            <div className="scan-result-scanner">
+              <OpenClawIcon className="scan-result-icon scan-result-icon-oc" />
+              <span className="scan-result-scanner-name">OpenClaw</span>
+            </div>
+            <div className={`scan-result-status ${llmStatusInfo.className}`}>{llmStatusInfo.label}</div>
+            {llmAnalysis.confidence ? (
+              <span className="scan-result-confidence">{llmAnalysis.confidence} confidence</span>
+            ) : null}
+          </div>
+        ) : null}
+        {llmAnalysis &&
+        llmAnalysis.status !== 'error' &&
+        llmAnalysis.status !== 'pending' &&
+        llmAnalysis.summary ? (
+          <LlmAnalysisDetail analysis={llmAnalysis} />
+        ) : null}
+      </div>
+    </div>
+  )
+}

src/components/SkillStats.tsx

@@ -0,0 +1,26 @@
+import { formatSkillStatsTriplet, type SkillStatsTriplet } from '../lib/numberFormat'
+
+type SkillMetricsStats = SkillStatsTriplet & {
+  versions: number
+}
+
+export function SkillStatsTripletLine({ stats }: { stats: SkillStatsTriplet }) {
+  const formatted = formatSkillStatsTriplet(stats)
+  return (
+    <>
+      ⭐ {formatted.stars} · ⤓ {formatted.downloads} · ⤒ {formatted.installsAllTime}
+    </>
+  )
+}
+
+export function SkillMetricsRow({ stats }: { stats: SkillMetricsStats }) {
+  const formatted = formatSkillStatsTriplet(stats)
+  return (
+    <>
+      <span>⤓ {formatted.downloads}</span>
+      <span>⤒ {formatted.installsAllTime}</span>
+      <span>★ {formatted.stars}</span>
+      <span>{stats.versions} v</span>
+    </>
+  )
+}

src/components/SkillVersionsPanel.tsx

@@ -0,0 +1,3 @@
+export function SkillVersionsPanel(_props: { skillId?: string }) {
+  return <div className="skill-panel"><p style={{ color: 'var(--ink-soft)' }}>Versions not available in dev mode.</p></div>
+}

src/components/UserBadge.tsx

@@ -0,0 +1,8 @@
+export function UserBadge({ handle, displayName, image }: { handle?: string | null; displayName?: string | null; image?: string | null }) {
+  return (
+    <span className="user-badge">
+      {image ? <img src={image} alt="" style={{ width: 20, height: 20, borderRadius: '50%', marginRight: 4 }} /> : null}
+      <span>{displayName ?? handle ?? 'Unknown'}</span>
+    </span>
+  )
+}

src/components/skillDetailUtils.ts

@@ -0,0 +1,63 @@
+import type { SkillInstallSpec, NixPluginSpec } from 'clawhub-schema'
+
+const OS_LABELS: Record<string, string> = {
+  macos: 'macOS',
+  linux: 'Linux',
+  windows: 'Windows',
+}
+
+export function formatOsList(os?: string[]): string[] {
+  if (!os?.length) return []
+  return os.map((o) => OS_LABELS[o.toLowerCase()] ?? o)
+}
+
+export function stripFrontmatter(content: string): string {
+  const normalized = content.replace(/\r\n/g, '\n')
+  if (!normalized.startsWith('---')) return content
+  const endIndex = normalized.indexOf('\n---', 3)
+  if (endIndex === -1) return content
+  return normalized.slice(endIndex + 4).trimStart()
+}
+
+export function buildSkillHref(slug: string, ownerHandle?: string | null): string {
+  const owner = ownerHandle?.trim() || '_'
+  return `/${encodeURIComponent(owner)}/${encodeURIComponent(slug)}`
+}
+
+export function formatInstallLabel(spec: SkillInstallSpec): string {
+  if (spec.label) return spec.label
+  if (spec.kind === 'brew') return spec.formula ?? 'Homebrew'
+  if (spec.kind === 'node') return spec.package ?? 'npm'
+  if (spec.kind === 'go') return spec.module ?? 'Go'
+  if (spec.kind === 'uv') return spec.package ?? 'uv'
+  return spec.kind
+}
+
+export function formatInstallCommand(spec: SkillInstallSpec): string | null {
+  if (spec.kind === 'brew') {
+    const tap = spec.tap ? `brew tap ${spec.tap} && ` : ''
+    return `${tap}brew install ${spec.formula ?? ''}`
+  }
+  if (spec.kind === 'node') return `npm install -g ${spec.package ?? ''}`
+  if (spec.kind === 'go') return `go install ${spec.module ?? ''}`
+  if (spec.kind === 'uv') return `uv tool install ${spec.package ?? ''}`
+  return null
+}
+
+export function formatConfigSnippet(config: { requiredEnv?: string[]; stateDirs?: string[]; example?: string }): string {
+  const lines: string[] = []
+  if (config.requiredEnv?.length) lines.push(`Required env: ${config.requiredEnv.join(', ')}`)
+  if (config.stateDirs?.length) lines.push(`State dirs: ${config.stateDirs.join(', ')}`)
+  if (config.example) lines.push(`Example:\n${config.example}`)
+  return lines.join('\n')
+}
+
+export function formatNixInstallSnippet(nix: NixPluginSpec): string {
+  return `nix profile install ${nix.plugin}`
+}
+
+export function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}

src/lib/numberFormat.ts

@@ -0,0 +1,19 @@
+export type SkillStatsTriplet = { label: string; value: string }
+
+export function formatCompactStat(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`
+  return String(n)
+}
+
+export function formatSkillStatsTriplet(stats: {
+  downloads?: number
+  installs?: number
+  stars?: number
+}): SkillStatsTriplet[] {
+  return [
+    { label: 'Downloads', value: formatCompactStat(stats.downloads ?? 0) },
+    { label: 'Installs', value: formatCompactStat(stats.installs ?? 0) },
+    { label: 'Stars', value: formatCompactStat(stats.stars ?? 0) },
+  ]
+}

src/lib/skillPageEntries.ts

@@ -0,0 +1,28 @@
+import type { PublicSkill } from './publicUser'
+
+type SkillPageEntry = {
+  skill?: PublicSkill | null
+}
+
+function normalizeSkillStats(skill: PublicSkill): PublicSkill {
+  const stats = skill.stats
+  return {
+    ...skill,
+    stats: {
+      downloads: stats?.downloads ?? 0,
+      stars: stats?.stars ?? 0,
+      installsCurrent: stats?.installsCurrent ?? 0,
+      installsAllTime: stats?.installsAllTime ?? 0,
+      versions: stats?.versions ?? 0,
+      comments: stats?.comments ?? 0,
+    },
+  }
+}
+
+export function mapPublicSkillPageEntries(page: SkillPageEntry[] | undefined): PublicSkill[] {
+  if (!page?.length) return []
+  return page
+    .map((entry) => entry.skill ?? null)
+    .filter((skill): skill is PublicSkill => skill !== null)
+    .map(normalizeSkillStats)
+}

src/routes/skills/-SkillsResults.tsx

@@ -0,0 +1,131 @@
+import { Link } from '@tanstack/react-router'
+import type { RefObject } from 'react'
+import { SkillCard } from '../../components/SkillCard'
+import { SkillMetricsRow, SkillStatsTripletLine } from '../../components/SkillStats'
+import { UserBadge } from '../../components/UserBadge'
+import { getSkillBadges } from '../../lib/badges'
+import { buildSkillHref, type SkillListEntry } from './-types'
+
+type SkillsResultsProps = {
+  isLoadingSkills: boolean
+  sorted: SkillListEntry[]
+  view: 'cards' | 'list'
+  paginationStatus: 'LoadingFirstPage' | 'CanLoadMore' | 'LoadingMore' | 'Exhausted'
+  hasQuery: boolean
+  canLoadMore: boolean
+  isLoadingMore: boolean
+  canAutoLoad: boolean
+  loadMoreRef: RefObject<HTMLDivElement | null>
+  loadMore: () => void
+}
+
+export function SkillsResults({
+  isLoadingSkills,
+  sorted,
+  view,
+  paginationStatus,
+  hasQuery,
+  canLoadMore,
+  isLoadingMore,
+  canAutoLoad,
+  loadMoreRef,
+  loadMore,
+}: SkillsResultsProps) {
+  return (
+    <>
+      {isLoadingSkills ? (
+        <div className="card">
+          <div className="loading-indicator">Loading skills…</div>
+        </div>
+      ) : sorted.length === 0 ? (
+        <div className="card">
+          {paginationStatus === 'Exhausted' || hasQuery
+            ? 'No skills match that filter.'
+            : 'Loading skills…'}
+        </div>
+      ) : view === 'cards' ? (
+        <div className="grid">
+          {sorted.map((entry) => {
+            const skill = entry.skill
+            const isPlugin = Boolean(entry.latestVersion?.parsed?.clawdis?.nix?.plugin)
+            const ownerHandle = entry.owner?.handle ?? entry.owner?.name ?? entry.ownerHandle ?? null
+            const skillHref = buildSkillHref(skill, ownerHandle)
+            return (
+              <SkillCard
+                key={skill._id}
+                skill={skill}
+                href={skillHref}
+                badge={getSkillBadges(skill)}
+                chip={isPlugin ? 'Plugin bundle (nix)' : undefined}
+                summaryFallback="Agent-ready skill pack."
+                meta={
+                  <div className="skill-card-footer-rows">
+                    <UserBadge user={entry.owner} fallbackHandle={ownerHandle} prefix="by" link={false} />
+                    <div className="stat">
+                      <SkillStatsTripletLine stats={skill.stats} />
+                    </div>
+                  </div>
+                }
+              />
+            )
+          })}
+        </div>
+      ) : (
+        <div className="skills-list">
+          {sorted.map((entry) => {
+            const skill = entry.skill
+            const isPlugin = Boolean(entry.latestVersion?.parsed?.clawdis?.nix?.plugin)
+            const ownerHandle = entry.owner?.handle ?? entry.owner?.name ?? entry.ownerHandle ?? null
+            const skillHref = buildSkillHref(skill, ownerHandle)
+            return (
+              <Link key={skill._id} className="skills-row" to={skillHref}>
+                <div className="skills-row-main">
+                  <div className="skills-row-title">
+                    <span>{skill.displayName}</span>
+                    <span className="skills-row-slug">/{skill.slug}</span>
+                    {getSkillBadges(skill).map((badge) => (
+                      <span key={badge} className="tag">
+                        {badge}
+                      </span>
+                    ))}
+                    {isPlugin ? <span className="tag tag-accent tag-compact">Plugin bundle (nix)</span> : null}
+                  </div>
+                  <div className="skills-row-summary">{skill.summary ?? 'No summary provided.'}</div>
+                  <div className="skills-row-owner">
+                    <UserBadge user={entry.owner} fallbackHandle={ownerHandle} prefix="by" link={false} />
+                  </div>
+                  {isPlugin ? (
+                    <div className="skills-row-meta">Bundle includes SKILL.md, CLI, and config.</div>
+                  ) : null}
+                </div>
+                <div className="skills-row-metrics">
+                  <SkillMetricsRow stats={skill.stats} />
+                </div>
+              </Link>
+            )
+          })}
+        </div>
+      )}
+
+      {canLoadMore || isLoadingMore ? (
+        <div
+          ref={canAutoLoad ? loadMoreRef : null}
+          className="card"
+          style={{ marginTop: 16, display: 'flex', justifyContent: 'center' }}
+        >
+          {canAutoLoad ? (
+            isLoadingMore ? (
+              'Loading more…'
+            ) : (
+              'Scroll to load more'
+            )
+          ) : (
+            <button className="btn" type="button" onClick={loadMore} disabled={isLoadingMore}>
+              {isLoadingMore ? 'Loading…' : 'Load more'}
+            </button>
+          )}
+        </div>
+      ) : null}
+    </>
+  )
+}

src/routes/skills/-SkillsToolbar.tsx

@@ -0,0 +1,92 @@
+import type { RefObject } from 'react'
+import { type SortDir, type SortKey } from './-params'
+
+type SkillsToolbarProps = {
+  searchInputRef: RefObject<HTMLInputElement | null>
+  query: string
+  hasQuery: boolean
+  sort: SortKey
+  dir: SortDir
+  view: 'cards' | 'list'
+  highlightedOnly: boolean
+  nonSuspiciousOnly: boolean
+  onQueryChange: (next: string) => void
+  onToggleHighlighted: () => void
+  onToggleNonSuspicious: () => void
+  onSortChange: (value: string) => void
+  onToggleDir: () => void
+  onToggleView: () => void
+}
+
+export function SkillsToolbar({
+  searchInputRef,
+  query,
+  hasQuery,
+  sort,
+  dir,
+  view,
+  highlightedOnly,
+  nonSuspiciousOnly,
+  onQueryChange,
+  onToggleHighlighted,
+  onToggleNonSuspicious,
+  onSortChange,
+  onToggleDir,
+  onToggleView,
+}: SkillsToolbarProps) {
+  return (
+    <div className="skills-toolbar">
+      <div className="skills-search">
+        <input
+          ref={searchInputRef}
+          className="skills-search-input"
+          value={query}
+          onChange={(event) => onQueryChange(event.target.value)}
+          placeholder="Filter by name, slug, or summary…"
+        />
+      </div>
+      <div className="skills-toolbar-row">
+        <button
+          className={`search-filter-button${highlightedOnly ? ' is-active' : ''}`}
+          type="button"
+          aria-pressed={highlightedOnly}
+          onClick={onToggleHighlighted}
+        >
+          Highlighted
+        </button>
+        <button
+          className={`search-filter-button${nonSuspiciousOnly ? ' is-active' : ''}`}
+          type="button"
+          aria-pressed={nonSuspiciousOnly}
+          onClick={onToggleNonSuspicious}
+        >
+          Hide suspicious
+        </button>
+        <select
+          className="skills-sort"
+          value={sort}
+          onChange={(event) => onSortChange(event.target.value)}
+          aria-label="Sort skills"
+        >
+          {hasQuery ? <option value="relevance">Relevance</option> : null}
+          <option value="newest">Newest</option>
+          <option value="updated">Recently updated</option>
+          <option value="downloads">Downloads</option>
+          <option value="installs">Installs</option>
+          <option value="stars">Stars</option>
+          <option value="name">Name</option>
+        </select>
+        <button className="skills-dir" type="button" aria-label={`Sort direction ${dir}`} onClick={onToggleDir}>
+          {dir === 'asc' ? '↑' : '↓'}
+        </button>
+        <button
+          className={`skills-view${view === 'cards' ? ' is-active' : ''}`}
+          type="button"
+          onClick={onToggleView}
+        >
+          {view === 'cards' ? 'List' : 'Cards'}
+        </button>
+      </div>
+    </div>
+  )
+}

src/routes/skills/-params.ts

@@ -0,0 +1,9 @@
+export type SortKey = 'relevance' | 'newest' | 'updated' | 'downloads' | 'installs' | 'stars' | 'name'
+export type SortDir = 'asc' | 'desc'
+
+const VALID_SORTS = new Set<SortKey>(['relevance', 'newest', 'updated', 'downloads', 'installs', 'stars', 'name'])
+
+export function parseSort(raw: string): SortKey | undefined {
+  const normalized = raw.trim().toLowerCase()
+  return VALID_SORTS.has(normalized as SortKey) ? (normalized as SortKey) : undefined
+}

src/routes/skills/-types.ts

@@ -0,0 +1,35 @@
+import type { Doc } from '../../../convex/_generated/dataModel'
+import type { PublicSkill, PublicUser } from '../../lib/publicUser'
+
+export type SkillListEntry = {
+  skill: PublicSkill
+  latestVersion: {
+    version: string
+    createdAt: number
+    changelog: string
+    changelogSource?: 'auto' | 'user'
+    parsed?: {
+      clawdis?: {
+        nix?: {
+          plugin?: boolean
+        }
+      }
+    }
+  } | null
+  ownerHandle?: string | null
+  owner?: PublicUser | null
+  searchScore?: number
+}
+
+export type SkillSearchEntry = {
+  skill: PublicSkill
+  version: Doc<'skillVersions'> | null
+  score: number
+  ownerHandle?: string | null
+  owner?: PublicUser | null
+}
+
+export function buildSkillHref(skill: PublicSkill, ownerHandle?: string | null) {
+  const owner = ownerHandle?.trim() || String(skill.ownerUserId)
+  return `/${encodeURIComponent(owner)}/${encodeURIComponent(skill.slug)}`
+}

src/routes/skills/-useSkillsBrowseModel.ts

@@ -0,0 +1,60 @@
+import { useCallback, useRef, useState } from 'react'
+import type { RefObject } from 'react'
+import type { SortDir, SortKey } from './-params'
+import type { SkillListEntry } from './-types'
+
+type UseSkillsBrowseModelParams = {
+  navigate: (opts: { search: (prev: Record<string, unknown>) => Record<string, unknown> }) => void
+  search: {
+    q?: string
+    sort?: SortKey
+    dir?: SortDir
+    highlighted?: boolean
+    nonSuspicious?: boolean
+    view?: 'cards' | 'list'
+    focus?: string
+  }
+  searchInputRef: RefObject<HTMLInputElement | null>
+}
+
+export function useSkillsBrowseModel({ navigate, search }: UseSkillsBrowseModelParams) {
+  const query = search.q ?? ''
+  const hasQuery = Boolean(query.trim())
+  const sort: SortKey = search.sort ?? (hasQuery ? 'relevance' : 'downloads')
+  const dir: SortDir = search.dir ?? 'desc'
+  const view = search.view ?? 'cards'
+  const highlightedOnly = search.highlighted ?? false
+  const nonSuspiciousOnly = search.nonSuspicious ?? false
+
+  const updateSearch = useCallback(
+    (updates: Record<string, unknown>) => {
+      navigate({ search: (prev: Record<string, unknown>) => ({ ...prev, ...updates }) })
+    },
+    [navigate],
+  )
+
+  return {
+    query,
+    hasQuery,
+    sort,
+    dir,
+    view,
+    highlightedOnly,
+    nonSuspiciousOnly,
+    isLoadingSkills: false,
+    sorted: [] as SkillListEntry[],
+    paginationStatus: 'Exhausted' as const,
+    canLoadMore: false,
+    isLoadingMore: false,
+    canAutoLoad: false,
+    loadMoreRef: useRef<HTMLDivElement>(null),
+    activeFilters: [] as string[],
+    loadMore: () => {},
+    onQueryChange: (next: string) => updateSearch({ q: next || undefined }),
+    onToggleHighlighted: () => updateSearch({ highlighted: highlightedOnly ? undefined : true }),
+    onToggleNonSuspicious: () => updateSearch({ nonSuspicious: nonSuspiciousOnly ? undefined : true }),
+    onSortChange: (value: string) => updateSearch({ sort: value }),
+    onToggleDir: () => updateSearch({ dir: dir === 'asc' ? 'desc' : 'asc' }),
+    onToggleView: () => updateSearch({ view: view === 'cards' ? 'list' : 'cards' }),
+  }
+}

src/routes/skills/index.tsx

@@ -1,46 +1,9 @@
-import { createFileRoute, Link } from '@tanstack/react-router'
-import { useAction } from 'convex/react'
-import { usePaginatedQuery } from 'convex-helpers/react'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { api } from '../../../convex/_generated/api'
-import type { Doc } from '../../../convex/_generated/dataModel'
-import { SkillCard } from '../../components/SkillCard'
-import { getSkillBadges, isSkillHighlighted } from '../../lib/badges'
-import type { PublicSkill } from '../../lib/publicUser'
-
-const sortKeys = ['newest', 'downloads', 'installs', 'stars', 'name', 'updated'] as const
-const pageSize = 25
-type SortKey = (typeof sortKeys)[number]
-type SortDir = 'asc' | 'desc'
-
-function parseSort(value: unknown): SortKey {
-  if (typeof value !== 'string') return 'newest'
-  if ((sortKeys as readonly string[]).includes(value)) return value as SortKey
-  return 'newest'
-}
-
-function parseDir(value: unknown, sort: SortKey): SortDir {
-  if (value === 'asc' || value === 'desc') return value
-  return sort === 'name' ? 'asc' : 'desc'
-}
-
-type SkillListEntry = {
-  skill: PublicSkill
-  latestVersion: Doc<'skillVersions'> | null
-  ownerHandle?: string | null
-}
-
-type SkillSearchEntry = {
-  skill: PublicSkill
-  version: Doc<'skillVersions'> | null
-  score: number
-  ownerHandle?: string | null
-}
-
-function buildSkillHref(skill: PublicSkill, ownerHandle?: string | null) {
-  const owner = ownerHandle?.trim() || String(skill.ownerUserId)
-  return `/${encodeURIComponent(owner)}/${encodeURIComponent(skill.slug)}`
-}
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { useRef } from 'react'
+import { parseSort } from './-params'
+import { SkillsResults } from './-SkillsResults'
+import { SkillsToolbar } from './-SkillsToolbar'
+import { useSkillsBrowseModel } from './-useSkillsBrowseModel'
 
 export const Route = createFileRoute('/skills/')({
   validateSearch: (search) => {
@@ -52,371 +15,89 @@ export const Route = createFileRoute('/skills/')({
         search.highlighted === '1' || search.highlighted === 'true' || search.highlighted === true
           ? true
           : undefined,
+      nonSuspicious:
+        search.nonSuspicious === '1' ||
+        search.nonSuspicious === 'true' ||
+        search.nonSuspicious === true
+          ? true
+          : undefined,
       view: search.view === 'cards' || search.view === 'list' ? search.view : undefined,
       focus: search.focus === 'search' ? 'search' : undefined,
     }
   },
+  beforeLoad: ({ search }) => {
+    const hasQuery = Boolean(search.q?.trim())
+    if (hasQuery || search.sort) return
+    throw redirect({
+      to: '/skills',
+      search: {
+        q: search.q || undefined,
+        sort: 'downloads',
+        dir: search.dir || undefined,
+        highlighted: search.highlighted || undefined,
+        nonSuspicious: search.nonSuspicious || undefined,
+        view: search.view || undefined,
+        focus: search.focus || undefined,
+      },
+      replace: true,
+    })
+  },
   component: SkillsIndex,
 })
 
 export function SkillsIndex() {
   const navigate = Route.useNavigate()
   const search = Route.useSearch()
-  const sort = search.sort ?? 'newest'
-  const dir = parseDir(search.dir, sort)
-  const view = search.view ?? 'list'
-  const highlightedOnly = search.highlighted ?? false
-  const [query, setQuery] = useState(search.q ?? '')
-  const searchSkills = useAction(api.search.searchSkills)
-  const [searchResults, setSearchResults] = useState<Array<SkillSearchEntry>>([])
-  const [searchLimit, setSearchLimit] = useState(pageSize)
-  const [isSearching, setIsSearching] = useState(false)
-  const searchRequest = useRef(0)
-  const loadMoreRef = useRef<HTMLDivElement | null>(null)
-
   const searchInputRef = useRef<HTMLInputElement>(null)
-  const trimmedQuery = useMemo(() => query.trim(), [query])
-  const hasQuery = trimmedQuery.length > 0
-  const searchKey = trimmedQuery ? `${trimmedQuery}::${highlightedOnly ? '1' : '0'}` : ''
 
-  // Use convex-helpers usePaginatedQuery for better cache behavior
-  const {
-    results: paginatedResults,
-    status: paginationStatus,
-    loadMore: loadMorePaginated,
-  } = usePaginatedQuery(api.skills.listPublicPageV2, hasQuery ? 'skip' : {}, {
-    initialNumItems: pageSize,
+  const model = useSkillsBrowseModel({
+    navigate,
+    search,
+    searchInputRef,
   })
 
-  // Derive loading states from pagination status
-  // status: 'LoadingFirstPage' | 'CanLoadMore' | 'LoadingMore' | 'Exhausted'
-  const isLoadingList = paginationStatus === 'LoadingFirstPage'
-  const canLoadMoreList = paginationStatus === 'CanLoadMore'
-  const isLoadingMoreList = paginationStatus === 'LoadingMore'
-
-  useEffect(() => {
-    setQuery(search.q ?? '')
-  }, [search.q])
-
-  // Auto-focus search input when focus=search param is present
-  useEffect(() => {
-    if (search.focus === 'search' && searchInputRef.current) {
-      searchInputRef.current.focus()
-      // Clear the focus param from URL to avoid re-focusing on navigation
-      void navigate({ search: (prev) => ({ ...prev, focus: undefined }), replace: true })
-    }
-  }, [search.focus, navigate])
-
-  useEffect(() => {
-    if (!searchKey) {
-      setSearchResults([])
-      setIsSearching(false)
-      return
-    }
-    setSearchResults([])
-    setSearchLimit(pageSize)
-  }, [searchKey])
-
-  useEffect(() => {
-    if (!hasQuery) return
-    searchRequest.current += 1
-    const requestId = searchRequest.current
-    setIsSearching(true)
-    const handle = window.setTimeout(() => {
-      void (async () => {
-        try {
-          const data = (await searchSkills({
-            query: trimmedQuery,
-            highlightedOnly,
-            limit: searchLimit,
-          })) as Array<SkillSearchEntry>
-          if (requestId === searchRequest.current) {
-            setSearchResults(data)
-          }
-        } finally {
-          if (requestId === searchRequest.current) {
-            setIsSearching(false)
-          }
-        }
-      })()
-    }, 220)
-    return () => window.clearTimeout(handle)
-  }, [hasQuery, highlightedOnly, searchLimit, searchSkills, trimmedQuery])
-
-  const baseItems = useMemo(() => {
-    if (hasQuery) {
-      return searchResults.map((entry) => ({
-        skill: entry.skill,
-        latestVersion: entry.version,
-        ownerHandle: entry.ownerHandle ?? null,
-      }))
-    }
-    // paginatedResults is an array of page items from usePaginatedQuery
-    return paginatedResults as Array<SkillListEntry>
-  }, [hasQuery, paginatedResults, searchResults])
-
-  const filtered = useMemo(
-    () => baseItems.filter((entry) => (highlightedOnly ? isSkillHighlighted(entry.skill) : true)),
-    [baseItems, highlightedOnly],
-  )
-
-  const sorted = useMemo(() => {
-    const multiplier = dir === 'asc' ? 1 : -1
-    const results = [...filtered]
-    results.sort((a, b) => {
-      switch (sort) {
-        case 'downloads':
-          return (a.skill.stats.downloads - b.skill.stats.downloads) * multiplier
-        case 'installs':
-          return (
-            ((a.skill.stats.installsAllTime ?? 0) - (b.skill.stats.installsAllTime ?? 0)) *
-            multiplier
-          )
-        case 'stars':
-          return (a.skill.stats.stars - b.skill.stats.stars) * multiplier
-        case 'updated':
-          return (a.skill.updatedAt - b.skill.updatedAt) * multiplier
-        case 'name':
-          return (
-            (a.skill.displayName.localeCompare(b.skill.displayName) ||
-              a.skill.slug.localeCompare(b.skill.slug)) * multiplier
-          )
-        default:
-          return (a.skill.createdAt - b.skill.createdAt) * multiplier
-      }
-    })
-    return results
-  }, [dir, filtered, sort])
-
-  const isLoadingSkills = hasQuery ? isSearching && searchResults.length === 0 : isLoadingList
-  const canLoadMore = hasQuery
-    ? !isSearching && searchResults.length === searchLimit && searchResults.length > 0
-    : canLoadMoreList
-  const isLoadingMore = hasQuery ? isSearching && searchResults.length > 0 : isLoadingMoreList
-  const canAutoLoad = typeof IntersectionObserver !== 'undefined'
-
-  const loadMore = useCallback(() => {
-    if (isLoadingMore || !canLoadMore) return
-    if (hasQuery) {
-      setSearchLimit((value) => value + pageSize)
-    } else {
-      loadMorePaginated(pageSize)
-    }
-  }, [canLoadMore, hasQuery, isLoadingMore, loadMorePaginated])
-
-  useEffect(() => {
-    if (!canLoadMore || typeof IntersectionObserver === 'undefined') return
-    const target = loadMoreRef.current
-    if (!target) return
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries.some((entry) => entry.isIntersecting)) {
-          loadMore()
-        }
-      },
-      { rootMargin: '200px' },
-    )
-    observer.observe(target)
-    return () => observer.disconnect()
-  }, [canLoadMore, loadMore])
-
   return (
     <main className="section">
-      <header className="skills-header">
-        <div>
-          <h1 className="section-title" style={{ marginBottom: 8 }}>
-            Skills
-          </h1>
-          <p className="section-subtitle" style={{ marginBottom: 0 }}>
-            {isLoadingSkills
-              ? 'Loading skills…'
-              : `Browse the skill library${highlightedOnly ? ' (highlighted)' : ''}.`}
-          </p>
-        </div>
-        <div className="skills-toolbar">
-          <div className="skills-search">
-            <input
-              ref={searchInputRef}
-              className="skills-search-input"
-              value={query}
-              onChange={(event) => {
-                const next = event.target.value
-                const trimmed = next.trim()
-                setQuery(next)
-                void navigate({
-                  search: (prev) => ({ ...prev, q: trimmed ? next : undefined }),
-                  replace: true,
-                })
-              }}
-              placeholder="Filter by name, slug, or summary…"
-            />
-          </div>
-          <div className="skills-toolbar-row">
-            <button
-              className={`search-filter-button${highlightedOnly ? ' is-active' : ''}`}
-              type="button"
-              aria-pressed={highlightedOnly}
-              onClick={() => {
-                void navigate({
-                  search: (prev) => ({
-                    ...prev,
-                    highlighted: highlightedOnly ? undefined : true,
-                  }),
-                  replace: true,
-                })
-              }}
-            >
-              Highlighted
-            </button>
-            <select
-              className="skills-sort"
-              value={sort}
-              onChange={(event) => {
-                const sort = parseSort(event.target.value)
-                void navigate({
-                  search: (prev) => ({
-                    ...prev,
-                    sort,
-                    dir: parseDir(prev.dir, sort),
-                  }),
-                  replace: true,
-                })
-              }}
-              aria-label="Sort skills"
-            >
-              <option value="newest">Newest</option>
-              <option value="updated">Recently updated</option>
-              <option value="downloads">Downloads</option>
-              <option value="installs">Installs</option>
-              <option value="stars">Stars</option>
-              <option value="name">Name</option>
-            </select>
-            <button
-              className="skills-dir"
-              type="button"
-              aria-label={`Sort direction ${dir}`}
-              onClick={() => {
-                void navigate({
-                  search: (prev) => ({
-                    ...prev,
-                    dir: parseDir(prev.dir, sort) === 'asc' ? 'desc' : 'asc',
-                  }),
-                  replace: true,
-                })
-              }}
-            >
-              {dir === 'asc' ? '↑' : '↓'}
-            </button>
-            <button
-              className={`skills-view${view === 'cards' ? ' is-active' : ''}`}
-              type="button"
-              onClick={() => {
-                void navigate({
-                  search: (prev) => ({
-                    ...prev,
-                    view: prev.view === 'cards' ? undefined : 'cards',
-                  }),
-                  replace: true,
-                })
-              }}
-            >
-              {view === 'cards' ? 'List' : 'Cards'}
-            </button>
-          </div>
-        </div>
+      <header className="skills-header-top">
+        <h1 className="section-title" style={{ marginBottom: 8 }}>
+          Skills
+        </h1>
+        <p className="section-subtitle" style={{ marginBottom: 0 }}>
+          {model.isLoadingSkills
+            ? 'Loading skills…'
+            : `Browse the skill library${model.activeFilters.length ? ` (${model.activeFilters.join(', ')})` : ''}.`}
+        </p>
       </header>
-
-      {isLoadingSkills ? (
-        <div className="card">
-          <div className="loading-indicator">Loading skills…</div>
-        </div>
-      ) : sorted.length === 0 ? (
-        <div className="card">No skills match that filter.</div>
-      ) : view === 'cards' ? (
-        <div className="grid">
-          {sorted.map((entry) => {
-            const skill = entry.skill
-            const isPlugin = Boolean(entry.latestVersion?.parsed?.clawdis?.nix?.plugin)
-            const skillHref = buildSkillHref(skill, entry.ownerHandle)
-            return (
-              <SkillCard
-                key={skill._id}
-                skill={skill}
-                href={skillHref}
-                badge={getSkillBadges(skill)}
-                chip={isPlugin ? 'Plugin bundle (nix)' : undefined}
-                summaryFallback="Agent-ready skill pack."
-                meta={
-                  <div className="stat">
-                    ⭐ {skill.stats.stars} · ⤓ {skill.stats.downloads} · ⤒{' '}
-                    {skill.stats.installsAllTime ?? 0}
-                  </div>
-                }
-              />
-            )
-          })}
-        </div>
-      ) : (
-        <div className="skills-list">
-          {sorted.map((entry) => {
-            const skill = entry.skill
-            const isPlugin = Boolean(entry.latestVersion?.parsed?.clawdis?.nix?.plugin)
-            const skillHref = buildSkillHref(skill, entry.ownerHandle)
-            return (
-              <Link key={skill._id} className="skills-row" to={skillHref}>
-                <div className="skills-row-main">
-                  <div className="skills-row-title">
-                    <span>{skill.displayName}</span>
-                    <span className="skills-row-slug">/{skill.slug}</span>
-                    {getSkillBadges(skill).map((badge) => (
-                      <span key={badge} className="tag">
-                        {badge}
-                      </span>
-                    ))}
-                    {isPlugin ? (
-                      <span className="tag tag-accent tag-compact">Plugin bundle (nix)</span>
-                    ) : null}
-                  </div>
-                  <div className="skills-row-summary">
-                    {skill.summary ?? 'No summary provided.'}
-                  </div>
-                  {isPlugin ? (
-                    <div className="skills-row-meta">
-                      Bundle includes SKILL.md, CLI, and config.
-                    </div>
-                  ) : null}
-                </div>
-                <div className="skills-row-metrics">
-                  <span>⤓ {skill.stats.downloads}</span>
-                  <span>⤒ {skill.stats.installsAllTime ?? 0}</span>
-                  <span>★ {skill.stats.stars}</span>
-                  <span>{skill.stats.versions} v</span>
-                </div>
-              </Link>
-            )
-          })}
-        </div>
-      )}
-
-      {canLoadMore ? (
-        <div
-          ref={canAutoLoad ? loadMoreRef : null}
-          className="card"
-          style={{ marginTop: 16, display: 'flex', justifyContent: 'center' }}
-        >
-          {canAutoLoad ? (
-            isLoadingMore ? (
-              'Loading more…'
-            ) : (
-              'Scroll to load more'
-            )
-          ) : (
-            <button className="btn" type="button" onClick={loadMore} disabled={isLoadingMore}>
-              {isLoadingMore ? 'Loading…' : 'Load more'}
-            </button>
-          )}
-        </div>
-      ) : null}
+      <div className="skills-container">
+        <SkillsToolbar
+          searchInputRef={searchInputRef}
+          query={model.query}
+          hasQuery={model.hasQuery}
+          sort={model.sort}
+          dir={model.dir}
+          view={model.view}
+          highlightedOnly={model.highlightedOnly}
+          nonSuspiciousOnly={model.nonSuspiciousOnly}
+          onQueryChange={model.onQueryChange}
+          onToggleHighlighted={model.onToggleHighlighted}
+          onToggleNonSuspicious={model.onToggleNonSuspicious}
+          onSortChange={model.onSortChange}
+          onToggleDir={model.onToggleDir}
+          onToggleView={model.onToggleView}
+        />
+        <SkillsResults
+          isLoadingSkills={model.isLoadingSkills}
+          sorted={model.sorted}
+          view={model.view}
+          paginationStatus={model.paginationStatus}
+          hasQuery={model.hasQuery}
+          canLoadMore={model.canLoadMore}
+          isLoadingMore={model.isLoadingMore}
+          canAutoLoad={model.canAutoLoad}
+          loadMoreRef={model.loadMoreRef}
+          loadMore={model.loadMore}
+        />
+      </div>
     </main>
   )
 }