# humand-design

Design system foundations, visual token reference, and Figma-to-code implementation for Humand UI development. Compatible with Cursor and Claude Code.

## Skills

| Skill | Description |
|-------|-------------|
| `design-system-foundations` | Visual token reference: colors, typography, spacing, border-radius, elevation, and grid. Triggers on any UI/CSS/component work. |
| `implement-figma` | Implements a Figma layer/node URL into code. Routes to the correct stack (React web/admin, React Native, or material-hu) based on the target repo's platform. |
| `humand-voice` | Redacts, audits, and detects UX copy inconsistencies using Humand's official voice and tone manual for microcopy, notifications, emails, states, and end-to-end UI flows. |

## Agents

| Agent | Stack |
|-------|-------|
| `figma-react` | React web/admin apps consuming material-hu (`humand-web`, `humand-backoffice`) |
| `figma-react-native` | React Native mobile apps (`humand-mobile`) — **not yet supported**; the router stops for `platform: mobile` repos until RN rules are filled in |
| `figma-material-hu` | The material-hu design-system package itself (relative imports, no app-level concerns) |

## Token references

| Category | Reference file |
|----------|---------------|
| Colors | `skills/design-system-foundations/references/colors.md` — full palette (15 color families + semantic tokens) |
| Typography | `skills/design-system-foundations/references/typography.md` — Roboto scale, weights 400/600 only |
| Spacing | `skills/design-system-foundations/references/spacing.md` — 8px base system with semantic guide |
| Border radius | `skills/design-system-foundations/references/border-radius.md` — height-based selection (S/M/L) |
| Grid | `skills/design-system-foundations/references/grid.md` — responsive grid tokens |
| Elevation | `skills/design-system-foundations/references/elevation.md` — 3 shadow tokens (4dp, 8dp, Inverted) |

## Voice references

| Category | Reference file |
|----------|---------------|
| Voice rules | `skills/humand-voice/references/voice.md` — writing rules, regionalisms, CTAs, and copy limits |
| Tone by context | `skills/humand-voice/references/tone.md` — context-specific tone with examples |
| UI microcopy | `skills/humand-voice/references/microcopy.md` — component-level guidance and examples |
| State vocabulary | `skills/humand-voice/references/states.md` — operation and user state vocabulary |
| Patterns | `skills/humand-voice/references/patterns.md` — common copy patterns and anti-patterns |
| Emails | `skills/humand-voice/references/emails.md` — email structure and examples |
| Notifications | `skills/humand-voice/references/notifications.md` — push and in-app copy guidance |
| HR glossary | `skills/humand-voice/references/vocabulary.md` — preferred terms and HR glossary |
| Audit checklist | `skills/humand-voice/references/checklist.md` — exhaustive pre-publish checklist |

## How `/implement-figma` resolves the target repo

When you don't pass a target repo explicitly, the router detects it in this order:

1. `git remote get-url origin` → repo name.
2. `basename "$(git rev-parse --show-toplevel)"` → repo name.
3. Prompts you to pick from the UI repos list.

The detected repo name is then resolved using the workspace's `.cursor/repos.json` if present, otherwise a hardcoded fallback list (`humand-web`, `humand-backoffice` → React; `humand-mobile` → React Native; `material-hu` → material-hu). The skill never reads files from sibling plugins, so it works whether or not `humand-tech` is installed.

Backend / translation repos are not routed — the skill stops with a clear message.

## Cross-plugin integration

`humand-tech:start-from-jira-ticket` and `humand-tech:start` will **soft-delegate** to `humand-design:implement-figma` whenever a Jira ticket carries a Figma URL. There is no hard dependency: if `humand-design` isn't installed, those workflows skip the Figma step silently. Backend developers don't need this plugin.

## Installation

### Cursor

Install from the Humand marketplace or add `humand-design` to your project plugins.

### Claude Code

```bash
claude plugin add ./plugins/humand-design
```

Or reference via the marketplace manifest.