nds-doc

Locate source files and generate or refine NDS documentation pages.

14|8|Updated Aug 16, 2025
One-click install
npx skills add https://github.com/mazin-musleh/NDS-vanilla --skill nds-doc
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nds-doc
Source: https://github.com/mazin-musleh/NDS-vanilla/tree/main/.claude/skills/nds-doc
Command: npx skills add https://github.com/mazin-musleh/NDS-vanilla --skill nds-doc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines creating and maintaining National Design System (NDS) documentation pages across components, UI Shell, layout, and utilities, ensuring consistency and accuracy.

Core Features & Use Cases

  • Create new pages from source files by aggregating component docs, code samples, and usage guidelines.
  • Refine existing docs to reflect the latest SCSS/JS definitions, demos, and accessibility notes.
  • Update demo cards, code tabs, and built in features sections to keep documentation aligned with live components.

Quick Start

Use this skill to generate or refine a doc page for a named component by locating its source in components, ui-shell, layout, or utilities, then assemble a production-ready page with demo cards and code tabs.

Frequently Asked Questions about nds-doc

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

FAQPage Schema
How do I generate documentation pages for a component library from source files?

Generate documentation pages by locating source files across components, ui-shell, layout, and utilities directories to aggregate component docs, code samples, and usage guidelines into a production-ready page. This process ensures documentation accurately mirrors the underlying SCSS and JS definitions.

What is the best way to keep design system documentation aligned with live demos?

Keep design system documentation aligned by updating demo cards, code tabs, and built-in feature sections to reflect the latest SCSS and JS definitions. Refining existing docs ensures content stays synchronized with live component behavior and accessibility notes.

How do I structure front matter and code samples for design system guidelines?

Structure front matter and code samples by applying design-system documentation patterns that organize section structures and built-in features. This approach ensures consistent formatting across component pages, UI shell layouts, and utility documentation.

Can I use this approach to document both new and existing UI components?

Yes, you can document both new and existing UI components by creating pages from source files or refining existing documentation. The process works across components, ui-shell, layout, and utilities to maintain consistency throughout the design system.

Does this documentation process require specific directory structures for source files?

The documentation process targets source files specifically within components, ui-shell, layout, and utilities directories. Organizing your codebase with these directories allows the system to locate relevant files and accurately drive page generation for the design system.