Claude Code

A plugin that teaches Claude Code the house rules, docs for the installed version, and a checker that catches what slips through.

Most Zynactra UI code is written with Claude Code. Three things keep that code on-system:

Part	What it does	Where it lives
The `zynactra-ui` plugin	A skill that loads for UI work in any app using `@zynactra/ui`: the house rules, which component to use when, setup, patterns, and a verify step	`plugins/zynactra-ui` in zynactra/ui
Docs in the package	Every page of this site as markdown, with the real example code, for the exact version the app installed	`node_modules/@zynactra/ui/docs/`
`zynactra-ui check`	A linter for the rules a reviewer would otherwise have to catch: raw colors, Tailwind's default palette, other UI kits, reshaped components, a second brand button	The package's `zynactra-ui` command

The skill tells Claude to read the installed docs before using a component and to run the checker before it's done.

Turn it on for an app

Commit this to the app's .claude/settings.json. Everyone who opens the repo in Claude Code gets the plugin after they trust the folder:

.claude/settings.json

{
  "extraKnownMarketplaces": {
    "zynactra-ui": {
      "source": { "source": "github", "repo": "zynactra/ui" },
      "autoUpdate": true
    }
  },
  "enabledPlugins": {
    "zynactra-ui@zynactra-ui": true
  }
}

autoUpdate keeps the skill current; Claude Code leaves it off for non-Anthropic marketplaces unless you set it. zynactra/ui is private, so each person needs read access to it on GitHub.

Or just for yourself

In Claude Code:

/plugin marketplace add zynactra/ui
/plugin install zynactra-ui@zynactra-ui

You don't need to mention it. Ask for UI work ("build the employees page", "add a settings screen") in an app that depends on @zynactra/ui and the skill loads. To call it by name, use /zynactra-ui:build-ui. It works for reviews too: "review this PR's UI against the Zynactra rules".

Cloud sessions

Claude Code on the web doesn't load marketplaces declared in a repository's settings, because it never shows the folder-trust prompt. Until that changes, ask Claude there to "read node_modules/@zynactra/ui/docs and run npx zynactra-ui check" for the same result without the skill.

The checker

npx zynactra-ui check              # scans src/, app/, components/, pages/, lib/
npx zynactra-ui check app/billing  # or specific paths
npx zynactra-ui check --strict     # fail on warnings too
npx zynactra-ui docs               # where this version's docs are

Rule	Level	Catches
`default-palette`	error	`bg-blue-500` and the rest of Tailwind's palette, which Zynactra removes, so they render nothing
`raw-color`	error	Hex, `rgb()`, `oklch()` and other literal colors in code and CSS
`arbitrary-color`	error	`bg-[#...]`, `text-[rgb(...)]`
`foreign-ui`	error	Radix, MUI, Chakra, Mantine, Headless UI, Ant and other UI kits
`copied-component`	warning	Imports from `components/ui/`: a copied shadcn component instead of the library
`shadcn-cli`	warning	A shadcn `components.json`, so `shadcn add` copies unthemed code
`base-ui-direct`	warning	Unstyled Base UI primitives used where the library has a component
`shape-override`	warning	`rounded-` or `shadow-` on a component the theme shapes
`theme-blind-shape`	warning	`rounded-full` and arbitrary radii, which ignore the theme
`variant-override`	warning	Color classes on `Button`, `Badge` or `Toggle` instead of a variant
`brand-budget`	warning	More than one brand button in a file
`dark-override`	warning	`dark:` color classes; tokens already switch with the mode
`inline-color`	warning	Colors in `style={{...}}`
`fixed-color`	warning	`text-white`, `bg-black` and the like, which stay the same in every theme and mode
`theme-branch`	warning	Code that checks the theme name
`brand-use`	review	Every brand use, to confirm it's the primary action, progress, focus, the active place or the brand rule

Errors fail the run; warnings fail it with --strict. To keep a deliberate exception, put // zynactra-ui-ignore <rule> on the line or the line above, with the reason.

Add it to the app's CI next to the typecheck:

package.json

{ "scripts": { "lint:ui": "zynactra-ui check" } }

Changing it

The skill is plugins/zynactra-ui/skills/build-ui/ in zynactra/ui; the checker is packages/ui/bin/zynactra-ui.mjs. When a guideline on this site changes, check whether the skill says the same thing. The packaged docs regenerate from this site on every build, so they never need editing by hand.

Turn it on for an app

Or just for yourself

Using it

The checker

Changing it

On this page