drupal-sdc-figma-parity

Estrelas2

Forks1

Atualizado23 de fevereiro de 2026 às 18:54

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

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Fonte

olegiv

olegiv/codex-skills

Abrir repositório GitHub Ver repositórios do creator

Download

Ocupações relacionadasSOC

Baseado na classificação ocupacional SOC

Desenvolvedores webInformática e Matemática·SOC 15-1254

Explorador de arquivos

4 arquivos

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.

Mais deste repositório

mesmo repositório

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.