The Shavin UI Ecosystem
System Architecture & Tooling
Shavin is built as an end-to-end design engineering ecosystem — bridging headless accessible primitives, visual canvas editing, automated scaffolding, and agentic AI tooling into a unified workflow.
Core Design System
@shavin/ui
WCAG 2.1 AAA accessible React primitives, two-tier token architecture, 24 curated accent palettes, 5 neutral grayscales, and strict concentric geometry math.
Automated CLI Engine
@shavin/cli
One-command project scaffolding (`init`), modular block installation (`add`), token health validation (`check`), prompt manifest extraction (`context`), and live bridge (`bridge`).
Model Context Protocol Server
@shavin/mcp
Zero-hallucination agent pairing for Cursor, Claude Code, Antigravity, and Gemini with real-time AST validation, guideline lookup, and live Studio canvas control.
Shavin Studio Canvas
Visual Builder
Interactive visual workspace for live token tweaking, layout composition, responsive breakpoint simulation, and real-time AI-to-canvas rendering.
Block Registry & Templates
@shavin/block-schema
Production-ready blocks (auth, chat, pricing, settings, dashboard) and full application templates (E-Commerce, Analytics Dashboard, Marketing Landing).
Creative FX Primitives
@shavin/fx
High-performance creative visual effects: Stipple, Mesh Gradient, Fluid Silk, Liquid Chrome, Grid Distortion, Hyperspeed, ASCII Art, Dither Canvas, and Dither Waves.
Shavin Dev Inspector & Bridge
Live HUD & :7428 Daemon
In-browser floating HUD (`<ShavinDevInspector>`) and SSE-driven bridge server for automated DOM compliance, live contrast calculation, and zero-human-in-the-loop QA.
Dynamic Theme Engine
Token Configurator
Zero-overhead runtime CSS variable remapping, scoped micro-themes (`<ScopedThemeProvider>`), adaptive contrast text formulas, and custom brand token generation.