Connect

Onsystem

dgestevesbydgesteves
•
19
•
Developer Tools
Design Tools
Security & Testing

Enforce design system compliance in React codebases by catching hardcoded colors, invalid variants, missing props, and native elements during AI generation and CI.

Onsystem acts as an intelligent guardrail for AI coding agents and developers, ensuring code adheres strictly to a project's React design system. By analyzing component sources, TypeScript definitions, style tokens, and variant definitions (such as CVA and Tailwind Variants), it automatically flags inconsistencies—like off-palette colors, arbitrary spacing, unregistered variants, and native HTML tags where custom components exist. With integrations spanning Claude Code, Cursor, VS Code, ESLint, and CI workflows via GitHub Actions, Onsystem provides immediate actionable fixes during file edits and pull request reviews, keeping monorepos and design-system-driven projects clean and consistent.

Key Features

01Enforcement of tokenized colors, arbitrary spacing, border radiuses, and accessibility names
0221 GitHub stars
03Static design token and component validation using the TypeScript compiler
04Detection of unknown components, props, invalid variants, and native element overrides
05Deep AI coding agent integrations across Claude Code, Cursor, Windsurf, Codex, and VS Code
06Comprehensive CI and monorepo support with baseline snapshots and GitHub Actions

Use Cases

01Migrating legacy codebases incrementally by establishing baseline snapshots for existing styling violations
02Preventing AI coding agents like Claude Code or Cursor from hallucinating components, variants, or hardcoded hex colors
03Automating design system and accessibility checks across monorepo applications in CI/CD pull requests