---
name: figma-to-blade
description: Volledige workflow om een Figma-design om te zetten naar een geverifieerd Blade-blok in dit Radicle WordPress project. Haalt context op via Figma MCP, genereert een Blade-template volgens de project-conventies (Tailwind v4 @theme tokens, ACF flex blocks, __() vertaling, currentColor SVG's), en verifieert het resultaat via Playwright MCP op de lokale dev-URL (uit `.env` WP_HOME) met zowel screenshot-vergelijking als computed-style checks. Gebruik deze skill wanneer de gebruiker een Figma-URL aanlevert en die wil omzetten naar een Blade-blok in dit project. Activeer altijd samen met de skills `figma-tailwind-html`, `tailwind-v4` en `acf`.
---
# Figma → Blade workflow
Deze skill orchestreert het omzetten van een Figma-design naar een Blade-blok in dit Radicle WordPress project, en verifieert het resultaat geautomatiseerd. Doel: pixel-perfect Blade-output die binnen tolerance valt vergeleken met het origineel.
## Vereiste skills (altijd parallel laden)
Bij activatie van deze skill **moet** je ook deze skills lezen:
- **`figma-tailwind-html`** — de mapping van Figma-properties (auto-layout, sizing, kleuren, text-tokens, iconen, image-handling) naar Tailwind v4 klassen. Dit is je primaire referentie voor de class-output.
- **`tailwind-v4`** — `@theme`-conventies, 4px-schaal, decimale multipliers, `size-*`, opacity-modifiers `/N`, geen `oklch`, geen `@apply` in templates.
- **`acf`** — ACF field group conventies en `wp acorn make:acf` workflow.
De project-conventies uit [`AGENTS.md`](AGENTS.md) / [`CLAUDE.md`](CLAUDE.md) gelden bovenop deze skills: kebab-case bestandsnamen, PascalCase klassen, `camelCase` PHP-variabelen, `declare(strict_types=1);`, `__()` voor alle gebruikersteksten, `fill="currentColor"` op SVG's, geen `@apply` in templates, na elke PHP-wijziging `./vendor/bin/pint`.
---
## Vaste tooling
- **Figma MCP** (`plugin-figma-figma`):
- `get_design_context` — React+Tailwind referentie + tokens + screenshot van de node
- `get_screenshot` — losse PNG-export van de node
- `get_metadata` — node-tree metadata (gebruik voor exacte `absoluteBoundingBox`, `paddingLeft/Right/Top/Bottom`, `style.fontSize`, `fills`)
- **Playwright MCP** (server `playwright`, geconfigureerd in [`.mcp.json`](.mcp.json), uit `@playwright/mcp@latest` in `--headless` mode):
- `browser_navigate` — naar een URL
- `browser_snapshot` — accessibility snapshot van de pagina (ref-IDs voor elementen)
- `browser_take_screenshot` — screenshot van de hele pagina of één element (via ref / selector)
- `browser_evaluate` — JavaScript uitvoeren (incl. `getComputedStyle`)
- `browser_resize` — viewport-formaat zetten (gebruik vóór screenshots, bv. 1440×900 desktop)
- `browser_close` — sessie sluiten aan het einde
- **Fallback** als de MCP server niet beschikbaar is: de `playwright-cli` skill (`playwright-cli open`, `playwright-cli goto`, `playwright-cli screenshot`, `playwright-cli eval`). De stappen blijven hetzelfde.
### Dev-URL bepalen
De basis-URL voor de Playwright verificatie wordt **altijd dynamisch gelezen** uit [`.env`](.env) — variabele `WP_HOME`. Hardcode nooit een hostname.
```bash
# Lees de dev-URL uit .env (strip quotes als die erom heen staan)
WP_HOME=$(grep -E "^WP_HOME=" .env | sed -E "s/^WP_HOME=//; s/^['\"]//; s/['\"]$//")
echo "$WP_HOME"
```
Bewaar de uitkomst als `$wpHome` voor alle Playwright-stappen. Vraag de gebruiker om correctie als de regel ontbreekt of leeg is.
Zorg daarnaast dat de Vite dev-server (`npm run dev`) draait, anders worden CSS-wijzigingen aan `theme.css` niet opgepikt tijdens iteratie.
---
## Werkfolder voor referenties
Sla alle Figma-screenshots en context-dumps op in [`storage/figma-references/`](storage/figma-references/) (gitignored). Bestandsnaamconventie per blok:
- `{block-name}-figma.png` — screenshot uit Figma MCP (bron-of-truth)
- `{block-name}-context.json` — output van `get_design_context` / `get_metadata` (tokens, dimensies, kleuren)
- `{block-name}-rendered-{iteration}.png` — Playwright screenshot per iteratie (`-1.png`, `-2.png`, `-3.png`)
---
## Stap 1 — Figma context ophalen
1. Parse de Figma-URL: `figma.com/design/{fileKey}/{name}?node-id={nodeIdWithDash}` → vervang `-` door `:` in nodeId.
2. Roep `get_design_context` aan met `fileKey` + `nodeId`. Bewaar:
- Reference code (React+Tailwind) — **niet** letterlijk overnemen, alleen als inzicht
- Design tokens (kleuren als CSS-variabelen, font-stacks)
- Hints (Code Connect-snippets, component-docs, design-annotaties)
- **Asset URLs** voor image-fills (de `imgFrame35 = "https://www.figma.com/api/mcp/asset/..."` constants). Sla iedere URL op tegen de naam van het Figma-element zodat je later in Stap 4 weet welke node welke `` wordt. Deze URLs zijn 7 dagen geldig — download ze in Stap 4 direct naar `resources/images/` (zie "Image-handling").
3. Roep `get_screenshot` aan en sla op als `storage/figma-references/{block-name}-figma.png`.
4. Roep `get_metadata` aan en sla de relevante velden op als `storage/figma-references/{block-name}-context.json`. Verzamel:
- Root `absoluteBoundingBox` (totale breedte / hoogte → bepalend voor `max-w-*`)
- Per child: `layoutMode`, `itemSpacing`, `padding*`, `primaryAxisAlignItems`, `counterAxisAlignItems`, `layoutSizing*`
- Alle unieke `fills[0].color` (hex via `r*255, g*255, b*255` afronding)
- Alle unieke `(fontSize, lineHeightPx, fontWeight)` triples
- Alle unieke `fontFamily`
Als de Figma MCP server een fout teruggeeft over authenticatie, stop en vraag de gebruiker om de plugin opnieuw te koppelen — ga niet verder.
---
## Stap 2 — Intake bij de gebruiker
Stel via **één** `AskQuestion`-bundel deze vragen:
1. **Naam** van het blok in kebab-case (bv. `hero-banner`, `text-image-grid`).
2. **Type**:
- `flex_block` — een ACF flex content layout in `app/Acf/PageContent.php` (wordt geselecteerd in een pagina)
- `section_include` — een los Blade-bestand in `resources/views/blocks/` dat met `@include('blocks.{name}')` in een template komt
- `component` — een Blade component (`resources/views/components/{name}.blade.php`, gebruikt als ``)
3. **Preview-pagina**: welk pad onder `$wpHome` bevat (of gaat bevatten) dit blok voor de verificatiestap (bijv. `/`, `/about`, `/blog/eerste-post`)? Default: `/` (homepage). Bouw de volledige URL pas vlak voor `browser_navigate` als `${wpHome}${path}`.
Bewaar deze keuzes als `$blockName`, `$blockType`, `$previewUrl` voor de rest van de workflow.
---
## Stap 3 — Tokens synchroniseren met `@theme`
Tokens leven in [`resources/css/common/theme.css`](resources/css/common/theme.css) (geïmporteerd door [`resources/css/app.css`](resources/css/app.css)).
### Kleuren
Voor elke unieke hex uit Stap 1:
1. Open [`resources/css/common/theme.css`](resources/css/common/theme.css) en check of het al bestaat onder een semantische naam.
2. Zo niet → voeg toe binnen het bestaande `@theme {}` blok met semantische naam (zie `figma-tailwind-html` skill voor naamgeving: `--color-primary`, `--color-on-primary`, `--color-surface`, `--color-on-surface`, `--color-surface-container`, `--color-muted`, etc.).
3. Hergebruik tokens. Geen dubbele hex onder twee namen.
4. **Geen** opacity-tokens — gebruik `/N` modifier op het base-token (`text-on-surface/60`).
### Typografie
Voor elke unieke `(fontSize, lineHeightPx, fontWeight)` triple:
```css
--text-{size}-{lh}-{weight}: {size}px;
--text-{size}-{lh}-{weight}--line-height: {lh}px;
--text-{size}-{lh}-{weight}--font-weight: {weight};
```
`lineHeightPx` met decimalen (bv. `17.5`) → afronden naar integer in de naam (`text-14-17-400`), exacte waarde behouden in `--line-height`.
### Fontfamilies
- Check `fontFamily` waardes tegen [`resources/css/common/fonts.css`](resources/css/common/fonts.css) en de bestaande `--font-sans` declaratie.
- Nieuwe familie nodig? Voeg `--font-display: 'Naam', ui-sans-serif, sans-serif;` toe en update de Google Fonts `@import` in `fonts.css` met de juiste weights.
### Niet-standaard tokens
Decoratieve blur-blobs (`--blur-blob`), schaduwen die je hergebruikt (`--shadow-card`), aspect-ratios of breakpoints: definieer ze in `@theme` zoals de `tailwind-v4` skill voorschrijft.
---
## Stap 4 — Blade-blok genereren
Volg de **`figma-tailwind-html`** mapping voor de class-output, maar de **HTML-structuur** moet voldoen aan de project-conventies hieronder.
### Algemene regels (uit `AGENTS.md`)
- `.blade.php` extensie
- Inline assignment in `@if`: `@if ($heading = get_sub_field('heading'))`
- **Geen** `@php`-blokken bovenin — logica hoort in een View Composer of inline `@php` direct bij de plek waar het nodig is
- Alle gebruikersteksten via `__('Tekst', 'radicle')`
- Output altijd escapen met `{{ }}`; alleen `{!! !!}` voor bewuste HTML-output (bijv. `the_content`)
- SVG's: `fill="currentColor"` of `stroke="currentColor"`, kleur via Tailwind text-klasse op parent
- Heroicons via `` / `` voor iconen die in de Heroicons-set zitten
- Geen hardcoded `