design-system-docu-skills

VitePress component documentation can be structured using a standardized 5-tab pattern covering Live Example, Code Docu, Guidelines, UI Specs, and Accessibility. This approach enforces consistent frontmatter naming and uses a reusable ComponentTabBar for navigation.

Yes, design-system documentation can support EN and TH locales using VitePress. This is achieved by applying locale-specific rewrites and sidebar configuration templates to ensure content consistency across different languages.

Scaffolding new component docs is best handled through an add-component-tabs workflow. This populates the documentation with ready-made reference templates and live <PropsPlayground> demos, ensuring every new component follows the standard guidelines.

VitePress supports live interactive code demos using the <PropsPlayground> component. This allows you to embed functional examples directly within the Live Example tab of your multi-tabbed component documentation structure.

Consistent frontmatter naming across component documentation is enforced by applying a standardized documentation skill. It utilizes predefined reference templates sourced from SKILL.md to govern the metadata structure for every component.

A standardized tab structure for design-system component docs ensures uniformity across components and locales. It separates concerns into Live Example, Code Docu, Guidelines, UI Specs, and Accessibility, making the documentation predictable and easier to navigate.