dashbook
Use / Engineer

Engineer.

Build Dash.fi UI in any stack. Dashbook exposes the design system three ways: a Claude Code plugin with skill + slash commands + MCP, a remote MCP for other clients, and a static JSON / SVG API for everything else.

1. Install

The fastest path: install the plugin and let Claude Code wire everything.

bash 
# In Claude Code (per-user) — plugin: MCP tools + skill + slash commands
/plugin marketplace add trlmkb/dashbook
/plugin install dashbook@dashfi

# Or just the MCP server, no plugin:
claude mcp add --transport http dashbook https://brand.dash.fi/mcp

# claude.ai — Customize -> Connectors -> add a custom connector:
#   https://brand.dash.fi/mcp
# Claude Desktop — claude_desktop_config.json, mcpServers.dashbook:
#   { "command": "npx", "args": ["-y", "@dashfi/mcp-server"] }

# Verify — either path
/mcp                          # "dashbook" should appear, connected

# Plugin only (slash commands ship with the plugin):
/dashbook-component button    # fetches Button anatomy from MCP

# Standalone MCP — ask the client to call the tool:
#   product_get_component({ slug: "button" })

Every client is above. The longer setup matrix — Claude Design, troubleshooting, per-client screenshots — is at /developers/install (internal).

2. Workflow

The canonical loop when building a screen.

bash 
# 1. Find the right component
product_list_components({ category: "Inputs" })

# 2. Get full anatomy (dimensions, tokens, variants, props)
product_get_component({ slug: "button" })

# 3. For a non-Svelte stack, get the stack-specific port
product_port_to({ slug: "button", stack: "react" })

# 4. Resolve a token to a hex value
product_get_token({ name: "brand" })   # → { light: "#2B605C", dark: "#5BB8B0" }

The skill activates automatically on Dash.fi keywords. If you're hitting it manually, prefix your request with "Use the Dashbook product design system" so the agent loads context.

Clients that browse a catalogue instead of calling tools can also read MCP resources — dashbook://components, dashbook://components/{slug}, and dashbook://foundations/{slug} — same data, resources/list + resources/read. The connector commands for every client are in step 1 above; the deeper write-up (discovery via llms.txt and the ARD manifest, transport details) is at /developers/mcp (internal).

3. Build to spec

Every component has a structured anatomy: dimensions, tokens, variants, sizes, props, composition rules, non-features, porting checklist.

  • Dimensions: exact pixel values (height, padding, radius). No "looks about right."
  • Tokens: resolved hex values in both light + dark mode. Token name + literal hex next to each other so the port is unambiguous.
  • Composition: how the component is assembled from sub-parts. E.g. Button = root + label + optional icon.
  • Non-features: what the component explicitly does NOT do. Saves you from "can I add an icon prefix to Input?" (no — wrap it differently).
  • Props: typed props table with defaults + nullable flags.
  • Porting: stack-specific checklist (React / RN / HTML+CSS / Vue).
4. Non-Svelte stacks

Tokens, components, and the port-to recipes work the same way regardless of stack. The lib is Svelte; the design system is the design system.

See /developers/from-another-stack (internal) for the full guide on vanilla CSS tokens, font loading, component port recipes for React / React Native / HTML+CSS / Vue. The same recipes are available to any client through the product_port_to MCP tool, which needs no login.

5. No MCP? Hit the JSON API

Every component anatomy and every foundation token is available as static JSON. CORS open, 24h cache, no auth, no SDK.

bash 
# No MCP client? Hit the JSON API directly:
curl https://brand.dash.fi/api/components.json                # catalogue
curl https://brand.dash.fi/api/components/button.json         # one component
curl https://brand.dash.fi/api/foundations/color.json         # tokens (light + dark)
curl https://brand.dash.fi/api/foundations/typography.json    # type system + webDelivery URLs
curl 'https://brand.dash.fi/api/logo/wordmark/jade?format=svg&size=400'  # wordmark

These work for any client — agents, crawlers, archives, link unfurlers, doc-search indexers. Same shape as the MCP tools return.

6. Reporting bugs

Found a component anatomy that doesn't match the source? An MCP tool that returns the wrong shape? A token that drifted?

  • Issue on GitHub: FunnelDash/core (internal)
  • Slack: #dashbook (or DM the maintainer)
  • Quick fix yourself: PRs welcome. The spec files at src/lib/specs/ are the single source of truth — fixing one updates docs + MCP + JSON API simultaneously.