Examples & use cases

Concrete, copy-pasteable setups for common scenarios.

Register a single package

The minimum to browse a library:


// .vscode/settings.json
{
  "snapds.packages": [
    { "name": "@acme/ui", "version": "1.4.0", "importPath": "@acme/ui" }
  ]
}

Multiple packages in a monorepo


{
  "snapds.packages": [
    { "name": "@acme/ui", "version": "2.0.0", "importPath": "@acme/ui" },
    { "name": "@acme/icons", "version": "2.0.0", "importPath": "@acme/icons" },
    {
      "name": "@acme/charts",
      "version": "0.9.0",
      "importPath": "@acme/charts",
      "tsconfigPath": "packages/charts/tsconfig.json"
    }
  ]
}

Point tsconfigPath at a package’s own tsconfig.json when its types rely on path aliases or custom compiler options, so react-docgen parses it correctly.

Tidy the gallery for a team

Hide internal components and surface a polymorphic one that docgen misses. This belongs in a committed snapds.config.json so the whole team shares it:


// snapds.config.json
{
  "packages": {
    "@acme/ui": {
      "ignore": ["InternalOnly", "DebugGrid"],
      "overrides": {
        "Box": { "snippet": "<Box as=\"section\">$1</Box>" },
        "Button": {
          "props": {
            "variant": { "defaultValue": "primary", "description": "Visual style." },
            "internalTelemetryId": { "hidden": true }
          }
        }
      }
    }
  }
}

Ship agent-ready skills

Turn your components into skills a coding agent can load on demand:


// .vscode/settings.json
{
  "snapds.skills": {
    "enabled": true,
    "formats": ["claude", "cursor", "copilot"],
    "destination": "workspace",
    "autoGenerate": true
  }
}

Then run Snapds: Generate Skills. See Skills for agents for the output layout.

Use cases

Consume an internal library without memorizing props — drag a component in and get correct JSX plus the import.

App developer

Ship shared conventions via snapds.config.json: hide internals, set defaults, and standardize snippets across every consumer.

Design-system team

Monorepo

Export SKILL.md / AGENTS.md so agents use your real components instead of guessing prop names.

AI-assisted dev