Author components with the agent skill
Inkbridge ships its component-authoring guidance as a portable agent skill — it encodes the plugin-rendering rules and uses the MCP to discover your components and tokens while your agent builds from a Figma frame.
How it works
Inkbridge ships `inkbridge-component-authoring` as an agent skill — the open, portable SKILL.md format, not tied to any one assistant. It auto-activates when you bootstrap a new component from a Figma design and encodes the rules that make a story render correctly in the plugin — no inline styles for theme values, one story per visual state, semantic tokens over raw hex/px, reuse existing primitives — and it is self-contained: it adapts to your project's own conventions rather than assuming a layout. It pairs with the MCP server: before writing, the skill calls `list_components` / `get_component` to find primitives and variant axes to reuse and `get_tokens` for your real token names. So the Figma MCP supplies the design and the inkbridge MCP supplies what code already exists — the skill bridges the two. Install it with `inkbridge skill install`; it drops the skill into your agent's skills directory (`.claude/skills/`), version-matched to your installed plugin.
Usage
- 1
Install Inkbridge (`pnpm add -D inkbridge`) and register the MCP server (see “Read your design system from an AI agent”).
- 2
Run `inkbridge skill install` — it copies the component-authoring skill into your agent's skills directory.
- 3
Reload your agent so it picks up the skill.
- 4
Hand your agent a Figma frame URL and ask it to build the component — the skill activates, discovers your components and tokens over MCP, and adapts the Figma MCP draft to your conventions.
- 5
Review the generated story in Storybook, then round-trip it through the plugin's Generate Design System Page.