drupal-sdc-figma-parity

Stars2

Forks1

UpdatedFebruary 23, 2026 at 18:54

Drupal SDC Figma-to-code pixel-parity workflow using direct Figma MCP tools, with screenshot-gated validation and node-specific capture dimensions.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

olegiv

olegiv/codex-skills

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

4 files

SKILL.md

readonly

name	drupal-sdc-figma-parity
description	Drupal SDC Figma-to-code pixel-parity workflow using direct Figma MCP tools, with screenshot-gated validation and node-specific capture dimensions.

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

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)
Do not use CLI wrapper flows like /figma-to-sdc.
Visual source of truth is browser-visible Figma output.
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)

Global default zoom is always 100%.
Do not use hardcoded default viewport sizes.
Capture size is node-specific:
- Read W x H from the target Figma node screenshot.
- Capture Drupal at the same W x H.
If target element is part of a larger page:
- Capture full page as needed.
- Crop to the target region that matches node geometry.
User can explicitly override size rules; otherwise node size is authoritative.

Required Flow

Parse fileKey and nodeId from the Figma URL.
Fetch design context for exact target node.
Fetch screenshot for exact target node/state.
Determine comparison W x H from the Figma screenshot dimensions.
Implement in allowed project scope only.
Build/cache refresh only when required by changed files.
Capture Drupal screenshot at matching W x H.
Compare and report mismatches by element.
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.

More from this repository

same repository

claude-codex-dual-pass

olegiv/codex-skills

Use when the user asks Codex to run a Claude Code command and then independently perform the same workflow itself, especially `cc /slash-command`, "run Claude Code command", "Claude edits allowed", "full permissions", "then Codex do the same", "dual pass", or "/finalize".

2026-04-262

commit-workflow

olegiv/codex-skills

Prepare and execute safe two-step Git commits in Codex by drafting a commit message, requesting explicit user approval, and only then committing. Use when the user asks to prepare a commit message, perform a commit, or run a two-step commit workflow. Do not use Claude slash commands or Claude CLI for this workflow.

2026-02-232

php-prebuild-quality

olegiv/codex-skills

Run Drupal 11 pre-build quality gates with dual-source validation (lint, PHPCS, PHPStan, PhpStorm CLI inspections, PHPUnit) in strict, changed-file, module-scoped, theme-scoped, or explicit-path modes.

2026-02-232

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

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)

Do not use CLI wrapper flows like /figma-to-sdc.

Visual source of truth is browser-visible Figma output.

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)

Global default zoom is always 100%.

Do not use hardcoded default viewport sizes.

Capture size is node-specific:

Read W x H from the target Figma node screenshot.
Capture Drupal at the same W x H.

If target element is part of a larger page:

Capture full page as needed.
Crop to the target region that matches node geometry.

User can explicitly override size rules; otherwise node size is authoritative.

Required Flow

Parse fileKey and nodeId from the Figma URL.

Fetch design context for exact target node.

Fetch screenshot for exact target node/state.

Determine comparison W x H from the Figma screenshot dimensions.

Implement in allowed project scope only.

Build/cache refresh only when required by changed files.

Capture Drupal screenshot at matching W x H.

Compare and report mismatches by element.

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.