Pipeline
Design-to-Code Pipeline Started
Timeline component — Research → Stitch → Penpot → Tokens → Code
SuccessTimeline
data-displayVertical chronological feed of events (commits, deploys, approvals, publishes, pipeline runs) with type filtering and status badges. Pipeline-generated via design-to-code automation.
Import
typescript
import { Timeline } from "packages/ui/src";Props
TimelineProps
| Prop | Type | Required |
|---|---|---|
events | TimelineEvent[] | Yes |
filters | EventType[] | No |
className | string | No |
Examples
Deploy
Production Deploy — cms.chem.dev
Next.js build + PM2 restart, all 10 routes returning 200
SuccessCommit
test(ui): add 33 component unit tests
vitest + @testing-library/react for all 10 shared components + registry
Approval
Design Drift Score: 100/100
All 10 components pass token completeness, usage, and metadata checks
SuccessCommit
feat(tokens): add 17 Timeline tokens (196 total)
Component-specific tokens for line, event, badges, filters extracted from Stitch design
Publish
Architecture Documentation Published
606-line architecture doc + 6 ADRs covering brain integration, deployment, tokens
Pipeline
Stitch Screen Generated
Timeline Dashboard screen via Gemini 3.1 Pro — Synthetica Enterprise design system
SuccessDeploy
CI/CD Pipeline Configured
5 GitHub Actions jobs: build-web, build-cms-theme, unit-tests, design-drift, smoke-tests
PendingCommit
feat(web): interactive component playground
ButtonPlayground, AlertPlayground, MetricsPlayground with live prop controls
Approval
E2E Test Plan — 5/5 Passed
Full tool chain validated: token pipeline, component generation, MCP integration
Success