# @humain/ui

Reusable React components, design tokens, and Web Component wrappers for
building consistent product interfaces.

## Install

```bash
npm install @humain/ui lucide-react
```

Import the stylesheet once in your application entry point, then import the
components you need:

```tsx
import '@humain/ui/styles.css';
import { Button, ThemeProvider } from '@humain/ui';

export function App() {
  return (
    <ThemeProvider>
      <Button>Continue</Button>
    </ThemeProvider>
  );
}
```

The package also provides `@humain/ui/tokens.css` for tokens only and
`@humain/ui/one.css` for HUMAIN One styling.

## Workflow ownership

Workflow editors and standalone visuals belong to `@humain/workflow`, not UI. Import visual components and their public props/types from `@humain/workflow/primitives`, and load both packages' `styles.css` files. Workflow is React-only; no Web Components. Generic UI Web Components remain supported.

UI 2.8.0 and Workflow 0.1.0 introduce an intentional UI minor-version breaking exception: the six old Workflow React families and their WC/WC-React entrypoints are retired without compatibility re-exports or a replacement WC package. Workflow's UI peer is `^2.8.0`; React 18/19 remain supported. Reference: `/workflow/storybook/?path=/docs/workflow-docs-overview--docs`. Use these coordinated versions together when migrating Workflow integrations.

## Web Components

Web Component wrappers are available for applications that do not use React:

```js
import '@humain/ui/wc/hf-button.js';
import '@humain/ui/styles.css';
```

```html
<hf-button>Continue</hf-button>
```

## HUMAIN UI skills

The skill installer requires Node.js **22.20.0 or newer**. This requirement is
separate from the component library's runtime support.

Install the React skill interactively:

```bash
npx @humain/ui@latest skill
```

The pinned `skills@1.7.2` installer opens its native agent picker, scope wizard,
and confirmation. Use arrow keys to navigate, Space to toggle agents, Enter to
confirm, and typing to search. Choose **Project** (recommended) for the current
project or **Global** for your user. Review selected agents and destinations
before installing. Detection may skip agent selection when only one agent is
found; no agent IDs need to be typed into wrapper prompts.

Install the Web Component skill, or both skills, through the same wizard:

```bash
npx @humain/ui@latest skill --web-components
npx @humain/ui@latest skill --all
```

For non-interactive environments, provide a scope, one or more agents, and
`--yes`:

```bash
npx @humain/ui@latest skill --project --agent codex --yes
```

Repeat `--agent` to target additional supported coding agents. Fully specified
commands retain their completion summary; delegated interactive output owns
its summary, so cancellation does not print a wrapper success message.

### Partial interactive flags

- `skill --global` opens agent selection with global scope fixed.
- `skill --agent codex` opens native scope selection and confirmation.
- `skill --project` without `--agent` is rejected before installation. The pinned
  CLI has no `add --project` flag, so it cannot enforce project scope while
  showing the picker. Run the bare command and choose **Project**, or provide an
  explicit `--agent`.

These rules also apply with `--all` or `--web-components`. Non-TTY and
coding-agent environments require explicit `--yes`, scope, and agent flags,
even with a TTY. This prevents inherited agent markers from bypassing native
confirmation and overwriting existing skill directories.