stacks-docs

$npx mdskill add stacksjs/stacks/stacks-docs

Configure and generate documentation for Stacks projects using BunPress.

  • Sets up BunPress with framework defaults and user config.
  • Depends on @stacksjs/docs package and config/docs.ts.
  • Merges framework defaults with user-provided BunPress options.
  • Outputs built documentation to storage/framework/docs/dist/.

SKILL.md

.github/skills/stacks-docsView on GitHub ↗
---
name: stacks-docs
description: Use when building or configuring documentation for a Stacks project — BunPress setup, doc generation, navigation, sidebar structure, or documentation meta/SEO. Covers @stacksjs/docs and config/docs.ts.
license: MIT
compatibility: Bun >= 1.3.0, TypeScript
allowed-tools: Read Edit Write Bash Grep Glob
---

# Stacks Documentation

## Key Paths
- Core package: `storage/framework/core/docs/src/`
- Doc content: `docs/`
- Config: `config/docs.ts`
- Output: `storage/framework/docs/dist/`
- Package: `@stacksjs/docs`

## Source Files
```
docs/src/
├── index.ts              # frameworkDefaults + merged docsConfig
└── meta.ts               # CDN URLs, social links, PWA patterns
```

## API

```typescript
import { frameworkDefaults, docsConfig } from '@stacksjs/docs'

// Framework defaults
const frameworkDefaults: BunPressOptions = {
  docsDir: path.projectPath('docs'),
  outDir: path.frameworkPath('docs/dist'),
}

// Merged config (framework defaults + user config from config/docs.ts)
const docsConfig: BunPressOptions = { ...frameworkDefaults, ...userConfig }
```

## Meta Exports

```typescript
import { googleapis, gstatic, font, ogUrl, ogImage, github, releases, contributing, discord, twitter, pwaFontsRegex, pwaFontStylesRegex } from '@stacksjs/docs'
```

Social and CDN constants used in documentation templates and PWA configuration.

## Configuration (config/docs.ts)

```typescript
import type { BunPressOptions } from '@stacksjs/docs'

export default {
  // Navigation
  nav: [
    { text: 'Changelog', link: 'https://github.com/stacksjs/stacks/blob/main/CHANGELOG.md' },
    { text: 'Blog', link: 'https://updates.stacksjs.org' },
  ],

  // Markdown settings
  markdown: {
    title: 'Stacks.js',
    syntaxHighlighting: { theme: 'material-theme-palenight' },
    toc: { depth: 2 },
  },

  // Sidebar structure
  sidebar: {
    '/prologue/': [/* ... */],
    '/get-started/': [/* ... */],
    '/basics/': [/* ... */],
    '/digging-deeper/': [/* ... */],
    '/cloud/': [/* ... */],
    '/cli/': [/* ... */],
    '/packages/': [/* ... */],
    '/testing/': [/* ... */],
    '/project/': [/* ... */],
  },

  // Theme
  theme: {
    logo: '/images/logos/logo-transparent.svg',
    footer: { message: 'Released under the MIT License.', copyright: 'Copyright © 2025' },
    socialLinks: [
      { icon: 'twitter', link: 'https://twitter.com/stacksjs' },
      { icon: 'github', link: 'https://github.com/stacksjs/stacks' },
      { icon: 'discord', link: 'https://discord.gg/stacksjs' },
    ],
  },

  // SEO
  sitemap: { hostname: 'https://stacksjs.com/docs' },
  robotsTxt: { enabled: true },
} satisfies BunPressOptions
```

## CLI Commands

```bash
buddy dev:docs          # Start docs dev server
buddy build:docs        # Build documentation site
```

## Gotchas
- **BunPress, not VitePress** — the docs engine is BunPress (Stacks' own documentation tool)
- **Config merging** — `docsConfig` merges framework defaults with user config from `config/docs.ts`
- **Sidebar is section-based** — organized by URL prefix (prologue, get-started, basics, etc.)
- **SEO built-in** — sitemap and robots.txt generation enabled by default
- **Output goes to `storage/framework/docs/dist/`** — not the `docs/` source directory

More from stacksjs/stacks

SkillDescription
stacks-actionsUse when working with Stacks server actions — creating actions in app/Actions/, auto-generated API actions from the useApi model trait, the 80+ default framework actions (auth, dashboard, commerce, content, deployment, jobs), action request/response handling, or action registration. Covers @stacksjs/actions and storage/framework/defaults/actions/.
stacks-aiUse when integrating AI capabilities into a Stacks application — using Anthropic/OpenAI/Ollama/AWS Bedrock drivers, image generation (DALL-E), vision analysis, RAG/vector search, embeddings, MCP (Model Context Protocol) clients, text summarization, sentiment analysis, content classification, personalization, or the buddy AI assistant. Covers @stacksjs/ai and config/ai.ts.
stacks-aliasUse when working with path aliases in a Stacks project — import resolution, module aliasing, or debugging import paths. Covers @stacksjs/alias which defines 260+ path mappings for the entire framework.
stacks-analyticsUse when adding analytics to a Stacks application — configuring Fathom or self-hosted analytics, generating tracking scripts, privacy-friendly analytics setup, or the analytics configuration. Covers @stacksjs/analytics and config/analytics.ts.
stacks-apiUse when building, modifying, or debugging API endpoints in a Stacks application — defining routes, handling requests, API middleware, working with the API server, HTTP client (fetcher), API resources, or OpenAPI generation. Covers both @stacksjs/api utilities and the stacks-api server implementation.
stacks-arraysUse when working with array utilities in Stacks — statistical operations (average, median, mode, standard deviation, z-score, percentile, covariance), array manipulation (unique, flatten, partition, shuffle, sample, move), containment checks, or the Arr facade. Covers @stacksjs/arrays.
stacks-authUse when implementing authentication, authorization, passkeys, TOTP/2FA, RBAC, gates, policies, session auth, token management, email verification, password resets, or rate limiting in a Stacks application. Covers the @stacksjs/auth package, config/auth.ts, app/Gates.ts, and app/Middleware/.
stacks-auto-importsUse when working with the Stacks auto-import system — understanding how browser and server auto-imports work, configuring auto-imported functions/models/composables, the auto-import manifests, type generation, or how globals are injected. Covers the auto-import pipeline at storage/framework/auto-imports/.
stacks-brandkitUse when defining or exploring a brand identity for a Stacks project and you want premium brand-kit REFERENCE IMAGES first - logo directions, palettes, typography specimens, identity boards, and application/mockup decks. Generates IMAGES ONLY, never code. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems with intentional logo concepting, sparse type, strong symbolic meaning, and disciplined palettes a coding step can build against.
stacks-browseUse for headless browser QA on Stacks applications — navigation, screenshots, responsive testing, console/network monitoring, and accessibility snapshots. Dependency-free: drives a system browser over the Chrome DevTools Protocol using only Bun (no Playwright/Puppeteer). Invoke with /stacks-browse.