Drupal Sdc Figma Parity

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 screenshot at matching W x H.
8. Compare and report mismatches by element.
9. Iterate until validated by user.

Project Boundaries

Allowed mutation scope:

• modules/custom/**
• themes/custom/**
• project-specific scripts/docs

Forbidden:

• core/**
• vendor/**
• node_modules/**
• .git/**

References

• references/workflow.md
• references/validation-gates.md
• references/drupal-iru-checks.md

Example Prompt

Use drupal-sdc-figma-parity skill.
Migrate this Figma node to Drupal with pixel parity:
https://figma.com/design/<fileKey>/<fileName>?node-id=<nodeId>

Rules:
- Use direct Figma MCP only (no figma-to-sdc CLI wrappers).
- Post Figma screenshot first.
- Implement in modules/custom/** and themes/custom/** only.
- Capture Drupal screenshot at the same node-derived W x H (100% zoom).
- Compare and list differences, then wait for my validation.