---
name: figma-react
description: Implement Figma designs from a figma URL for React web/admin apps using MUI and material-hu consumer conventions. Use when target repo platform is "frontend" (except material-hu repo).
---

# Figma React Skill

**Required first step:** Read `../reference.md` first — it defines scope, MCP usage, and layout fidelity. Everything below is React web/admin only (MUI and material-hu).

This skill implements a Figma layer/node URL in the target repo.

**Invocation:** When run as `/implement-figma`, the main thread parses the URL and resolves the target repo. It then delegates to the `figma-react` subagent with `fileKey`, `nodeId`, `targetRepoPath`, and optional `targetFileOrRoute`.

---

## React-specific implementation rules

### 1. When creating new components (from scratch)

- For typography and visual styling, prefer `sx` on material-hu components (see section 4). For copy during layout-first work, use Figma strings or placeholders as in `../reference.md` — do not wire `t()` unless the user asks.

Example — instead of doing this:

```
<Typography
  variant="globalS"
  fontWeight="fontWeightSemiBold"
  color={theme => theme.palette.new.text.neutral.default}
>
  Sin asignar
</Typography>
```

Do this:

```
<Typography
  variant="globalS"
  sx={{
    fontWeight: 'fontWeightSemiBold',
    color: theme => theme.palette.new.text.neutral.default,
  }}
>
  Sin asignar
</Typography>
```

### 1a. When creating a new page or view

If the implementation adds a **new page/view** (created from scratch), add the HugoTheme provider and wrap it unless the user says otherwise in the prompt.
```tsx
// Imports and rest of code
const HugoThemeProvider = useHuGoTheme();

return (
   <HugoThemeProvider>
      {/* Content */}
   </HugoThemeProvider>
)
```

### 2. Import structure
The design-system components are implemented on the material-hu package, so we should import them from there whenever we can.

These are a few examples:
```
import useHuPagination from '@material-hu/hooks/useHuPagination';
import { IconCheck, IconChevronRight } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import Chip from '@material-hu/components/design-system/Chip';
import Pills from '@material-hu/components/design-system/Pills';
import StateCard from '@material-hu/components/design-system/StateCard';
import Table from '@material-hu/components/design-system/Table';
```

Avoid using prefix on names like `import HuTable from '@material-hu/components/design-system/Table';` unless it's necessary.

### 3. Inputs and Form Inputs

If the component has one or more input fields (text, radio, autocomplete, etc.), ALWAYS use the form variant, `react-hook-form`, and `zod` — regardless of whether the file already has a `<FormProvider>`. No exceptions unless the user explicitly says otherwise.
The form variants can be located via the same import path of the common input by adding to the end `/form`.

Example:

No form:
```
import InputClassic from '@material-hu/components/design-system/Inputs/Classic';
import Title from '@material-hu/components/design-system/Title';

{/* More code */}
<Title
  title={t('LOAN_DETAILS')}
  variant="S"
  sx={{ mt: 3, mb: 0.5 }}
/>
<InputClassic {...props} />
{/* More code */}
```

With Form:
```
import FormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import Title from '@material-hu/components/design-system/Title';

import { useForm, FormProvider } from 'react-hook-form';

<FormProvider {...form}>
  <Title
    title={t('LOAN_DETAILS')}
    variant="S"
    sx={{ mt: 3, mb: 0.5 }}
  />
  <FormInputClassic {...props} />
  {/* More code */}
```

### 4. Styles override

MUI deprecates style-related system props on components. For material-hu components, put style overrides in `sx` instead of top-level `color`, `fontWeight`, etc. Section 1 shows the `Typography` pattern; apply the same idea to other components (buttons, boxes, chips, and so on).

### 5. Color tokens

NEVER hardcode color values (hex, rgb, named colors). ALWAYS use tokens under `theme.palette.new` (e.g. `theme.palette.new.text.neutral.default`, `theme.palette.new.brand[400]`). Avoid legacy palette paths.

### 6. Copy and translations

When implementing a layout from Figma, use the Figma strings as-is. Do **not** wire `t('...')` calls unless the user explicitly asks. If real copy is missing in the design, use a placeholder and note it.
