Wallarm Design System
A comprehensive design system and component library built with React, TypeScript, and modern web technologies. This monorepo includes a UI component library with Storybook documentation and a playground application for testing and demonstration.
🚀 Quick Start
Install Dependencies
pnpm install
Development
# Start all applications
pnpm dev
# Start Storybook
pnpm storybook
Claude Code and Codex
Both clients share CLAUDE.md, .claude/skills, specialist roles and hooks.
AGENTS.md files are relative links to the corresponding CLAUDE.md.
pnpm install generates .codex/config.toml from the canonical .mcp.json;
run pnpm agents:sync after changing MCP servers, then restart Codex.
Run pnpm test:harness to check the adapter and shared PR hook.
See agent harness for configuration, hook trust and Figma access.
Build
# Build all packages and applications
pnpm build
# Build specific package
pnpm build --filter=@wallarm-org/design-system
Testing
# Run all tests
pnpm test
# E2E testing
pnpm e2e
# E2E testing special component
pnpm e2e -- packages/design-system/src/components/Example/Example.e2e.ts
# E2E in Docker (cross-platform)
pnpm e2e:docker
# E2E in Docker special component
pnpm e2e:docker -- packages/design-system/src/components/Example/Example.e2e.ts
# E2E in Docker update screenshots
pnpm e2e:docker:update
# E2E in Docker update screenshots for special component
pnpm e2e:docker:update -- packages/design-system/src/components/Example/Example.e2e.ts
📁 Project Structure
design-system/
├── apps/
│ ├── playground/ # Playground application (Rsbuild + React)
│ └── website/ # Documentation site (Rspress)
├── packages/
│ ├── design-system/ # Core design system library
│ ├── claude-design/ # Claude Design export
│ ├── gen-ui/ # Generative UI catalog (A2UI, json-render)
│ ├── mcp/ # MCP server for AI assistants
│ ├── mcp-core/ # Shared MCP metadata types and schemas
│ ├── migrator/ # Migration CLI for consumer upgrades
│ └── configs/ # Shared configurations
│ ├── biome-config/ # Biome lint/format configuration
│ ├── playwright-config/ # Playwright test configuration
│ ├── publishing/ # Shared semantic-release configuration
│ ├── rsbuild-config/ # Rsbuild bundler configuration
│ ├── tailwind-config/ # Tailwind CSS configuration
│ ├── typescript-config/ # TypeScript configuration
│ └── rstest-config/ # Rstest test configuration
├── .github/ # GitHub configuration
│ ├── workflows/ # CI/CD pipelines
│ └── PULL_REQUEST_TEMPLATE.md
├── scripts/ # Build and automation scripts
└── .claude/ # AI agents and automation
Applications and Packages
Apps:
@wallarm-org/playground - Playground application for testing and demonstrating components (Rsbuild + React + TypeScript)@wallarm-org/website - Documentation site, built with Rspress and deployed to GitHub Pages with Storybook
Packages:
@wallarm-org/design-system - Core design system library with React components and Storybook documentation@wallarm-org/mcp - MCP server that gives AI assistants component metadata, props, variants, and design tokens@wallarm-org/mcp-core - Shared types and Zod schemas for MCP metadata (bundled into @wallarm-org/mcp, not published)@wallarm-org/migrator - Codemod CLI that migrates consumer apps across design-system breaking changes@wallarm-org/gen-ui - Generative UI catalog: one definition per component, rendered from A2UI, json-render and OpenUI (experimental)@wallarm-org/claude-design - Builds the Claude Design export and installs it from one prompt (npx -y @wallarm-org/claude-design@latest export); published by deploy-site.yml at each stable release@wallarm-org/biome-config - Shared Biome lint/format configuration@wallarm-org/publish-scripts - Shared semantic-release configuration@wallarm-org/typescript-config - Shared TypeScript configurations@wallarm-org/playwright-config - Shared Playwright test configurations@wallarm-org/rstest-config - Shared Rstest test configurations@wallarm-org/rsbuild-config - Shared Rsbuild bundler configurations@wallarm-org/tailwind-config - Shared Tailwind CSS configurations
🛠 Tech Stack
Frontend
- React 19 - UI library
- TypeScript - Type safety with strict mode
- Rsbuild - Modern build tool based on Rspack
- Tailwind CSS v4 - Utility-first CSS framework
- Ark UI - Headless component primitives
- DnD Kit for drag and drop behavior
- TanStack Table for table layouts
- TanStack Virtual for virtualization
Development
- Turborepo - High-performance monorepo build system
- pnpm - Fast, disk space efficient package manager
- Storybook v10 - Component documentation and development
- Rstest - Rspack-based unit testing framework
- Playwright - Cross-browser E2E testing
- Biome - Linting and formatting
- Husky - Git hooks for code quality
- Figma Code Connect - Design-to-code synchronization
CI/CD
- GitHub Actions - Automated CI/CD pipelines
- Docker -
Dockerfiles and docker-compose.local.yml for manual/local use (not built or published by CI)
- GitHub Pages - Static hosting for the docs site and Storybook
🤖 AI Automation
Specialized agents and slash-command skills are described in CLAUDE.md → Agent System.
Commit triggers
# Update screenshots via commit
git commit -m "fix: button styles [update-screenshots]"
# Skip E2E tests via commit
git commit -m "docs: update readme [skip-e2e]"
This is the beginning of the README. Read the rest at the original. Read the full README ↗
