skills.rest
NalinDalal
NalinDalalCOMMUNITY
Explore all skills by this author →
Website𝕏@nalin82929GitHub

vitepress-docs

Implements a warm parchment VitePress documentation design system with tokens, components, and layouts.

1|Updated Aug 17, 2026
Search Tags:#typography#documentation#design system#static site#dark mode#vitepress#css tokens
One-click install
npx skills add https://github.com/NalinDalal/skillset --skill vitepress-docs-nalindalal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vitepress-docs
Source: https://github.com/NalinDalal/skillset/tree/main/skills/ui/vitepress-docs
Command: npx skills add https://github.com/NalinDalal/skillset --skill vitepress-docs-nalindalal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires vitepress, and includes references (resource) components.

What problem does it solve? Building documentation sites that look polished rather than templated requires many small design decisions across color, typography, layout, and components. This Skill provides a complete VitePress design system with concrete CSS tokens and component patterns so documentation sites, developer portals, and API docs get a consistent warm aesthetic without designing from scratch. ## Core Features & Use Cases - Design Token System: Light and dark mode color palettes (warm cream #F3EFE8, deep charcoal #141313), Inter typography scale, spacing, shadows, and z-index values ready to paste into a custom VitePress theme. - Component Patterns: Reference implementations for nav bars, hero sections, feature card grids, Shiki code blocks, package-manager code tabs, sidebar navigation, and footers. - Use Case: When asked to build a documentation site or library landing page, apply the custom.css overrides and component markup to produce a VitePress site matching the warm parchment style of iim.smartsquad.io. ## Quick Start Use the vitepress-docs skill to build a documentation landing page for my library with a hero section, feature cards, and tabbed install commands.

Frequently Asked Questions about vitepress-docs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I customize VitePress theme colors and fonts?▼

Override VitePress CSS custom properties in docs/.vitepress/theme/custom.css. Set variables like --vp-c-bg, --vp-c-text-1, and --vp-c-brand-1 on :root for light mode and on the .dark class for dark mode, plus --vp-font-family-base for typography.

How to add tabbed code blocks for npm, yarn, and pnpm in VitePress?▼

VitePress supports code groups using the ::: code-group markdown syntax with separate fenced blocks per package manager. The rendered tabs use radio inputs with labels, styled with a bottom border indicator on the active tab.

Does VitePress support dark mode toggling?▼

Yes, VitePress handles dark mode via a .dark class on the html element with a sun/moon toggle in the nav bar. The selection persists to localStorage under vitepress-theme-appearance and respects prefers-color-scheme when set to auto.

VitePress vs Docusaurus vs Nextra for documentation sites?▼

VitePress is a Vue-based SSG with fast builds and Shiki syntax highlighting, suited for library docs. This design system also applies to Astro, Docusaurus, and Nextra since the tokens and component patterns are framework-agnostic CSS.

Why does my VitePress site look templated and sterile?▼

Default VitePress uses pure white backgrounds and generic spacing. Override --vp-c-bg to a warm off-white like #F3EFE8, use Inter with a defined type scale, and keep generous 48-64px section gaps to achieve a distinctive reading experience.

Related Skills

Explore More Design & Creative Skills→
vvedantbvvedantb
99

brandkit

Generate a cohesive brand-kit board with a 3×3 grid and consistent color palette.

Community
Advanced
brainbrewlabsbrainbrewlabs
7

doc-publishing

Publishes documentation to GitHub Pages, Vercel, or Netlify from source docs and build outputs.

Official
Intermediate
exiaoexiao
37

image-generator

Generate article visuals and compile an images manifest.

Community
Intermediate
cybersadercybersader
5

docs-site

Build and configure the Crosswalker documentation site using Astro Starlight.

Community
Advanced