Marketing Landing Page Template

>npx @shavin/ui add template-landing

@shavin/ui

Zero-Slop Token Architecture • Built for AI Agents

Architect Enterprise Web Apps with Concentric Precision

@shavin/ui is a strict two-tier token design system powered by WCAG 2.1 AAA Radix primitives, a live visual Block Builder, and native MCP intelligence.

Designed for Humans & AI Agents

Every component reads semantic custom properties so runtime theme changes update instantaneously.

Concentric Radius Math

Nested radii calculate R_inner = R_outer - P to ensure zero visual distortion or awkward corners.

2-Tier Token Discipline

Foundation scale (--n-*) feeds semantic roles (--accent, --fg). Fails CI if colors leak.

Model Context Protocol

Native shavin-mcp server lets Cursor, Claude, and Antigravity query components and validate JSX.

1-Command Installation

Run npx @shavin/ui init to automatically configure Tailwind presets and global styles.

npx @shavin/ui init

import { Button, Card, ColorPicker } from "@shavin/ui";

export function App() {
  return (
    <Card className="p-6">
      <Button variant="solid">Hello @shavin/ui</Button>
    </Card>
  );
}