vitepress-config-optimization

VitePress static site generator toolkit. Use when working with VitePress configuration, theming, routing, markdown, Vue in markdown, data loading, custom the...

Security Scan

This is an instruction-only VitePress documentation/utility skill whose files and runtime instructions are consistent with its name and purpose and do not request unrelated credentials or perform suspicious actions.

Purpose & Capability

The skill name/description (VitePress config/tooling) matches the provided SKILL.md and included reference files. All examples, CLI commands, and config samples are relevant to VitePress site configuration, theming, routing, data loading, SSR, and deployment.

Instruction Scope

SKILL.md is an instructions-and-doc bundle that shows npm/pnpm/yarn commands and config examples. Some reference examples show fetching CMS data (fetch('https://my-cms-api') with a token) and using loadEnv for API tokens — these are illustrative and not instructions to read arbitrary local secrets. The instructions do not direct the agent to read unrelated system files or exfiltrate data.

Install Mechanism

No install spec or code files that would be downloaded/executed. This skill is instruction-only (lowest install risk).

Credentials

The skill declares no required environment variables or credentials. Some examples mention loadEnv and API tokens in the context of CMS integrations (illustrative). No credentials are requested by the skill itself.

Persistence & Privilege

always is false and the skill is user-invocable with normal model invocation allowed. The skill does not request elevated or permanent presence or modify other skills/configs.

Assessment

This package is documentation and examples for VitePress and appears internally coherent. It does not itself require credentials or install code. Things to keep in mind before using: (1) examples show npm install commands — running them will modify your environment and install packages you should review; (2) several examples show fetching CMS APIs or loading env tokens — only provide API keys to integrations you trust and avoid placing secrets in public repos or CI without least privilege; (3) the package source/homepage is unlisted here — if you need provenance, prefer official docs at https://vitepress.dev/ or install VitePress from the official npm package. If you want deeper assurance, ask the publisher for a homepage or compare these files against the official VitePress docs.

VitePress

Vue-powered static site generator for documentation, blogs, and marketing sites.

Quick Start

npm add -D vitepress@next
npx vitepress init
npm run docs:dev

Core Config

import { defineConfig } from 'vitepress'

export default defineConfig({
  title: 'My Site',
  description: 'Site description',
  base: '/docs/',                    // for sub-path deployment
  srcDir: './src',                    // markdown source directory
  cleanUrls: true,                    // remove .html
  appearance: 'dark',                 // dark mode
  lastUpdated: true,                 // Git-based timestamps

  themeConfig: {
    logo: '/logo.svg',
    nav: [
      { text: 'Guide', link: '/guide/' },
      { text: 'Config', link: '/reference/site-config' }
    ],
    sidebar: [
      { text: 'Section', items: [{ text: 'Page', link: '/page' }] }
    ],
    search: { provider: 'local' }
  }
})

Frontmatter

---
title: Page Title
layout: doc           # doc | home | page
navbar: true
sidebar: true
outline: [2, 3]       # show h2-h3 in aside
lastUpdated: true
editLink: true
footer: true
---

Home page hero:

---
layout: home
hero:
  name: VitePress
  text: Static site generator
  actions:
    - theme: brand
      text: Get Started
      link: /guide/getting-started
features:
  - icon: 🛠️
    title: Fast
    details: Built with Vite
---

Markdown Extensions

## Custom anchor {#custom}

::: info
Info box
:::

```js{2}
const x = 1  // highlight line 2
:::

<<< @/snippets/file.js{1}

[[toc]]

## Routing

index.md --> / guide/start.md --> /guide/start/

Dynamic routes: `packages/[pkg].md` + `packages/[pkg].paths.js`

## Custom Theme

```javascript
// .vitepress/theme/index.js
import Layout from './Layout.vue'

export default { Layout }

<!-- Layout.vue -->
<template>
  <h1>Custom Layout!</h1>
  <Content />
</template>

Extend default theme:

import DefaultTheme from 'vitepress/theme'
export default { extends: DefaultTheme }

Data Loading

// .vitepress/posts.data.js
import { createContentLoader } from 'vitepress'

export default createContentLoader('posts/*.md', {
  transform: (data) => data.sort(/* ... */)
})

<script setup>
import { data } from './posts.data.js'
</script>

SSR

<ClientOnly>
  <BrowserOnlyComponent />
</ClientOnly>

CLI

vitepress dev docs        # start dev server
vitepress build docs       # build for production
vitepress preview docs     # preview production build

Reference Files

Detailed docs in references/ directory:

Guide Pages

• what-is-vitepress.md - What is VitePress, use cases, performance
• getting-started.md - Installation and setup
• routing.md - File routing, clean URLs, rewrites, dynamic routes
• markdown.md - Markdown extensions syntax
• asset-handling.md - Static assets, public directory, base URL
• using-vue.md - Using Vue in markdown, components, directives
• extending-default-theme.md - CSS customization, layout slots, view transitions
• custom-theme.md - Building custom themes
• data-loading-ssr-i18n.md - Data loaders, SSR, i18n
• mpa-mode.md - MPA mode for zero-JS sites
• sitemap-generation.md - Sitemap generation
• cms.md - Connecting to CMS
• deploy.md - Deployment guides for various platforms

Reference Pages

• site-config.md - All config options and build hooks
• frontmatter.md - Page frontmatter options
• runtime-api.md - useData, useRoute, useRouter, withBase
• cli.md - Command line options
• default-theme-config.md - Nav, sidebar, search, footer options
• default-theme-components.md - Hero, features, badge, team page

Links

• Official Docs
• Guide
• Reference
• GitHub