docmk 1.0.0

package/src/client/utils/routes.ts

@@ -0,0 +1,69 @@
+import { SkillFile } from '../../types/index.js'
+
+/**
+ * Generate route from file path based on the configured skills directory
+ * This replaces hardcoded .claude/skills references
+ */
+export function getFileRoute(file: SkillFile, skillsDir?: string): string {
+  const filePath = file.path
+  
+  // If skillsDir is provided, use it; otherwise try to detect from path
+  if (skillsDir) {
+    const normalizedPath = filePath.replace(/\\/g, '/')
+    const normalizedSkillsDir = skillsDir.replace(/\\/g, '/')
+    
+    const index = normalizedPath.indexOf(normalizedSkillsDir)
+    if (index !== -1) {
+      const relativePath = normalizedPath.slice(index + normalizedSkillsDir.length)
+      return pathToRoute(relativePath)
+    }
+  }
+  
+  // Fallback: try common patterns
+  const patterns = ['.claude/skills', 'docs', 'documentation', 'my-docs']
+  for (const pattern of patterns) {
+    const index = filePath.indexOf(pattern)
+    if (index !== -1) {
+      const relativePath = filePath.slice(index + pattern.length)
+      return pathToRoute(relativePath)
+    }
+  }
+  
+  // Last resort: use filename
+  return pathToRoute('/' + file.name)
+}
+
+function pathToRoute(relativePath: string): string {
+  const segments = relativePath.split('/').filter(Boolean)
+
+  if (segments.length === 0) return '/'
+
+  const lastSegment = segments[segments.length - 1]
+  if (lastSegment.endsWith('.md')) {
+    segments[segments.length - 1] = lastSegment.slice(0, -3)
+  }
+
+  // SKILL.md and README.md should map to parent directory route
+  const finalSegment = segments[segments.length - 1]
+  if (finalSegment === 'SKILL' || finalSegment === 'README') {
+    segments.pop()
+  }
+
+  return '/' + segments.join('/')
+}
+
+/**
+ * Get display path for search results
+ */
+export function getPathDisplay(filePath: string, skillsDir?: string): string {
+  if (skillsDir) {
+    const index = filePath.indexOf(skillsDir)
+    if (index !== -1) {
+      return filePath.slice(index)
+    }
+  }
+  
+  // Fallback to showing last few segments
+  const segments = filePath.split('/').filter(Boolean)
+  return segments.slice(-3).join('/')
+}

package/src/parser/index.ts

