VA Design System Monitor

What is VA Design System Monitor?

A comprehensive tool for monitoring VA Design System component status, maturity levels, and generating implementation examples. It fetches real examples from VA’s official Storybook and is available as both an npm package and an MCP service for AI integration.

How to use VA Design System Monitor?

Install globally with npm install -g va-design-system-monitor, then use CLI commands such as va-components check <component>, va-components examples <component>, and va-components list <status>. It can also be used as an MCP server by configuring npx -y va-design-system-monitor in Cursor or Claude Desktop, or imported programmatically via import { checkComponent } from 'va-design-system-monitor'.

Key features of VA Design System Monitor

• Real official examples from VA’s Storybook repository
• Component status monitoring with maturity levels
• Smart fallbacks when official examples are unavailable
• Multiple interfaces: CLI, programmatic API, and MCP service
• Production-ready for vets-website and va-application-template infrastructure
• Cross-compatible with Node 14.15.0+ through Node 22+

Use cases of VA Design System Monitor

• Check the maturity and recommendation level of any VA component before production use
• Generate implementation examples for components like va-button or va-alert
• Validate multiple components in a codebase with a single command
• Produce a comprehensive report of all component statuses
• Integrate with AI assistants via MCP tools like get_component_status and getComponentExamples

FAQ from VA Design System Monitor

What are the component status levels?

Status levels include RECOMMENDED (best practice, production-ready), STABLE (safe for production), EXPERIMENTAL (development/testing only), AVAILABLE_WITH_ISSUES, and USE_WITH_CAUTION (known issues or under evaluation).

How do I run the MCP server?

Configure Cursor or Claude Desktop to use npx -y va-design-system-monitor as the command. For Cursor, add to ~/.cursor/mcp.json; for Claude Desktop, add to the relevant config file (macOS: ~/Library/Application Support/Claude/claude_desktop_config.json, Windows: %APPDATA%\Claude\claude_desktop_config.json, Linux: ~/.config/claude-desktop/config.json).

Can I get JSON output for programmatic use?

Yes, add --json to any CLI command (e.g., va-components check va-button --json).

What Node versions are supported?

Node.js versions 14.15.0+ through 22+ are supported.

How can I use it programmatically in my project?

Install locally (npm install va-design-system-monitor), then import functions like checkComponent, getComponentProperties, or getComponentExamples, or use the VAComponentMonitor class for advanced usage with caching and custom URLs.