Configuration → Components → Audits

ComponentIQ

Design System & Engineering Audit Platform

A token-first design system and component library for product teams — the configuration foundation an automated codebase audit can eventually stand on. Live today: tokens, components, and a runtime theming provider, documented in Storybook and shipped as an npm package.

Open Live Deployment Explore Documentation View Storybook View Package

Problem

Why Design Systems Become Hard To Maintain

The same six failure modes show up on almost every frontend team, in almost every codebase.

Inconsistent components

Teams rebuild UI that already exists because engineers don't know what's already there.

Undocumented standards

Design-system rules live in people's heads, not in anything reviewable or versioned.

Inaccessible implementations

Accessibility gets checked, if at all, after the UI ships — not while it's built.

Architecture drift

Without a shared token contract, every team's "design system" quietly forks.

Manual reviews

PR review catches token and pattern issues too late, and inconsistently.

Inconsistent engineering quality

The same UI decision gets made a different way in every pull request.

How It Works

Today: Configure, Then Build

The real onboarding flow, as documented in Storybook right now.

Next: Import, Then Audit

This workflow does not exist yet. It is the reason the configuration layer above was built first.

1Import repositoryConnect a GitHub repo with scoped, read-only access.
2Configure standardsTurn on the rulesets that matter: tokens, accessibility, architecture, security.
3Analyze projectRun the same ruleset against the codebase, the same way, every time.
4Review findingsSee violations, component coverage, and accessibility/security reports in one place.

Capabilities

Configuration, Analysis, Developer Experience

Configuration

Design Tokens

Available

A three-layer architecture — TypeScript token contract, default values, and a CSS-variable mapping.

Components

Available

Typography, forms, feedback, navigation, DashboardLayout, and an Enhanced Data Table — documented in Storybook.

Theming (ComponentIqProvider)

Available

Wrap once, retheme everywhere — override the full theme or individual tokens per app.

Accessibility Rulesets

Planned

Configurable accessibility standards a project can be audited against.

Architecture Rulesets

Planned

Configurable structural/architecture conventions per project.

Security Rulesets

Planned

Configurable security conventions per project.

Analysis

Findings

Planned

A structured list of what an audit run surfaced.

Rule Violations

Planned

Specific ruleset breaks, tied back to the rule that defines them.

Component Coverage

Planned

How much of a codebase actually uses the shared component library.

Accessibility Reports

Planned

Automated accessibility findings per project.

Security Checks

Planned

Automated security findings per project.

Developer Experience

Storybook

Available

Live component docs, examples, and design-token reference.

npm Package

Available

Install componentiq directly into any React project.

GitHub

Available

Public source for tokens, provider, and components.

Documentation

Available

Quick start, token, and component guides in Storybook.

CLI

Planned

Command-line project setup and audit runs.

CI Integration

Planned

Run analysis automatically on every pull request.

Engineering Decisions

Why It's Built This Way

Every decision here traded something away on purpose.

Configuration before auditing

Available

Problem: You can't meaningfully audit a codebase against standards that don't exist as a versioned contract.
Decision: Ship the token and component layer — and ComponentIqProvider — before building any analysis engine.
Tradeoff: The more attention-grabbing "finds your bugs" feature waits.
Benefit: Every future finding will cite a real, versioned rule instead of a guess.

A three-layer token architecture

Available

Problem: Hardcoded colors and spacing don't retheme, and "design tokens" often means a loose pile of CSS variables no one owns.
Decision: Split tokens into a TypeScript contract, a default-values file, and a CSS-variable mapper.
Tradeoff: Three files to reason about instead of one flat object.
Benefit: Swapping a theme means passing a different tokens object to ComponentIqProvider — zero component changes.

Rules separated from findings

Planned

Problem: Mixing "what's allowed" with "what a specific run found" makes rules impossible to reuse, version, or diff.
Decision: Model rulesets as their own data, independent of any single analysis run.
Tradeoff: More upfront modeling before the first finding ever ships.
Benefit: Rules can be shared across projects and reviewed like code, without re-running an audit.

Scoped, read-only repository access

Planned

Problem: Asking a team to grant broad write access to try an unproven audit tool is a large trust ask.
Decision: Design repository import as read-only and narrowly scoped from day one.
Tradeoff: Automated fixes (auto-opened PRs) need a separate, explicit opt-in later.
Benefit: Lowers the trust barrier so teams can adopt analysis before they adopt automation.

Repeatable over one-off

Planned

Problem: Manual PR review catches issues inconsistently, depending on who's reviewing and how much attention is left.
Decision: The analysis engine runs the same ruleset the same way every time, on every project.
Tradeoff: Rules must be well-specified up front — "I'll know it when I see it" doesn't scale.
Benefit: Results are comparable across PRs, across projects, and over time.

Architecture

System Overview

An overview only — token and provider internals are documented in Storybook; repository and analysis internals don't exist yet.

RepositoryPlanned
read-only import
Configuration EngineAvailable
token contract + ComponentIqProvider
Component LibraryAvailable
Storybook-documented components
Analysis EnginePlanned
not built yet
Rules → Findings → DashboardPlanned
not built yet

Documentation

Start Here

Quick StartInstall, connect tokens, and build your first screen.Design TokensThe three-layer token system and how to override it.DashboardLayoutA full-page shell with a token-driven sidebar — Executive and Playful variants.Enhanced Data TableSortable, searchable tables built on the same token contract.Architecture & SourceRead the actual token, provider, and component source.

Evidence

Shipped, Not Mocked

Real product screens, opened in a new tab — including one honestly labeled local build, never a mockup standing in for something that doesn't exist yet.