A modern React component library with an AI-orchestrated development pipeline. Six specialised LangGraph.js agents collaborate across product ownership, architecture, implementation, accessibility, QA, and documentation — with a consensus loop, live design token validation, and automated GitHub reporting — ensuring every component meets production standards before a line of implementation code is written.
Built on an Nx monorepo with TypeScript, Vitest, Storybook, and fully automated NPM releases.
The most distinctive aspect of Isolate UI is its agentic development workflow. The @isolate-ui/ai-orchestrator package, built with LangGraph.js, coordinates six specialised AI personas through a structured Definition of Ready process before any component implementation begins.
| Persona | Role |
|---|---|
@isolate-po |
Selects Ark UI primitives, maps design tokens, and produces the initial component specification |
@isolate-architect |
Enforces Nx project boundary rules and validates permitted shared utility imports before greenlighting implementation |
@isolate-dev |
Implements TypeScript/React components with Panda CSS, following "The Blueprint" component pattern |
@isolate-a11y |
Audits WAI-ARIA compliance and keyboard navigation, validates WCAG 2.1 Level AA conformance |
@isolate-qa |
Validates Vitest test coverage (minimum 80%), error state recovery, and edge case handling |
@isolate-docs |
Generates Storybook CSF stories and README artifacts documenting all prop interfaces and variants |
The Product Owner, Architect, Developer, and QA personas participate in a Definition of Ready consensus loop before implementation begins:
GitHub Issue
│
▼
@isolate-po ──────────────────────────────────────────────► Spec
│ │
▼ ▼
@isolate-architect ──────────────────────────────────────► Approval
│ │
▼ ▼
@isolate-dev ────────────────────────────────────────────► Implementation
│ │
▼ ▼
@isolate-a11y + @isolate-qa ──► APPROVED / REJECTED: reason │
│ │ │
│ ◄─────────────────────┘ │
│ (loop resets to @isolate-po, max 5 iterations) │
│ ▼
└──────────────────────────────────────────────────► @isolate-docs
│
▼
GitHub comment: Technical Spec Table
+ Edge Case List + Persona Sign-offs
Each persona ends its response with APPROVED or REJECTED: <reason>. A rejection resets the loop to @isolate-po and increments a counter. After 5 consecutive rejections, the orchestrator throws a RefinementIterationLimitError and pauses for human review — a deliberate guardrail that keeps the pipeline from spinning indefinitely on a genuinely ambiguous requirement.
On success, the orchestrator posts a structured comment back to the triggering GitHub issue containing a Technical Spec Table, Edge Case List, and Persona Sign-offs.
Before any agent finalises a specification, design token references are validated in real time via checkTokenExists() — a utility exported from @isolate-ui/utils/ai that checks dot-notation token paths against the live @isolate-ui/tokens registry:
import { checkTokenExists } from '@isolate-ui/utils/ai';
const result = checkTokenExists('color.primary.500');
// { exists: true, value: '#3b82f6', path: 'color.primary.500' }This prevents invalid token references from ever reaching implementation, catching design system drift at the specification stage rather than in review.
For the full API reference, see libs/ai-orchestrator/README.md.
# Install dependencies
pnpm install
# Run tests
pnpm vitest
# Run Storybook (component documentation)
nx storybook react-button
# Build Storybook
nx build-storybook react-button
# Run all tests via Nx
nx run-many -t test -- --run
# Type check
nx run-many -t typecheck
# Lint
nx run-many -t lintComponents are published to NPM under the @isolate-ui scope:
@isolate-ui/button— React Button component
Install in your project:
pnpm add @isolate-ui/buttonComponent documentation is available via Storybook:
- Local: Run
nx storybook react-buttonto view components locally - Preview Deployments: Every PR includes a Vercel preview deployment with Storybook
- Agent Notes: See AGENTS.md for the full agentic workflow reference
libs/
├── ai-orchestrator/ # LangGraph.js multi-agent pipeline
│ └── README.md # Full orchestrator API reference
├── react/
│ └── button/ # React Button component
│ ├── src/
│ ├── vite.config.mts
│ ├── AGENTS.md # Component-specific agent notes
│ └── package.json
└── utils/ # Shared utility functions
├── src/
│ └── lib/
│ └── ai/ # checkTokenExists() and agent helpers
├── vitest.config.mts
├── AGENTS.md # Library-specific agent notes
└── package.json
| Category | Technology |
|---|---|
| Monorepo | Nx 22.5.4 |
| Package Manager | pnpm 10.30.3 |
| Agent Orchestration | LangGraph.js |
| UI Framework | React 19 |
| Language | TypeScript 5.9 |
| Build Tool | Vite 7.x |
| Testing | Vitest 3.2.4 |
| Browser Testing | Playwright 1.58.2 |
| Accessibility | @axe-core/playwright 4.11.1 |
| Documentation | Storybook 8.6.18 |
| Styling | Panda CSS |
| Releases | Nx Release with version plans |
| Commit Linting | Commitlint + Husky |
| Deployment | Vercel (Storybook previews) |
| Registry | NPM with provenance attestations |
pnpm add @isolate-ui/buttonimport { Button } from '@isolate-ui/button';
function App() {
return <Button onClick={() => console.log('clicked')}>Click me</Button>;
}This project enforces Conventional Commits via commitlint and Husky:
# Valid commit formats:
feat(react-button): add new variant
fix(utils): resolve edge case
docs: update README
chore: update dependencies
chore(release): publish react-button v1.0.0 [skip ci]
chore(deps): update dependenciesAllowed scopes: Nx project names (react-button, utils, tokens) are auto-discovered, plus release, deps, and commitlint for cross-cutting concerns. Scope is optional for global changes.
Commits are validated locally via Husky and in CI for all PR commits and PR titles.
This project uses Nx Release with version plans for independent package versioning:
# Create a version plan for your changes
pnpm nx release plan [major|minor|patch]
# Example: plan a patch release
pnpm nx release plan patchThis creates a YAML file in .nx/version-plans/. Commit it with your PR. When merged to main, the release workflow automatically bumps versions, generates changelogs, publishes to NPM with provenance, creates Git tags, and pushes the release commit.
- Node.js 21.7.3 or compatible
- pnpm 10.30.3+
git clone <repo-url>
cd isolate-ui
pnpm install# Run tests
nx test react-button
# Run tests in watch mode
nx test react-button --watch
# Run Storybook
nx storybook react-button
# Build Storybook
nx build-storybook react-button
# Type check
nx typecheck react-button
# Build
nx build react-buttonSee libs/react/button/AGENTS.md for detailed component documentation.
# React component library
nx generate @nx/react:lib <name> \
--directory=libs/react/<name> \
--unitTestRunner=vitest
# TypeScript utility library
nx generate @nx/js:library <name> \
--directory=libs/<name> \
--unitTestRunner=vitest \
--bundler=tsc \
--linter=eslint# All tests (watch mode)
pnpm vitest
# All tests (single run)
pnpm vitest run
# Specific project via Nx
nx test react-button
nx test utils
# All projects with caching
nx run-many -t test -- --run
# Only affected projects
nx affected -t testComponents are tested for WCAG 2.1 Level AA compliance using @axe-core/playwright. The @isolate-a11y agent persona validates accessibility as part of the Definition of Ready pipeline, and component tests run in real browsers (Chromium + WebKit) via Playwright CT.
# Run accessibility component tests
pnpm nx run react-button:component-testSee A11Y_TESTING.md for the full accessibility testing guide.
Every pull request runs:
- ✅ Commit validation — enforces conventional commits format
- ✅ PR title validation — PR titles must follow conventional commits
- ✅ Linting — ESLint checks on affected projects
- ✅ Type checking — TypeScript validation
- ✅ Testing — Vitest tests on affected projects
- ✅ Storybook preview — Vercel deploys a preview with component docs
The release workflow runs automatically when PRs are merged to main:
- Detects version plans in
.nx/version-plans/ - Builds packages before versioning
- Bumps versions based on version plans
- Generates changelogs for each package
- Publishes to NPM with provenance attestations
- Creates Git tags (e.g.
button@1.0.0) - Pushes release commit back to
mainwith[skip ci]
Authentication: GitHub App token for bypassing branch protection, NPM granular access token (90-day rotation), and OIDC for provenance attestations.
Distributed caching is configured with Vercel Remote Cache. Cacheable operations: build, build-storybook, test, lint, typecheck.
| File | Purpose |
|---|---|
| AGENTS.md | Agentic workflow reference and troubleshooting |
| libs/ai-orchestrator/README.md | Full orchestrator API reference |
| nx.json | Nx workspace configuration with release settings |
| tsconfig.base.json | TypeScript base configuration and path mappings |
| vitest.workspace.ts | Vitest workspace configuration |
| commitlint.config.ts | Commit message linting rules |
| vercel.json | Vercel deployment configuration |
| .github/workflows/ci.yml | CI verification workflow |
| .github/workflows/release.yml | Automated release workflow |
Libraries can be imported using path aliases configured in tsconfig.base.json:
import { Button } from '@isolate-ui/button';
import { checkTokenExists } from '@isolate-ui/utils/ai'; // Agent helpers (internal)Note: @isolate-ui/utils is marked private and not published to NPM — internal use only.
# Clear Nx cache
nx reset
# Reinstall dependencies
rm -rf node_modules pnpm-lock.yaml
pnpm install
# View project dependency graph
nx graph
# Check all inferred targets for a project
nx show project <project-name>- Nx Documentation
- Nx Release Documentation
- LangGraph.js Documentation
- Vitest Documentation
- Storybook Documentation
- Panda CSS Documentation
- React Documentation
- pnpm Documentation
- Conventional Commits
- NPM Provenance
- WCAG 2.1 AA Reference
MIT