StyleScribe

npm install -g @maravilla-labs/stylescribe

StyleScribe is a CLI tool that generates beautiful, interactive documentation from your CSS/SCSS files and design tokens.

Quick Links

Key Features

Annotated Stylesheets

Document your CSS/SCSS components using JSDoc-style annotations. StyleScribe extracts metadata, variations, examples, and more.

/**
 * @title Button
 * @description Interactive button for user actions
 * @group Actions
 * @variations primary, secondary, danger
 * @examples
 * - title: Primary
 *   code: <button class="btn btn--primary">Click</button>
 */
.btn { /* ... */ }

W3C Design Tokens

Full support for W3C Design Tokens Community Group (DTCG) format with 46 programmable functions for colors, typography, and more.

{
  "color": {
    "primary": { "$value": "#3b82f6" },
    "primary-light": { "$value": "tint({color.primary}, 20%)" },
    "text-on-primary": { "$value": "accessibleText({color.primary})" }
  }
}

Live Development

Hot reload development server watches your files and updates the browser instantly. No manual refresh needed.

stylescribe dev --watch

MCP Integration

Built-in Model Context Protocol server for AI assistants like Claude Code. Get intelligent suggestions and automate component creation.

Installation

npm install -g @maravilla-labs/stylescribe
stylescribe init my-docs
cd my-docs
npm run dev

Project Types

StyleScribe supports multiple documentation use cases:

Type	Description
Design System	Full component library with tokens, variants, and examples
Documentation Site	Markdown-based docs with optional components
Style Guide	CSS documentation with live previews

More Resources