Zero to Component
in Under 5 Minutes
Developer onboarding that respects your time
Clone, install, run. No environment configuration, no secret keys, no "ask Dave about the wiki page." Every developer hits a working Storybook with hot-reload in under five minutes.
From Clone to First Component
Every step measured, every dependency automated. Here is the actual timeline a new developer experiences on day one.
Single monorepo. One clone gets you the component library, Storybook, documentation site, and all tooling.
git clone git@github.com:org/wc-2026.git npm workspaces resolve all cross-package dependencies in a single install. No manual linking, no hoisting issues.
npm install Turborepo orchestrates parallel builds. Vite dev server with HMR starts in under 10 seconds from cold.
turbo run dev Every component rendered with all variants, states, and theme combinations. Interactive controls powered by CEM autodiscovery.
Edit a component, see it update instantly in Storybook. TypeScript catches errors before you save. CEM regenerates on file change.
Monorepo Developer Ergonomics
Three focused workspaces, one Turborepo pipeline. Changes propagate instantly across packages with zero manual coordination.
Core component library. Lit 3 web components, design tokens, and the Custom Elements Manifest source of truth.
Interactive component explorer with autodiscovered controls, multi-theme preview, and accessibility testing built in.
Starlight-powered documentation with auto-generated API reference pages sourced directly from the CEM pipeline.
Autocomplete That Knows Your Components
The Custom Elements Manifest powers IDE autocomplete out of the box. Every property, event, slot, and CSS custom property is discoverable without leaving your editor.
Documentation That Writes Itself
Write JSDoc once in your component. The CEM pipeline automatically generates Storybook controls, API reference pages, and IDE intellisense.
Interactive controls, prop tables, and live examples generated from the manifest.
Complete API reference pages with property tables, slot docs, and event signatures.
Rich autocomplete for HTML templates with property types, slots, events, and CSS parts.
Four Automated Gates,
Zero Manual Steps
Quality engineered into the process, not bolted on after
Every commit passes through unit tests, accessibility audits, visual regression checks, and end-to-end validation. No human gatekeeping required. The pipeline catches what code review cannot.
The Testing Pyramid
Four layers of automated validation. Each level catches a different category of defect, from logic errors to visual regressions.
Full page integration testing across real browsers. Validates component interactions in complete page contexts.
Pixel-perfect screenshot diffing across every variant, theme combination, and viewport. Catches CSS regressions invisible to unit tests.
WCAG 2.1 AA compliance on every commit. Automated audits catch color contrast, ARIA, keyboard nav, and screen reader issues before merge.
Real DOM, real browser, real rendering. Not jsdom approximations. Every component tested against actual browser APIs.
Catch Bugs Where They Are Cheapest to Fix
Traditional pipelines find bugs in QA or production. This system shifts detection to the moment of creation.
Quality at a Glance
Real-time quality metrics tracked across every component in the library.
Statement and branch coverage across all components
Every component passes axe-core WCAG 2.1 AA audit
Every variant and theme combination screenshot tested
Every critical user flow validated end-to-end in CI
From Commit to CDN
in 8 Seconds
Turborepo-powered builds with intelligent caching
Push code, watch it flow through type checking, testing, accessibility auditing, visual regression, and deployment. Cached builds complete in seconds. Full builds complete in under a minute.
Seven Stages, Fully Automated
Every push triggers a deterministic pipeline. Each stage gates the next. Failures halt deployment and notify the author instantly.
Turborepo Remote Cache in Action
When the dependency graph has not changed, builds are served from cache. The difference is dramatic.
Complete rebuild of all packages, components, Storybook, and documentation from scratch.
Turborepo remote cache restores unchanged outputs. Only modified packages rebuild. An 82% reduction.
Three Channels, One Pipeline
Components ship through three parallel channels, each optimized for a different consumption pattern.
Full library with TypeScript types, CEM manifest, and tree-shakeable ESM exports. For Drupal teams integrating via build tools.
npm install @org/wc-2026 Single script tag for quick integration. Auto-registers all components. Ideal for prototyping, CMS embeds, and static sites.
<script src="cdn/wc-2026.js"> Design tokens only, published separately. Allows theme updates without touching component code. CSS custom properties and SCSS maps.
npm install @org/wc-tokens Automated, Auditable, Reversible
No human runs npm publish. Every release is triggered by merging a changeset PR, fully automated through CI.
Developers add changeset files describing what changed and the semver impact (patch, minor, major).
CI automatically determines the next version, updates package.json, and generates release notes.
CI publishes the package to npm and deploys the CDN bundle. No developer credentials required.
Automated GitHub release with full changelog, contributor credits, and downloadable artifacts.