@@ -0,0 +1,253 @@
+import matter from 'gray-matter'
+import MarkdownIt from 'markdown-it'
+import { createHighlighter, Highlighter } from 'shiki'
+import { SkillDirectory, SkillFile, SiteConfig, DocGenConfig, Navigation } from '../types/index.js'
+
+let highlighter: Highlighter | null = null
+
+async function getHighlighter() {
+  if (!highlighter) {
+    highlighter = await createHighlighter({
+      themes: ['github-dark', 'github-light'],
+      langs: ['javascript', 'typescript', 'bash', 'shell', 'json', 'html', 'css', 'vue', 'jsx', 'tsx', 'python', 'markdown', 'yaml', 'sql', 'go', 'rust', 'java', 'c', 'cpp']
+    })
+  }
+  return highlighter
+}
+
+const md = new MarkdownIt({
+  html: true,
+  linkify: true,
+  typographer: true,
+  highlight: function (str: string, lang: string) {
+    // Synchronous fallback - actual highlighting done in enhanceFileContent
+    return `<pre class="shiki-pending" data-lang="${lang || 'text'}"><code>${md.utils.escapeHtml(str)}</code></pre>`
+  }
+})
+
+export async function parseSkillsToConfig(
+  directories: SkillDirectory[],
+  siteConfig: SiteConfig
+): Promise<DocGenConfig> {
+  const files: SkillFile[] = []
+  const navigation = await generateNavigation(directories)
+
+  // Collect all files for search indexing
+  collectAllFiles(directories, files)
+
+  // Enhance files with parsed content
+  for (const file of files) {
+    await enhanceFileContent(file)
+  }
+
+  return {
+    siteConfig,
+    navigation,
+    files,
+    directories
+  }
+}
+
+function collectAllFiles(items: (SkillDirectory | SkillFile)[], files: SkillFile[]) {
+  for (const item of items) {
+    if ('content' in item) {
+      // It's a SkillFile
+      files.push(item)
+    } else {
+      // It's a SkillDirectory
+      if (item.skillFile) {
+        files.push(item.skillFile)
+      }
+      collectAllFiles(item.children, files)
+    }
+  }
+}
+
+async function enhanceFileContent(file: SkillFile) {
+  try {
+    let content = file.content
+
+    // Update title and description from frontmatter if available
+    file.title = file.frontmatter.title || file.title
+    file.description = file.frontmatter.description || file.description
+
+    // Remove duplicate h1 if it matches frontmatter title
+    if (file.frontmatter.title) {
+      // Match first h1 heading in content (may have leading whitespace/newlines)
+      const h1Match = content.match(/^\s*#\s+(.+)$/m)
+      if (h1Match) {
+        const h1Text = h1Match[1].trim()
+        // If h1 matches title, remove it to avoid duplication
+        if (h1Text === file.frontmatter.title) {
+          content = content.replace(/^\s*#\s+.+\n*/, '')
+        }
+      }
+    }
+
+    // Render markdown to HTML
+    let html = md.render(content)
+    
+    // Apply syntax highlighting with shiki
+    html = await highlightCodeBlocks(html)
+    file.frontmatter.html = html
+
+    // Extract headings for TOC
+    const headings = extractHeadings(content)
+    file.frontmatter.headings = headings
+
+  } catch (error) {
+    console.warn(`Failed to enhance content for ${file.path}:`, error)
+    try {
+      file.frontmatter.html = md.render(file.content)
+    } catch (e) {
+      console.error(`Failed to render markdown for ${file.path}:`, e)
+    }
+  }
+}
+
+async function highlightCodeBlocks(html: string): Promise<string> {
+  const hl = await getHighlighter()
+  
+  // Find all pending shiki code blocks and highlight them
+  const codeBlockRegex = /<pre class="shiki-pending" data-lang="([^"]*)"[^>]*><code>([^]*?)<\/code><\/pre>/g
+  
+  const matches = [...html.matchAll(codeBlockRegex)]
+  
+  for (const match of matches) {
+    const [fullMatch, lang, escapedCode] = match
+    // Unescape HTML entities
+    const code = escapedCode
+      .replace(/&lt;/g, '<')
+      .replace(/&gt;/g, '>')
+      .replace(/&amp;/g, '&')
+      .replace(/&quot;/g, '"')
+      .replace(/&#39;/g, "'")
+    
+    try {
+      const validLang = hl.getLoadedLanguages().includes(lang) ? lang : 'text'
+      const highlighted = hl.codeToHtml(code, {
+        lang: validLang,
+        theme: 'github-dark'
+      })
+      html = html.replace(fullMatch, highlighted)
+    } catch (e) {
+      // Keep original if highlighting fails
+      console.warn(`Failed to highlight ${lang}:`, e)
+    }
+  }
+  
+  return html
+}
+
+function extractHeadings(content: string) {
+  const headings: Array<{ level: number; text: string; anchor: string }> = []
+  const lines = content.split('\n')
+
+  for (const line of lines) {
+    const match = line.match(/^(#{1,6})\\s+(.+)$/)
+    if (match) {
+      const level = match[1].length
+      const text = match[2].trim()
+      const anchor = text.toLowerCase()
+        .replace(/[^\\w\\s-]/g, '')
+        .replace(/\\s+/g, '-')
+        .trim()
+
+      headings.push({ level, text, anchor })
+    }
+  }
+
+  return headings
+}
+
+async function generateNavigation(directories: SkillDirectory[]): Promise<Navigation[]> {
+  const navigation: Navigation[] = []
+
+  for (const dir of directories) {
+    const navItem: Navigation = {
+      text: dir.skillFile?.title || formatDirName(dir.name),
+      link: dir.skillFile ? getFileRoute(dir.skillFile) : undefined
+    }
+
+    if (dir.children.length > 0) {
+      navItem.children = []
+      
+      for (const child of dir.children) {
+        if ('content' in child) {
+          // It's a file
+          navItem.children.push({
+            text: child.title || formatFileName(child.name),
+            link: getFileRoute(child)
+          })
+        } else {
+          // It's a subdirectory
+          const subNav = await generateNavigation([child])
+          navItem.children.push(...subNav)
+        }
+      }
+    }
+
+    navigation.push(navItem)
+  }
+
+  return navigation
+}
+
+function getFileRoute(file: SkillFile): string {
+  // Import the utility function from client utils
+  // For now, use inline implementation
+  const filePath = file.path
+  
+  // Try common patterns
+  const patterns = ['my-docs', 'docs', 'documentation', '.claude/skills']
+  let relativePath = ''
+  
+  for (const pattern of patterns) {
+    const index = filePath.indexOf(pattern)
+    if (index !== -1) {
+      relativePath = filePath.slice(index + pattern.length)
+      break
+    }
+  }
+  
+  if (!relativePath) {
+    // Fallback: use last 2 segments
+    const segments = filePath.split('/').filter(Boolean)
+    if (segments.length >= 2) {
+      relativePath = '/' + segments.slice(-2).join('/')
+    } else {
+      return '/'
+    }
+  }
+  
+  const segments = relativePath.split('/').filter(Boolean)
+  
+  if (segments.length === 0) return '/'
+  
+  // Remove file extension
+  const lastSegment = segments[segments.length - 1]
+  if (lastSegment.endsWith('.md')) {
+    segments[segments.length - 1] = lastSegment.slice(0, -3)
+  }
+  
+  // SKILL.md and README.md should map to parent directory route
+  const finalSegment = segments[segments.length - 1]
+  if (finalSegment === 'SKILL' || finalSegment === 'README') {
+    segments.pop()
+  }
+  
+  return '/' + segments.join('/')
+}
+
+function formatDirName(name: string): string {
+  return name.split('-').map(word => 
+    word.charAt(0).toUpperCase() + word.slice(1)
+  ).join(' ')
+}
+
+function formatFileName(name: string): string {
+  const baseName = name.replace('.md', '')
+  return formatDirName(baseName)
+}
+
+export { md as markdownRenderer }

package/src/scanner/index.ts

@@ -0,0 +1,127 @@
+import fs from 'fs/promises'
+import path from 'path'
+import { SkillDirectory, SkillFile } from '../types/index.js'
+
+export async function scanSkillsDirectory(sourceDir: string): Promise<SkillDirectory[]> {
+  try {
+    await fs.access(sourceDir)
+  } catch {
+    throw new Error(`Source directory not found: ${sourceDir}`)
+  }
+
+  const entries = await fs.readdir(sourceDir, { withFileTypes: true })
+  const directories: SkillDirectory[] = []
+
+  for (const entry of entries) {
+    if (entry.isDirectory()) {
+      const dirPath = path.join(sourceDir, entry.name)
+      const skillDirectory = await scanDirectory(dirPath, entry.name)
+      directories.push(skillDirectory)
+    }
+  }
+
+  return directories
+}
+
+async function scanDirectory(dirPath: string, name: string): Promise<SkillDirectory> {
+  const entries = await fs.readdir(dirPath, { withFileTypes: true })
+  const children: (SkillDirectory | SkillFile)[] = []
+  let skillFile: SkillFile | undefined
+
+  for (const entry of entries) {
+    const entryPath = path.join(dirPath, entry.name)
+
+    if (entry.isDirectory()) {
+      const subDir = await scanDirectory(entryPath, entry.name)
+      children.push(subDir)
+    } else if (entry.isFile() && entry.name.endsWith('.md')) {
+      const file = await parseMarkdownFile(entryPath, entry.name)
+      
+      if (entry.name === 'SKILL.md') {
+        skillFile = file
+      } else {
+        children.push(file)
+      }
+    }
+  }
+
+  return {
+    path: dirPath,
+    name,
+    children,
+    skillFile
+  }
+}
+
+async function parseMarkdownFile(filePath: string, fileName: string): Promise<SkillFile> {
+  const content = await fs.readFile(filePath, 'utf-8')
+  const stats = await fs.stat(filePath)
+
+  // Basic frontmatter extraction
+  const frontmatterMatch = content.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n/)
+  const frontmatter: Record<string, any> = {}
+  let markdownContent = content
+
+  if (frontmatterMatch) {
+    // Remove frontmatter from content
+    markdownContent = content.slice(frontmatterMatch[0].length)
+    
+    // Parse frontmatter key-value pairs
+    const fmLines = frontmatterMatch[1].split(/\r?\n/)
+    for (const line of fmLines) {
+      const colonIndex = line.indexOf(':')
+      if (colonIndex > 0) {
+        const key = line.slice(0, colonIndex).trim()
+        const value = line.slice(colonIndex + 1).trim().replace(/^["']|["']$/g, '')
+        if (key && value) {
+          frontmatter[key] = value
+        }
+      }
+    }
+  }
+
+  return {
+    path: filePath,
+    name: fileName,
+    title: frontmatter.title || fileName.replace('.md', ''),
+    description: frontmatter.description,
+    content: markdownContent,
+    frontmatter,
+    lastModified: stats.mtime.getTime()
+  }
+}
+
+export async function watchSkillsDirectory(
+  sourceDir: string, 
+  callback: (directories: SkillDirectory[]) => void
+) {
+  const chokidar = await import('chokidar')
+  
+  const watcher = chokidar.watch(sourceDir, {
+    ignored: /node_modules/,
+    persistent: true,
+    ignoreInitial: true
+  })
+
+  let debounceTimer: NodeJS.Timeout
+
+  const handleChange = () => {
+    clearTimeout(debounceTimer)
+    debounceTimer = setTimeout(async () => {
+      try {
+        const directories = await scanSkillsDirectory(sourceDir)
+        callback(directories)
+      } catch (error) {
+        console.error('Error rescanning source directory:', error)
+      }
+    }, 300)
+  }
+
+  watcher.on('add', handleChange)
+  watcher.on('change', handleChange)
+  watcher.on('unlink', handleChange)
+  watcher.on('addDir', handleChange)
+  watcher.on('unlinkDir', handleChange)
+
+  return watcher
+}

package/src/types/index.ts

@@ -0,0 +1,45 @@
+export interface SkillFile {
+  path: string
+  name: string
+  title?: string
+  description?: string
+  category?: string
+  content: string
+  frontmatter: Record<string, any>
+  lastModified: number
+}
+
+export interface SkillDirectory {
+  path: string
+  name: string
+  children: (SkillDirectory | SkillFile)[]
+  skillFile?: SkillFile // SKILL.md file if exists
+}
+
+export interface SiteConfig {
+  title: string
+  description: string
+  baseUrl: string
+  skillsDir: string
+  outputDir: string
+}
+
+export interface Navigation {
+  text: string
+  link?: string
+  children?: Navigation[]
+}
+
+export interface DocGenConfig {
+  siteConfig: SiteConfig
+  navigation: Navigation[]
+  files: SkillFile[]
+  directories: SkillDirectory[]
+}
+
+export interface BuildOptions {
+  input: string
+  output: string
+  mode: 'development' | 'production'
+  watch?: boolean
+}

package/tailwind.config.js

@@ -0,0 +1,65 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ["class"],
+  content: [
+    './src/**/*.{ts,tsx,vue}',
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      fontFamily: {
+        sans: ["Inter", "ui-sans-serif", "system-ui", "sans-serif"],
+        mono: ["ui-monospace", "SF Mono", "Menlo", "monospace"],
+      },
+    },
+  },
+  plugins: [
+    require("@tailwindcss/typography"),
+  ],
+}

package/test-build/assets/main-C2ARPC0e.css

@@ -0,0 +1 @@
+.sidebar-item[data-v-b5febdd6]{margin-bottom:.25rem}.item-wrapper[data-v-b5febdd6]{display:flex;align-items:center;padding:.5rem 1.5rem;position:relative}.expand-button[data-v-b5febdd6]{background:none;border:none;color:#666;cursor:pointer;padding:.25rem;margin-right:.5rem;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.expand-button.expanded[data-v-b5febdd6]{transform:rotate(90deg)}.expand-button[data-v-b5febdd6]:hover{color:#333}.nav-link[data-v-b5febdd6],.nav-text[data-v-b5febdd6]{flex:1;text-decoration:none;color:#555;font-weight:500;font-size:.9rem;line-height:1.4;transition:color .2s ease}.nav-link[data-v-b5febdd6]:hover{color:#3182ce}.nav-link.active[data-v-b5febdd6]{color:#3182ce;font-weight:600;position:relative}.nav-link.active[data-v-b5febdd6]:before{content:"";position:absolute;left:-1.5rem;top:50%;transform:translateY(-50%);width:3px;height:20px;background-color:#3182ce;border-radius:2px}.nav-text[data-v-b5febdd6]{color:#333;font-weight:600}.children[data-v-b5febdd6]{overflow:hidden;max-height:0;transition:max-height .3s ease;padding-left:1rem}.children.expanded[data-v-b5febdd6]{max-height:1000px}.children .sidebar-item[data-v-b5febdd6]{margin-left:1rem}.children .nav-link[data-v-b5febdd6],.children .nav-text[data-v-b5febdd6]{font-size:.85rem;font-weight:400;color:#666}.children .nav-link[data-v-b5febdd6]:hover{color:#3182ce}.children .nav-link.active[data-v-b5febdd6]{color:#3182ce;font-weight:500}.sidebar-nav[data-v-014c42bf]{height:100%;overflow-y:auto}.nav-content[data-v-014c42bf]{padding:1.5rem 0}.search-box[data-v-b8e3e134]{position:relative;width:320px}.search-input-wrapper[data-v-b8e3e134]{position:relative;display:flex;align-items:center}.search-input[data-v-b8e3e134]{width:100%;padding:.75rem 2.5rem .75rem 1rem;border:2px solid #e1e5e9;border-radius:6px;font-size:.9rem;transition:border-color .2s ease;outline:none}.search-input[data-v-b8e3e134]:focus{border-color:#3182ce}.search-icon[data-v-b8e3e134]{position:absolute;right:.75rem;color:#666;pointer-events:none}.search-results[data-v-b8e3e134]{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e1e5e9;border-radius:6px;box-shadow:0 10px 25px #0000001a;z-index:1000;max-height:400px;overflow-y:auto;margin-top:.5rem}.no-results[data-v-b8e3e134]{padding:1rem;color:#666;text-align:center;font-style:italic}.search-result[data-v-b8e3e134]{display:block;padding:1rem;text-decoration:none;color:inherit;border-bottom:1px solid #f0f0f0;transition:background-color .2s ease}.search-result[data-v-b8e3e134]:hover{background-color:#f8f9fa}.search-result[data-v-b8e3e134]:last-child{border-bottom:none}.result-title[data-v-b8e3e134]{font-weight:600;color:#2c3e50;margin-bottom:.25rem}.result-description[data-v-b8e3e134]{font-size:.85rem;color:#666;margin-bottom:.25rem;line-height:1.4}.result-path[data-v-b8e3e134]{font-size:.75rem;color:#999;font-family:monospace}@media (max-width: 768px){.search-box[data-v-b8e3e134]{width:100%;max-width:280px}}.app-layout[data-v-52037cca]{min-height:100vh;display:flex;flex-direction:column}.header[data-v-52037cca]{background:#fff;border-bottom:1px solid #e1e5e9;padding:1rem 0;position:sticky;top:0;z-index:100}.header-content[data-v-52037cca]{max-width:1400px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center}.site-title[data-v-52037cca]{font-size:1.5rem;font-weight:600;color:#2c3e50;margin:0}.main-container[data-v-52037cca]{flex:1;display:flex;max-width:1400px;margin:0 auto;width:100%}.sidebar[data-v-52037cca]{width:280px;flex-shrink:0;background:#f8f9fa;border-right:1px solid #e1e5e9;height:calc(100vh - 80px);overflow-y:auto;position:sticky;top:80px}.content[data-v-52037cca]{flex:1;padding:2rem;overflow-y:auto;max-width:calc(100vw - 280px)}.loading[data-v-52037cca]{display:flex;justify-content:center;align-items:center;height:200px;color:#666;font-size:1.1rem}@media (max-width: 768px){.main-container[data-v-52037cca]{flex-direction:column}.sidebar[data-v-52037cca]{width:100%;height:auto;position:static;border-right:none;border-bottom:1px solid #e1e5e9}.content[data-v-52037cca]{max-width:100%;padding:1rem}.header-content[data-v-52037cca]{padding:0 1rem;flex-direction:column;gap:1rem}}#app[data-v-00943de1]{min-height:100vh}.home-page[data-v-83887790]{max-width:1000px;margin:0 auto}.hero-section[data-v-83887790]{text-align:center;padding:3rem 0;margin-bottom:3rem}.hero-title[data-v-83887790]{font-size:3rem;font-weight:700;color:#2c3e50;margin-bottom:1rem}.hero-description[data-v-83887790]{font-size:1.2rem;color:#666;max-width:600px;margin:0 auto;line-height:1.6}.content-overview[data-v-83887790]{space-y:3rem}.stats-grid[data-v-83887790]{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-bottom:3rem}.stat-card[data-v-83887790]{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem;border-radius:12px;text-align:center;box-shadow:0 4px 6px #0000001a}.stat-number[data-v-83887790]{font-size:2.5rem;font-weight:700;margin-bottom:.5rem}.stat-label[data-v-83887790]{font-size:1rem;opacity:.9}.recent-section[data-v-83887790],.navigation-section[data-v-83887790]{margin-bottom:3rem}.recent-section h2[data-v-83887790],.navigation-section h2[data-v-83887790]{font-size:1.8rem;font-weight:600;color:#2c3e50;margin-bottom:1.5rem}.recent-files[data-v-83887790]{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}.recent-file-card[data-v-83887790]{background:#fff;border:1px solid #e1e5e9;border-radius:8px;padding:1.5rem;text-decoration:none;color:inherit;transition:all .2s ease}.recent-file-card[data-v-83887790]:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a;border-color:#3182ce}.file-title[data-v-83887790]{font-weight:600;color:#2c3e50;margin-bottom:.5rem}.file-description[data-v-83887790]{color:#666;font-size:.9rem;margin-bottom:1rem;line-height:1.4}.file-meta[data-v-83887790]{color:#999;font-size:.8rem}.skill-grid[data-v-83887790]{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.skill-card[data-v-83887790]{background:#fff;border:1px solid #e1e5e9;border-radius:8px;padding:1.5rem;text-decoration:none;color:inherit;transition:all .2s ease}.skill-card[data-v-83887790]:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a;border-color:#3182ce}.skill-name[data-v-83887790]{font-weight:600;color:#2c3e50;font-size:1.1rem;margin-bottom:.5rem}.skill-description[data-v-83887790]{color:#666;font-size:.9rem;line-height:1.4;margin-bottom:1rem}.skill-files-count[data-v-83887790]{color:#3182ce;font-size:.8rem;font-weight:500}@media (max-width: 768px){.hero-title[data-v-83887790]{font-size:2rem}.hero-description[data-v-83887790]{font-size:1rem}.stats-grid[data-v-83887790],.recent-files[data-v-83887790],.skill-grid[data-v-83887790]{grid-template-columns:1fr}}.skill-page[data-v-ec306008]{max-width:800px;margin:0 auto}.skill-header[data-v-ec306008]{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid #e1e5e9}.skill-title[data-v-ec306008]{font-size:2.5rem;font-weight:700;color:#2c3e50;margin-bottom:1rem;line-height:1.2}.skill-description[data-v-ec306008]{font-size:1.2rem;color:#666;margin-bottom:1rem;line-height:1.6}.skill-meta[data-v-ec306008]{color:#999;font-size:.9rem}.toc[data-v-ec306008]{background:#f8f9fa;border:1px solid #e1e5e9;border-radius:8px;padding:1.5rem;margin-bottom:2rem}.toc h3[data-v-ec306008]{margin:0 0 1rem;color:#2c3e50;font-size:1.1rem}.toc-list[data-v-ec306008]{list-style:none;padding:0;margin:0}.toc-list li[data-v-ec306008]{margin-bottom:.5rem}.toc-level-1[data-v-ec306008]{padding-left:0}.toc-level-2[data-v-ec306008]{padding-left:1rem}.toc-level-3[data-v-ec306008]{padding-left:2rem}.toc-level-4[data-v-ec306008]{padding-left:3rem}.toc-level-5[data-v-ec306008]{padding-left:4rem}.toc-level-6[data-v-ec306008]{padding-left:5rem}.toc-link[data-v-ec306008]{color:#555;text-decoration:none;font-size:.9rem;transition:color .2s ease}.toc-link[data-v-ec306008]:hover{color:#3182ce}.markdown-content[data-v-ec306008]{line-height:1.7;color:#333}.page-navigation[data-v-ec306008]{display:flex;justify-content:space-between;margin-top:3rem;padding-top:2rem;border-top:1px solid #e1e5e9;gap:1rem}.nav-link[data-v-ec306008]{flex:1;text-decoration:none;color:inherit;padding:1.5rem;border:1px solid #e1e5e9;border-radius:8px;transition:all .2s ease}.nav-link[data-v-ec306008]:hover{border-color:#3182ce;box-shadow:0 2px 8px #0000001a}.nav-prev[data-v-ec306008]{text-align:left}.nav-next[data-v-ec306008]{text-align:right}.nav-direction[data-v-ec306008]{color:#3182ce;font-size:.9rem;font-weight:500;margin-bottom:.25rem}.nav-title[data-v-ec306008]{color:#2c3e50;font-weight:600}.not-found[data-v-ec306008]{text-align:center;padding:3rem 0}.not-found h1[data-v-ec306008]{font-size:2rem;color:#2c3e50;margin-bottom:1rem}.not-found p[data-v-ec306008]{color:#666;margin-bottom:2rem}.back-home[data-v-ec306008]{color:#3182ce;text-decoration:none;font-weight:500}.back-home[data-v-ec306008]:hover{text-decoration:underline}@media (max-width: 768px){.skill-title[data-v-ec306008]{font-size:2rem}.page-navigation[data-v-ec306008]{flex-direction:column}.nav-next[data-v-ec306008]{text-align:left}}.markdown-content h1,.markdown-content h2,.markdown-content h3,.markdown-content h4,.markdown-content h5,.markdown-content h6{color:#2c3e50;font-weight:600;margin-top:2rem;margin-bottom:1rem;line-height:1.3}.markdown-content h1{font-size:2rem}.markdown-content h2{font-size:1.5rem}.markdown-content h3{font-size:1.25rem}.markdown-content h4{font-size:1.1rem}.markdown-content p{margin-bottom:1rem}.markdown-content ul,.markdown-content ol{margin-bottom:1rem;padding-left:1.5rem}.markdown-content li{margin-bottom:.5rem}.markdown-content code{background:#f1f3f4;padding:.2rem .4rem;border-radius:3px;font-family:SF Mono,Consolas,monospace;font-size:.9em}.markdown-content pre{background:#f8f9fa;border:1px solid #e1e5e9;border-radius:6px;padding:1rem;overflow-x:auto;margin:1rem 0}.markdown-content pre code{background:none;padding:0;border-radius:0}.markdown-content blockquote{border-left:4px solid #3182ce;padding-left:1rem;margin:1rem 0;color:#666;font-style:italic}.markdown-content table{width:100%;border-collapse:collapse;margin:1rem 0}.markdown-content th,.markdown-content td{border:1px solid #e1e5e9;padding:.5rem;text-align:left}.markdown-content th{background:#f8f9fa;font-weight:600}