projectdesign-systemreacttailwindcomponentspresetstokensoklchagent-firstopen-sourceUpdated 2026-07-01

Sigil UI

A token-first React component library where one spec drives the entire design system. Change the tokens. Everything updates.

View original tweet

What It Is

Sigil UI is a React component library and CLI built around a single idea: design tokens are the system, components just consume them. One markdown source of truth (DESIGN.md, legacy sigil.tokens.md) drives 350+ components across 46 presets from 519 tokens. Swap the preset, the entire identity changes. Edit a token, every component inherits. See Sigil Token Architecture for the token mechanism and Constraints over Context for the philosophy.

The positioning against shadcn is explicit: shadcn gives you components, you still build the system. Sigil's bet is that the system is the product - presets, tokens, agent-editable surfaces - not just the parts. That bet was partly validated in 2026 when shadcn itself shipped a preset system (see External validation below).

Kevin now uses Sigil as a public identity signal, not only an internal component project: his X bio says he is "building sigil." That makes the project part of the career/profile story as well as the design-system story. Source: X/@kevskgs profile snapshot, 2026-05-12

Why it matters to agents

Sigil is Kevin's answer to the "AI-generated UI" failure mode. Agents do not lack the ability to produce JSX. They lack stable taste constraints. Sigil moves the decision surface from scattered class strings to a single editable system: DESIGN.md, typed tokens, presets, primitives, component conventions, CLI doctors, and task-specific skills. Source: reticle-ui README, 2026-06-18

The project matters because it turns taste into an operating environment:

  • Agents can change product identity by editing tokens rather than rewriting components.
  • Presets become portable design-system snapshots.
  • Components consume variables instead of hardcoded values, so design drift is detectable.
  • The CLI gives agents a canonical way to initialize, convert, add, diff, inspect docs, and run doctors.
  • Skills teach agents the local grammar before they touch the surface.

This is Constraints over Context in product form: references are useful, but constraints are what make agent output reliable.

Architecture

Token pipeline: DESIGN.md → parse → SigilTokens (519 tokens across 33 categories) → compile to CSS custom properties + Tailwind v4 @theme + W3C JSON → components consume only variables, never raw values.

Monorepo (pnpm workspaces + Turbo):

Package Role
@sigil-ui/tokens Types, defaults, markdown parser, CSS/Tailwind/TS/JSON compilers
@sigil-ui/presets 46 named preset bundles
@sigil-ui/components 350+ styled React components consuming var(--s-*)
@sigil-ui/primitives 40+ headless behavior primitives (28 Radix + 13 Base UI)
@sigil-ui/cli init, convert, add, preset, design (generate/compile/sync/extract), inspire, adapter, docs, diff, doctor
create-sigil-app npx create-sigil-app scaffolder (Next.js + Tailwind + Sigil)

Component model: forwardRef + className, BEM-style sigil-* classes consuming var(--s-*) tokens, clsx + tailwind-merge, variants as typed props. No hardcoded visuals - only CSS variable references.

Key Design Decisions

  1. Single source of truth: tokens in TS + markdown, compiled to CSS. Visual constants never scatter into components. Source: User, 2026-04-22
  2. OKLCH end-to-end for all color tokens. Source: User, 2026-04-22
  3. Presets swap all 519 tokens at once - identity change in one command (sigil preset <name>). Source: User, 2026-04-22; current stats reticle-ui/STATS_MANIFEST.md, 2026-05-31
  4. Agent-first: root AGENTS.md, generated .sigil/AGENTS.md, npx sigil docs <component>, five domain skills (tokens, component, layout, migration, preset). Source: User, 2026-04-22
  5. Radix for behavior, Sigil for chrome - parallel to shadcn's stack but with stricter token consumption rules. Source: User, 2026-04-22

46 Presets

Structural, minimal, dark, colorful, editorial, industrial. The signature preset ("sigil") features cross marks, grid lines, and an engineered reticle aesthetic - Nacelle font, indigo palette.

Agent Skills (9 domains)

Sigil ships task-specific skills so an agent operates the system instead of guessing at it. Source: reticle-ui/README.md skills/, 2026-06-13

Skill Domain
sigil-tokens Three-layer token model, OKLCH rules, per-category CSS prefixes
sigil-preset Preset creation, derivation, mergePresets
sigil-design Generate / compile / sync / extract DESIGN.md
sigil-component Component authoring pattern, forwardRef, BEM classes, no hardcoded visuals
sigil-layout Page composition with SigilGrid, SigilCross, SigilRail
sigil-playbook End-to-end page composition rules
sigil-migration shadcn → Sigil migration (full, incremental, or tokens-only)
sigil-polish Interface polish pass
sigil-messaging Copy, positioning, stats source of truth

Stack

  • React 18/19, TypeScript 5.8
  • Tailwind CSS v4 with @theme token integration
  • OKLCH color space
  • GSAP + ScrollTrigger, Motion (Framer Motion family)
  • Radix primitives for accessibility/behavior
  • pnpm workspaces + Turbo
  • tsup for package builds

Motion Philosophy (Emil Kowalski framework)

Sigil's animation system follows Emil Kowalski's design engineering principles:

  • Frequency-based decisions: no animation on high-frequency actions (100+/day)
  • Custom easing curves: cubic-bezier(0.23, 1, 0.32, 1) for ease-out, never built-in CSS easings
  • Duration under 300ms for UI, exit ~20% faster than enter
  • Component conventions: scale(0.97) on press, never scale(0), origin-aware popovers, skip tooltip delay on subsequent hovers
  • Performance: GPU-only (transform/opacity), Framer Motion x/y are NOT hardware-accelerated -- use transform: "translateX()"
  • Spring physics: { duration: 0.5, bounce: 0.2 } for interruptible gestures

