---
name: humain-ui-wc
description: Use when building browser-native prototypes, iframe artifacts, static HTML, custom-element demos, framework-neutral integrations, or any HUMAIN UI that must use hf-* Web Components instead of React JSX.
---

# Humain Foundation UI Web Components (v2.8.0)

**Identity** - You build HUMAIN interfaces with `hf-*` custom elements. You keep the same product taste, spacing discipline, and component intent as the React `humain-ui` skill, but you only use Web Component APIs that actually exist in the manifest.

This skill is the Web Component projection of `skills/humain-ui`. Use it when the runtime is static HTML, an iframe prototype, or a non-React integration. Use `humain-ui` for React JSX.

Workflow is React-only; no Web Components. Its six legacy `hf-workflow-*` tags and UI WC/WC-React subpaths are retired, with no replacement WC package. Use `@humain/workflow/primitives` in React for Workflow visuals. Generic UI custom elements remain supported.

## Runtime Contract

Use Web Components directly:

```html
<link rel="stylesheet" href="/vendored/humain-wc/styles.css" />
<script type="module" src="/vendored/humain-wc/hf-button.js"></script>
<script type="module" src="/vendored/humain-wc/hf-card.js"></script>
```

Do not import React, ReactDOM, Babel, `HumainUI`, or the React `@humain/ui` entrypoint inside static HTML artifacts. Static hosts may load vendored `hf-*` modules, and package/bundler consumers may import package WC modules such as `@humain/ui/wc/hf-button.js`.

## Required References

Load these references before generating UI:

- [foundations.md](references/foundations.md) for token and runtime rules.
- [components.md](references/components.md) for manifest-backed component availability.
- [composition.md](references/composition.md) for React-to-WC composition rules.
- [incidents.md](references/incidents.md) when fixing a broken prototype or visual drift.

Load recipe files by page type:

| Building | Load |
| --- | --- |
| Dashboard or analytics app | [recipes/dashboard.md](references/recipes/dashboard.md) |
| Marketing, auth, onboarding, or static page | [recipes/pages.md](references/recipes/pages.md) |
| Forms, settings, checkout, wizard | [recipes/forms.md](references/recipes/forms.md) |

## Non-Negotiable Rules

- Use `hf-*` tags from [components.md](references/components.md). Do not invent tags.
- Use only attributes listed for that tag, plus normal global `aria-*`, `data-*`, `class`, `id`, `style`, `role`, `slot`, `part`, and `tabindex` attributes.
- Use semantic tokens or `var(--*)` values. Do not use raw hex colors or `dark:` Tailwind variants in generated artifacts.
- Never use bare native controls where a HUMAIN element exists: use `hf-button`, `hf-input`, `hf-textarea`, `hf-radio-group`, `hf-checkbox-group`, and `hf-switch`. Use `hf-table` for simple static tables and `hf-data-table` for sortable, selectable, or paginated data grids.
- Do not put unstructured headings and paragraphs directly inside `hf-card`. The root has default vertical card padding, but raw body content still needs the approved wrapper for full Card.Content spacing.
- Prefer higher-level padded components such as `hf-app-shell-card`, `hf-metric-card`, `hf-page-header`, and `hf-data-table` before composing raw `hf-card` panels.
- If a React compound slot has no Web Component equivalent, name the limitation and use the approved WC-safe structure from [composition.md](references/composition.md).

## Page Shape Decision

Choose the shape before writing HTML:

| Shape | Use when | WC skeleton |
| --- | --- | --- |
| Standalone page | Marketing, auth, onboarding, error pages | `main.page-shell` with HUMAIN tokens and `hf-button`, `hf-card`, `hf-badge` |
| App shell | Dashboards, product tools, operational apps | `hf-app-shell` plus `hf-app-sidebar` and `hf-app-shell-card` |
| Data panel | Tables, chart panels, reports | `hf-app-shell-card` plus chart/table components |
| Form workflow | Settings, checkout, onboarding, review flows | `hf-card` or `hf-app-shell-card` with explicit WC-safe content wrappers and HUMAIN form elements |

Default to app shell only for authenticated product tools. Static marketing pages should not use dashboard chrome.

## Build Self-Check

- [ ] Every `hf-*` tag appears in [components.md](references/components.md).
- [ ] Every component attribute appears in the manifest-backed attribute list for that tag.
- [ ] No native `button`, `input`, `textarea`, or `select` is used when a HUMAIN WC exists. Simple tables use `hf-table`; interactive data grids use `hf-data-table`.
- [ ] No `hf-card` has direct heading or paragraph body content without the approved content wrapper.
- [ ] First viewport has real product content, not a mostly blank skeleton.
- [ ] Text is readable in light and dark themes using semantic tokens.
- [ ] Runtime imports use host-provided vendored module paths or package-provided WC modules, never React imports.

## Source Of Truth

React components remain the design contract. Web Components, docs, examples, and this skill are downstream projections. If this skill conflicts with `src/wc/manifest.generated.json`, the manifest wins and this skill needs regeneration.