← ClaudeAtlas

drupal-sdc-figma-paritylisted

Drupal SDC Figma-to-code pixel-parity workflow using direct Figma MCP tools, with screenshot-gated validation and node-specific capture dimensions.
Taison472/codex-skills · ★ 1 · AI & Automation · score 71
Install: claude install-skill Taison472/codex-skills
# Drupal SDC Figma Parity Use this skill for any request that asks to match a Figma node/frame in Drupal with pixel parity. ## Core Rules 1. Use direct Figma MCP tools only: - `get_design_context` - `get_screenshot` - `get_metadata` (only when context is too large) - `get_variable_defs` (when token/value confirmation is needed) 2. Do not use CLI wrapper flows like `/figma-to-sdc`. 3. Visual source of truth is browser-visible Figma output. 4. Screenshot gate is mandatory: - Post Figma screenshot first. - Implement. - Post Drupal screenshot. - Compare and list differences. - Wait for user validation before next cycle. ## Capture and Comparison Sizing (Locked) 1. Global default zoom is always `100%`. 2. Do not use hardcoded default viewport sizes. 3. Capture size is node-specific: - Read `W x H` from the target Figma node screenshot. - Capture Drupal at the same `W x H`. 4. If target element is part of a larger page: - Capture full page as needed. - Crop to the target region that matches node geometry. 5. User can explicitly override size rules; otherwise node size is authoritative. ## Required Flow 1. Parse `fileKey` and `nodeId` from the Figma URL. 2. Fetch design context for exact target node. 3. Fetch screenshot for exact target node/state. 4. Determine comparison `W x H` from the Figma screenshot dimensions. 5. Implement in allowed project scope only. 6. Build/cache refresh only when required by changed files. 7. Capture Drupal