See skills/engineering/design-engineering-polish/SKILL.md and wiki/style/design-and-animation.md.

Cross-repo agent/CSS conventions (enforced): CSS UI Enforcement - scrollbars, ::before hit areas, typed @property for animated gradients, tokenized clamp type, Lean Ctx at bootstrap. Shadcn Registry Directory (Top Blocks) lists high-signal registries when pulling third-party blocks.

Current State

Working: monorepo packages, the DESIGN.md compile pipeline (CSS + Tailwind v4 + W3C JSON + TS), 46 presets, 350+ components, full CLI (init/convert/design/preset/inspire/adapter/docs/diff/doctor), 9 agent skills, and a layered auditor system (doctor, diff, preset validation across all 519 fields, TypeScript satisfies guarantees, WCAG AA contrast audit, component-convention + design-system rule enforcement). Live at sigil-ui.dev with docs and a browsable preset gallery. Dogfooded as Kevin's build-don't-buy proof: the Dedalus website and the Agent Machines and Loop dashboards were built with Sigil - agents authored most pages from the token spec and domain skills without manual design review. Source: reticle-ui/README.md, 2026-06-13; User LinkedIn post, 2026-04-30

External validation (2026)

The ecosystem converged on Sigil's two core bets - presets as the swappable identity unit and the agent as the operator - which strengthens the thesis rather than threatening it. Source: User, 2026-06-13

  • shadcn shipped presets. In March-April 2026 shadcn/ui added a preset system: a --preset code packs an entire design-system config (colors, theme, fonts, radius, icon library) into one string, shadcn apply --preset <code> (and --only theme,font) swaps it into an existing project, shadcn/create previews presets live, and the docs explicitly tell you to "drop it in prompts so your agent knows where to start" and "take your preset with you" across Claude, Codex, v0, and Replit. shadcn previously had zero presets and no agent interface; the category king moving to packaged, swappable, agent-aware design config validates the primitive Sigil bet on first. Sigil is the maximalist version of the same idea - 519 tokens across 33 categories driving 350+ token-consuming components, not a theme/font/radius/icon config. Source: shadcn/ui changelog, https://ui.shadcn.com/docs/changelog/2026-03-cli-v4, 2026-06-13; https://ui.shadcn.com/docs/changelog/2026-04-shadcn-apply, 2026-06-13
  • Reference tools prove the demand Sigil reframes. Searchable real-UI libraries like Refero (refero.design) and the broader inspiration-gallery ecosystem exist because people want to give agents design context. Sigil's argument is that context is necessary but not sufficient - the same demand is better served as constraints (tokens + components the agent composes) than as references it can ignore. Refero validates the problem; Sigil answers it differently. Source: User, 2026-06-13; Design Inspiration Galleries

Current Evidence (2026-07-01)

This page was refreshed against Kevin's live GitHub inventory, pinned repositories, PortfolioMon cards, README scrape, and downloaded portfolio screenshots. Treat this section as the current evidence anchor; deeper interpretation stays in the surrounding compiled truth.

PortfolioMon card Types Site Screenshot
#002 Sigil UI Design/Web site Sigil UI
  • PortfolioMon card #002; Design/Web; HP 285, ATK 120, DEF 110, SPD 115; favorite card. Agent-first design system shipping 350+ React components, 46 visual presets, and a single token file that controls color, typography, radius, and motion across an entire app. Built with Tailwind v4, Radix primitives, and Framer Motion.
GitHub repo Visibility Language Stars Last push Homepage
Kevin-Liu-01/Sigil-UI public TypeScript 5 2026-06-16 site

Timeline

Related Pages

LoopAgent MachinesBuild, Don't BuyCSS UI EnforcementShadcn Registry Directory (Top Blocks)Design SystemDesign TokensReticle Design SystemDesign Inspiration GalleriesFrontier Stack 2026Project Inventory Ledger

53 pages link here

Agent Authored UI StyleStyleAgent MachinesProjectsAgent Machines BuildStoriesAgent Machines Build TranscriptStoriesAgent Product SurfaceConceptsAI-Native Design PatternsDesignBackgroundUSERBuild, Don't BuyPhilosophiesBuilding Sigil NightsStoriesCareer GoalsUSERCareer ProfileCareerCompany Call Cheat SheetInterview PrepCompany Evaluation FrameworkInterview PrepConstraints Breed CreativityPhilosophiesConstraints over ContextConceptsContent Plan Archive, April–May 2026CareerCSS View Transitions APIDesignCurrent WorkUSERDedalus Terminal 050525ProjectsDesign EngineeringConceptsDesign Inspiration GalleriesDesignDesign SystemDesignDesign TasteUSERDesign TokensDesignDevouring DetailsToolsIron TriangleProjectsJSON Render -- Generative UI FrameworkToolsKevin LiuPeopleKevin-WikiProjectsLaunch Post PlaybookCareerOpen CoreConceptsOpinionated Templates, Insertion LayersConceptsPlate (PlateJS)ToolsProject Inventory LedgerProjectsProject PortfolioUSERPublic IdentityUSERRadix UIToolsReticle Design SystemDesignRetired Skill Article LedgerMetaRoadrunner Call SheetInterview PrepShadcn Registry Directory (Top Blocks)DesignSigil BuildingUSERSigil Design System BetDecisionsSigil Token ArchitectureDesignSigil Visual DoctorsConceptsSource-Code Registry PatternConceptsStrengthsUSERTaste as a MoatPhilosophiesTaste Enforcement - Anti-Slop Frontend RulesDesignTaste Is the Differentiator (on Shared Primitives)ConceptsTaste Skill Framework (Leonxlnx/taste-skill)ToolsThe Greatness TrapPhilosophiesUser ProfileUSER