Official Contribution Protocol

Community Contribution & Promotion Pipeline

How community-authored blocks progress from Community Drafts to Verified Blocks, Nominated Candidates, and Promoted Official Core / Pro templates.

01Draft

Community Draft

Authored in Studio or submitted via CLI. Verified locally.

02Verified

Verified Community

Scores ≥95% on automated MCP Token Purity & WCAG AAA Gate.

03Nominated

Nominated Candidate

Top upvoted or >50 forks. Automated GitHub PR created.

04Core DS

Official Core DS

Promoted to @shavin/ui core primitives and documented in official catalog.

Pre-Flight MCP Quality Gate Simulator

Interactive Test

Test your custom TSX component before publishing. The MCP gate verifies zero hardcoded colors, concentric geometry, and ARIA accessibility.

TSX Component Source

import React from "react";
import { Button, Card, Badge, Heading, Text } from "@shavin/ui";
import { Sparkle, ArrowRight } from "@phosphor-icons/react";

export function ContributionExample() {
  return (
    <Card className="p-6 rounded-[var(--radius-panel)] border border-hairline bg-surface hover:border-hairline-strong transition shadow-sm space-y-4">
      <div className="flex items-center justify-between">
        <Badge color="neutral" size="sm" className="gap-1 font-mono">
          <Sparkle weight="bold" />
          Verified Component
        </Badge>
        <span className="text-xs text-fg-muted font-mono">v0.1.0</span>
      </div>
      <div>
        <Heading size="3" className="text-fg font-semibold">Zero-Hallucination Architecture</Heading>
        <Text size="2" color="muted" className="mt-1">
          Every primitive leverages semantic Tailwind tokens, ensuring zero raw hex codes.
        </Text>
      </div>
      <div className="pt-2 flex items-center gap-2">
        <Button variant="solid" size="sm" className="gap-1.5 cursor-pointer">
          Discover More
          <ArrowRight weight="bold" />
        </Button>
      </div>
    </Card>
  );
}

Automated Gate VerdictOverall: 100/100

Verified BlockSemantic token compliant

Tokens

100%

A11y AAA

100%

Geometry

100%

Security

100%

Publishing via @shavin/cli

You can publish and distribute blocks directly from your terminal using the Shavin CLI toolchain:

npx @shavin/cli publish ./src/components/MyBlock.tsx --name="My Block" --category=hero

npx @shavin/cli list --community