# Zaidan

Install and configure the Zaidan component registry in an existing SolidJS codebase...

- Repository: https://github.com/nightly-labs/openbot (4509 stars)
- Category: Engineering
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add nightly-labs/openbot --skill zaidan -g -a claude-code -y`
Codex: `npx skills add nightly-labs/openbot --skill zaidan -g -a codex -y`
Cursor: `npx skills add nightly-labs/openbot --skill zaidan -g -a cursor -y`
Gemini CLI: `npx skills add nightly-labs/openbot --skill zaidan -g -a gemini-cli -y`

## Description

Install and configure the Zaidan component registry in an existing SolidJS codebase, and recommend Zaidan components for a product or interaction need. Use when setting up Zaidan, adding Zaidan components, fixing consumer-side registry configuration, or deciding which Zaidan components to compose for a SolidJS interface.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Zaidan

Use this skill for consumer-side work in a SolidJS application. Treat Zaidan as
a source-code registry: configure the project, select suitable components, add
them with the registry CLI, and verify the resulting SolidJS code.

Use `shadcn-to-zaidan` instead when the task is to import, sync, transform, or
maintain a shadcn-style React component inside the Zaidan registry.

## Load References

- Read `references/installation.md` before installing, configuring, adding, or
  troubleshooting Zaidan in a project.
- Read `references/component-selection.md` when recommending components or
  deciding how to compose a requested interface.

## What the Registry Holds

One `@zaidan` registry serves several kinds of item. Knowing which kind a name
is tells you what the CLI will write.

| Kind | Names | What lands in the project |
| --- | --- | --- |
| Components | `button`, `dialog`, `sidebar`, … | Source files under the `ui` alias |
| Blocks | `sortable`, `image-crop`, `message-scroller`, `questionnaire`, and the chart examples (`chart-bar-default`, `chart-line-interactive`, …) | Larger compositions plus the components they use |
| Hook | `use-mobile` | Source file under the `hooks` alias |
| Shared component | `color-mode` | Source file under the `components` alias |
| Styles | `style-vega`, `style-nova`, `style-maia`, `style-lyra`, `style-mira`, `style-luma`, `style-sera`, `style-rhea` | `styles/base.css` and `styles/utilities.css`, plus their imports |
| Base colors and themes | `neutral`, `stone`, `zinc`, `gray`, `mauve`, `olive`, `mist`, `taupe`; `blue`, `green`, … | Light and dark CSS variables |
| Chart palettes | `chart-blue`, `chart-neutral`, … | `chart-1` … `chart-5` only |
| Radius | `radius-none`, `radius-small`, `radius-medium`, `radius-large` | `--radius` |
| Fonts | `font-inter`, `font-geist-mono`, … | The face, wired to `--font-sans`, `--font-serif`, or `--font-mono` |
| Typeset | `typeset` | `styles/typeset.css` and its import |

The rest: https://github.com/nightly-labs/openbot/blob/HEAD/.agents/skills/zaidan/SKILL.md