Skip to content

« all projects

meridian · design system

2020-2025 · proprietary · nx monorepo · 7 libs

Meridian is the framework-agnostic enterprise design system I architected. Vue 3 source compiles to standards-based custom elements via defineCustomElement, ships to Vue, Angular, AEM, and any HTML, and gets backed by a custom Nx plugin that handles scaffolding, IDE metadata, docs, and recipes. Three case studies on this site cover the leadership arc; this page is the architectural overview.

Architectural overview of the component library »

the seven libraries

Everything lives in one Nx monorepo. Seven libraries, each independently versioned and published:

vue source layer
The canonical Vue 3 source. Forms, charts, modals, navigation, layouts, content. Built as Vue single-file components so designers and engineers share one mental model.
custom-elements layer
The standards-based output. Each component is wrapped via defineCustomElement and registered with the global registry. Framework-agnostic consumers use these directly.
angular adapter
Angular-flavored adapters and typed wrappers over the same custom elements. Angular apps get typed templates without diverging from the source of truth.
core utilities
Shared composables, directives, types, styles, and the foundation utilities every component builds on.
style tokens
Design tokens as CSS custom properties. Spacing, typography, color, breakpoints, everything that pierces shadow DOM via the cascade.
recipes
Pre-composed multi-component patterns, the “here’s how to build a labeled-input-with-validation” layer. Discoverable via Storybook and the MCP server (see the AI-architecture deep dive).
automation plugin
A custom Nx plugin built in-house. Generators for component and recipe scaffolding; executors for IDE metadata generation, documentation, custom-HTML output, and icon-blueprint builds. The automation layer that keeps conventions encoded as templates and tooling rather than tribal knowledge.

vue source → custom elements

The architectural premise. One Vue 3 single-file component, exposed as a standards-based custom element. Any Vue app, Angular app, AEM template, or plain HTML page renders the same tag and gets the same behavior, same styles, same events, same accessibility tree.

Each component compiles through Vue 3’s defineCustomElement, registers a kebab-case tag, and is exported from a single entry point so consumers import once and get every tag upgraded automatically. This is the direct successor to the Anchor vue-custom-element pattern, now built into Vue 3 itself, no third-party runtime adapter, full TypeScript types.

build-time IDE metadata

The IDE-awareness foundation. At every build, an Nx executor walks every Vue SFC, runs it through vue-docgen-api, extracts props (with type info), events, slots, and emits two schema files, JetBrains web-types JSON and VS Code custom HTML data, both declared in package.json so any editor that installs the package gets autocomplete automatically.

This is Layer 1 of the three-layer AI architecture, the metadata an MCP server can serve, an IDE can autocomplete, and an agent can reason over. The other two layers (the MCP server itself, and Claude Code skills) sit on top of this.

component scaffolder

The day-to-day developer experience. One Nx generator scaffolds a new component into both the Vue source and custom-elements layers, with optional usage docs and meta JSON for the AI/IDE integration, and auto-registers the new tag in the component registry. Conventions encoded as templates; boilerplate is no longer something engineers have to remember.

Cost of adding a component drops from “remember a dozen conventions” to “answer three questions.” Documentation quality becomes the default, not an afterthought.

contribution profile

Roughly 160 commits authored across the monorepo over two years of active platform work. Shape of the work was heavy on feat and chore, the platform-level decisions (monorepo plumbing, Storybook with Vite when default was still Webpack, lint and format hooks at write time, conventional-commit release tooling, design-token plumbing) that let the rest of the team move quickly.

More on the contribution profile »

what's not on this page

A few things from newer iterations of the system, covered elsewhere on this site:

stack

Frontend
Vue 3 SFCs, Vue 3 defineCustomElement, TypeScript
Build
Nx monorepo with custom executors and generators; Vite
Documentation
Storybook 9 per package, composed root Storybook, MDX usage docs
Testing
Jest unit + visual regression + a11y
IDE / AI
Build-time JetBrains web-types + VS Code html-data; MCP server (in a separate repo) feeds AI assistants
Distribution
Seven independently-versioned npm packages, semver-driven releases

More: component-library overview »
Related: Anchor (the predecessor) · Skeletor (the agency-era seed) · Building the design system · Design System + AI Architecture