# Humand React

Plugin for **Cursor** and **Claude Code** with conventions, workflows, commands and skills for the **Humand Backoffice** React SPA.

Lives in the [hu-ai-agent-plugin](https://github.com/Humand/hu-ai-agent-plugin) marketplace. The folders `rules/`, `commands/`, `skills/` and `templates/` are the source of truth — edit them in this repo and open PRs here.

## Installation

### From the Humand marketplace (Cursor and Claude Code)

Configure the marketplace in your editor so the plugin is available, then enable `humand-react`:

- **Cursor:** Add the hu-ai-agent-plugin marketplace (e.g. from this repo) and enable the plugin in Cursor settings.
- **Claude Code:** Add the marketplace and install the plugin, e.g.:
  ```bash
  /plugin marketplace add <source-to-hu-ai-agent-plugin>
  /plugin install humand-react@<marketplace-name>
  ```

### Per-project (Backoffice)

In the `humand-backoffice` repo, add to `.claude/settings.json` (or equivalent) so the team gets the marketplace and plugin automatically:

```json
{
  "extraKnownMarketplaces": {
    "humand-plugins": {
      "source": { "source": "github", "repo": "Humand/hu-ai-agent-plugin" }
    }
  },
  "enabledPlugins": {
    "humand-react@humand-plugins": true
  }
}
```

### Local development (no install)

- **Claude Code:** `claude --plugin-dir /path/to/hu-ai-agent-plugin/plugins/humand-react`
- **Cursor:** Use the plugin from the marketplace or point Cursor at the plugin directory per your setup.

## Slash commands

Invoke with the plugin prefix (e.g. `humand-react:<name>` in Claude Code):

| Command | Purpose |
|--------|---------|
| `setup-cursor` | Copy rules, templates and config into the project’s `.cursor/` |
| `create-pr` | Generate PR title and body to copy/paste |
| `create-pr-gh` | Create the PR on GitHub via `gh` CLI |
| `generate-module-readme` | Generate the `README.md` for a dashboard module |

## Agent skills

The agent invokes these when context matches:

| Skill | When it runs |
|-------|----------------|
| `refine-jira-ticket` | User pastes a Jira ticket or asks to refine it |
| `implement-jira-ticket` | User says “implementar”, “vamos con el punto N” |
| `refactor-to-conventions` | User asks to refactor or clean up code |
| `refactor-form-to-conventions` | User asks to refactor a form |
| `split-module-services-or-types` | `services.ts` or `types.ts` &gt; 300 lines |
| `migrate-drawer-to-drawer-layer` | User asks to migrate a drawer to DrawerLayer |

## Structure

```
humand-react/
├── .cursor-plugin/
│   └── plugin.json
├── .claude-plugin/
│   └── plugin.json
├── commands/
├── skills/
├── rules/           # Cursor .mdc rules — copied by setup-cursor
├── templates/       # Copied by setup-cursor
└── workflow-config.json
```

### Cursor integration

Cursor uses rules from `.cursor/rules/` in the project. Use the `setup-cursor` command to copy rules and templates from this plugin into the backoffice repo’s `.cursor/`. Commit `.cursor/` so the team gets updates on `git pull`. To refresh after plugin changes: update the marketplace and run `setup-cursor` again.

## Stack (Backoffice)

React 18 · TypeScript 5 · Vite 6 · React Query v3 · react-hook-form 7 · Zod · MUI + material-hu · date-fns · Biome