Design Canvas Plugin — Component Library Inspector

A Design Canvas plugin that inspects and documents component libraries. Detects components on any page, maps their props, variants, design tokens, and generates Markdown documentation.

Features

• Framework Detection — React, Vue, Angular, Svelte, Lit, Web Components, Custom Elements
• Prop Extraction — HTML attributes, dataset, ARIA, meaningful classes
• Token Discovery — CSS custom properties / design tokens in use
• Variant Detection — state variants (primary, disabled, small, etc.)
• Page Scanner — walk the entire DOM to catalog all unique components
• Doc Export — generate Markdown documentation per-component or for the entire page
• Dark Mode — full Fluent 2 light/dark theme support
• AI Skills — bundled Copilot/Claude skills for component inspection

Install

npm install design-canvas-plugin-component-library-inspector

Configure

Add to your .designcanvas.json:

{
  "plugins": {
    "component-library-inspector": {
      "enabled": true
    }
  }
}

Usage

1. Open the Design Canvas toolbar
2. Click the Component Library icon (code brackets)
3. Use Pick Element to inspect a single component, or Scan Page to find all components
4. Browse components — click one to see Props, Tokens, and Docs tabs
5. Copy Doc copies Markdown for the selected component
6. Export All copies Markdown for all detected components

Keyboard Shortcut

• Ctrl+Shift+L — pick an element to inspect

Development

npm install
npm run dev        # watch mode
npm run build      # compile to dist/
npm run typecheck   # type check without emit
npm run validate   # run plugin validation checks

Testing Locally

# In this directory
npm link

# In your app directory  
npm link design-canvas-plugin-component-library-inspector

Project Structure

src/
  index.ts    — Plugin entry point (PluginDefinition)
  detect.ts   — Component detection engine
  ui.ts       — UI renderers (three-zone panel layout)
  theme.ts    — Fluent 2 theme colors
  skills.ts   — Bundled AI agent skills

Extending

Add a new framework detector

Edit src/detect.ts → detectFramework():

// Example: add Stencil detection
if ('s-id' in (el as any) || el.hasAttribute('s-id')) {
  return 'stencil';
}

Add a new tab

1. Add the tab ID to PluginState['activeTab'] in both src/index.ts and src/ui.ts
2. Add a renderTabBtn() call in renderBody()
3. Create a renderer function in src/ui.ts

See .github/skills/dc-plugin-develop/SKILL.md for full development guide.

License

MIT