Guides

Build an adapter

Translate visual intent while making capability boundaries visible.

Begin with a capability declaration

An adapter maps a Visual Spec document into a target representation. Start by listing the versions, profiles, component kinds, layout modes, motion features and accessibility contracts it supports. Distinguish parse support, generation support and observed runtime support.

This repository provides schemas, examples, validation tools and an illustrative browser preview. Platform mappings in the component catalog are design guidance. They are not a list of shipped production adapters.

A predictable processing pipeline

  1. Parse JSON without executing values or fetching arbitrary referenced resources.
  2. Validate structure against locally resolved versioned schemas.
  3. Resolve identifiers and check the semantic relationships needed by the adapter.
  4. Compare required capabilities with the adapter's declared support.
  5. Resolve tokens, component definitions and authorized assets.
  6. Build a target-specific intermediate model with explicit units and coordinate conversions.
  7. Generate or render the target and report any approximation.
  8. Collect runtime evidence for the claims the adapter makes.

Do not reorder dependency-sensitive operations merely because JSON object properties arrived in a different order.

Preserve meaning before choosing a primitive

navigation.tabs is a selection pattern connecting tabs and panels. A platform tab bar can instead represent top-level navigation. Select a target primitive based on the actual behavior and semantic contract, rather than a similar name.

Prefer existing design-system components when an explicit mapping is provided and its contract is compatible. Mapping a name is not enough: verify variants, slots, focus behavior, dismissal, disabled behavior and reduced-motion handling.

Approximations must be inspectable

If a renderer cannot reproduce a spring exactly, it may use an allowed approximation. Report the substituted timing or curve and its expected impact. A required camera model, interaction or accessibility relationship must not disappear silently.

Keep a transformation record linking target objects back to source IDs. This makes diagnostics, visual diffs and future edits traceable.

Test the boundary

Test malformed documents, unresolved IDs, unsupported capabilities, missing assets and cancellation as well as successful rendering. For UI adapters, use real keyboard interaction and accessibility-tree inspection. For time-based output, sample more than one frame and test interruption behavior.