skills.rest
jrmatherly
jrmatherlyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

spaceui-dev

Deliver a shared React design system with Tailwind v4 tokens for Spacebot web interfaces.

Updated Apr 14, 2026
Search Tags:#react#components#bun#tailwind#tokens#design-system#spaceui
One-click install
npx skills add https://github.com/jrmatherly/spacebot --skill spaceui-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spaceui-dev
Source: https://github.com/jrmatherly/spacebot/tree/main/.claude/skills/spaceui-dev
Command: npx skills add https://github.com/jrmatherly/spacebot --skill spaceui-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

SpaceUI provides a single, shareable design system and component library so teams can build consistent, themed React interfaces for Spacebot without reauthoring UI primitives or styles for every project.

Core Features & Use Cases

  • Monorepo component suite: Six in-tree packages (tokens, primitives, forms, ai, explorer, icons) with 40+ UI primitives and AI chat components for building chat UIs, task management panels, and file explorers.
  • CSS-first design tokens & Tailwind v4: Semantic token system, seven themes, and a Tailwind v4 CSS-first workflow that lets consumers apply consistent theming without JS token files.
  • Integration patterns: Bun workspace aliases, Vite and Next.js guidance, React Hook Form + Zod form wrappers, CVA variants, and Storybook docs to streamline local development and consumption.
  • Real-world example: Use the primitives and ai package to compose a task list and chat composer that shows tool_call transcripts, model selector, and task detail workflows in a project dashboard.

Quick Start

Open the repository, run the spaceui showcase locally with bun to preview components and import @spacedrive/primitives into your app for hot-reload development.

Frequently Asked Questions about spaceui-dev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a consistent React design system in a Bun monorepo?▼

A React design system in a Bun monorepo uses shared component packages with Tailwind v4 CSS-first tokens to standardize UI primitives. SpaceUI provides six in-tree packages delivering 40+ primitives for consistent themed interfaces without reauthoring styles.

How does Tailwind v4 CSS-first theming work for React components?▼

Tailwind v4 CSS-first theming applies semantic token systems directly in CSS rather than JS token files. SpaceUI uses this workflow to provide seven themes, letting consumers apply consistent theming across React 18 and 19 components without managing JavaScript style configurations.

How do I integrate React Hook Form and Zod in a component library?▼

React Hook Form and Zod integrate in a component library through pre-built form wrappers that handle validation schemas. SpaceUI includes these wrappers to streamline local development and consumption within its monorepo component suite.

Can I use SpaceUI components with Vite and Next.js?▼

SpaceUI components work with Vite and Next.js through provided integration patterns and Bun workspace aliases. The component library supports hot-reload development for React 18 and 19 interfaces across both frameworks.

What is the best way to document React component variants in a monorepo?▼

Documenting React component variants in a monorepo is best done using Storybook and CVA. SpaceUI leverages Storybook-driven component documentation and CVA variants to streamline local development and showcase UI primitives.

How do I compose an AI chat UI with tool call transcripts in React?▼

Composing an AI chat UI with tool call transcripts in React involves using specialized AI component packages. SpaceUI provides an ai package with chat components, model selectors, and task detail workflows to build chat interfaces for project dashboards.

Related Skills

Explore More Software Engineering Skills→
mpsuessermpsuesser

setup-new-monorepo

Set up a bun workspaces monorepo with Effect v4, dprint, oxlint, and lefthook.

Community
Intermediate
HikkywannaflyHikkywannafly
1

shadcn-ui

Guide developers in implementing and customizing shadcn/ui components in React and Next.js projects.

Community
Intermediate
hopeoverturehopeoverture
6

form-generator-rhf-zod

Generate React forms with React Hook Form, Zod validation, and shadcn/ui controls.

Community
Advanced
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate