---
name: implement-figma
description: Use when given a Figma URL to implement — extracts layout, components, and structure from the design into code. Routes to the correct stack subagent (React web/admin, React Native, or material-hu) based on the target repo's platform.
---

# /implement-figma Router

Routes Figma implementation to the correct stack-specific subagent.

## Inputs

- Figma URL (required)
- Target repo path or target repo name (optional — auto-detected from the calling repo when omitted)
- Optional target file or route

## Repo Detection

Determine the repo name in this order:

1. **Explicit repo name** — if the caller passed a bare repo name (e.g. `humand-web`), use it directly.
2. **Path-based via git remote** — if the caller passed a `targetRepoPath` (including a worktree like `humand-web--SQRN-1234-foo`), `cd` into it and run `git remote get-url origin`. Strip `.git`, take the last path segment. This works for both the main checkout and any worktree.
3. **Path basename** — fallback if git remote is unavailable: `basename "$(git rev-parse --show-toplevel)"`. Strip any `--<suffix>` worktree convention before matching.
4. **Current working directory** — if no `targetRepoPath` was passed, run steps 2–3 in `$PWD`.
5. **User prompt** — if none of the above resolves to a known repo, ask the user to pick from the UI repos list.

## Routing

1. Parse Figma URL into `fileKey` and `nodeId` (convert `-` to `:` in `nodeId`).
2. Resolve the **target repo name** (explicit input, or via the detection chain above).
3. Determine subagent type. Use **workspace-local config first**, then a **hardcoded fallback** — never reach into a sibling plugin's directory:
   - **Primary:** if the workspace has `.cursor/repos.json`, read `repos.<repoName>` from it (`platform` field).
   - **Fallback:** use the hardcoded name list below (covers all current Humand UI repos).
4. Mapping rules (apply identically whether the platform comes from `repos.json` or the fallback list):
   - **`material-hu`** → `figma-material-hu` (design-system package; do not use `figma-react` or `figma-react-native`).
   - **`humand-web` / `humand-backoffice`** (or `platform: frontend` in `repos.json`) → `figma-react`.
   - **`humand-mobile`** (or `platform: mobile` in `repos.json`) → **stop**. React Native Figma implementation is **not yet supported** — the `figma-react-native` subskill rules are still pending. Tell the user explicitly and do not delegate. (Lift this gate once `react-native/SKILL.md` is filled in.)
   - **Otherwise** (backend, translation, infra, unknown repo): do not guess. Tell the user Figma implementation is only routed for the design-system package or frontend apps, and stop.
5. Invoke the selected subagent (`mcp_task` or platform-equivalent task tool) and pass:
   - `fileKey`
   - `nodeId`
   - `targetRepoPath` (resolve to absolute path of the repo or worktree)
   - optional `targetFileOrRoute`
6. Show the returned summary and file list.

## Rules

- Do not call Figma MCP tools in the main thread.
- All Figma MCP operations must run inside the selected subagent.
- The subagent reads `reference.md` (stack-agnostic) and the matching stack subskill (`react/`, `material-hu/`, or `react-native/`) before implementing.

## Next skill

After the subagent returns its summary and file list, offer the next step based on the user's workflow:

- **Engineering workflow** (`humand-tech` available): offer `humand-tech:commit` to commit the layout changes.
- **Sandbox workflow — full design from scratch** (`humand-frontend-sandbox` available, starting a new project): offer `humand-frontend-sandbox:plan-project`.
- **Sandbox workflow — specific feature** (`humand-frontend-sandbox` available, implementing a feature): offer `humand-frontend-sandbox:refine-feature` to extract components and props, followed by `humand-frontend-sandbox:build-feature` to build the screens.
- **Otherwise**: stay silent — no install hint, no fallback. The user knows their own workflow.

**Skip the offer entirely** when invoked from `humand-tech:start` or `humand-tech:start-from-jira-ticket` — those flows continue with their own implementation steps and orchestrate commits themselves.
