---
name: unity-setup-feature-plugin
description: >
  Wire Unity into a feature plugin in the hr-apps monorepo. Run the
  setup-unity nx generator (installs packages, configures TailwindCSS 4,
  sets up TS types, adds providers). Provider order at app root: IntlProvider
  → I18nProvider (react-aria-components) → UnityIconsProvider. Import
  @payfit/unity-themes/css/unity.css once. Merge @payfit/unity-components/i18n
  JSON into the IntlProvider messages, keyed by locale.
type: lifecycle
library: '@payfit/unity-components'
library_version: '2.x'
sources:
  - 'PayFit/hr-apps:libs/shared/unity/components/src/docs/tutorials/Getting Started.mdx'
  - 'PayFit/hr-apps:libs/shared/unity/icons/src/components/icons-provider/UnityIconsProvider.tsx'
  - 'PayFit/hr-apps:libs/shared/unity/themes/docs/files/MIGRATION-v1.md'
  - 'PayFit/hr-apps:libs/shared/unity/components/i18n/'
---

Bootstrap Unity for a feature plugin once. After this skill completes you
can import any export from `@payfit/unity-components` without further
wiring.

## If in hr-apps, use this generator

```bash
pnpm nx g @payfit/nx-tools:setup-unity \
  --project=<YOUR_PROJECT> \
  --withIcons --withIllustrations
```

The generator installs `@payfit/unity-components`, `@payfit/unity-themes`,
`@payfit/unity-icons`, and (with `--withIllustrations`)
`@payfit/unity-illustrations` from the workspace catalog; wires the
TailwindCSS 4 plugin with the Unity theme preset; adds the
`@payfit/unity-themes` reference to the project `tsconfig`; and
mounts the providers in the correct order at the project entry. Do not
hand-edit those files afterwards — re-run the generator.

Companion generators:

```bash
# Component dev sandbox
pnpm nx g @payfit/nx-tools:sandbox

# Storybook for the project
pnpm nx g @payfit/nx-tools:storybook
```

## Setup (manual fallback)

Use only when the generator cannot run (e.g. setting up a sample app
outside the monorepo).

All details in guide: libs/shared/unity/components/src/docs/tutorials/Getting Started.mdx