Agent skill

Extend Variables

by elementor in elementor/elementor

External: Register global design-token variable types from a third-party plugin.

GPL-3.0Auto-check passedFrontend & Design

Install Extend Variables

skills CLI
$ npx skills add elementor/elementor --skill extend-variables -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install elementor/elementor extend-variables --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/elementor/elementor.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/extend-variables .claude/skills/extend-variables && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
extend-variables
GitHub stars
7.1k
Token cost
~1.6k tokens
SKILL.md length
445 words
Files
1
Skills in repo
8
Repo updated
First seen
Licence
GPL-3.0

At a glance

External: Register global design-token variable types from a third-party plugin.

  • Works in 6 steps: PHP variable type — typically extends… → Style schema union (required for style… → PHP render transformer —… → …
  • Tasks that involve Design tokens
  • SKILL.md covers Implementation location, Prerequisites, Checklist and Size gap (important), plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Extend Variables is an agent skill from elementor/elementor. External: Register global design-token variable types from a third-party plugin. elementor/variables/register, registerVariableType JS, style schema, transformers.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Design tokens. It works with PHP. The repository describes itself as: The most advanced frontend drag & drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design. The licence is GPL-3.0.

When your agent uses it

  • Tasks that involve Design tokens

Example prompts

  • “/extend-variables”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. PHP variable type — typically extends String_Prop_Type (or other Transformable_Prop_Type) with stable get_key()
  2. Style schema union (required for style binding) — filter elementor/atomic-widgets/styles/schema so target style keys accept the new…
  3. PHP render transformer — elementor/atomic-widgets/styles/transformers/register if frontend must resolve stored id → var(--label). Reuse…
  4. JS editor type (required for "Add Variable" UI) — registerVariableType with key, icon, propTypeUtil, fallbackPropTypeUtil, variableType…
  5. Storage adapter — extend Adapters\Prop_Type_Adapter if value encoding is non-standard.
  6. Verify on active kit — REST elementor/v1/variables/* and MCP elementor/manage-global-variable confirm types already registered; they do…

What it can do on your machine

Read from SKILL.md and the folder at commit dd32c13. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are php).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Extend Variables loads about 1.6k tokens when it runs. Until then it costs about 45 tokens; SKILL.md has 445 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~45
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from elementor/elementor at commit dd32c13, republished under its GPL-3.0 licence (© elementor). 445 words, ~1,559 tokens.

Download SKILL.mdSave it as .claude/skills/extend-variables/SKILL.md (or your agent's skills folder).
name
extend-variables
description
External: Register global design-token variable types from a third-party plugin. elementor/variables/register, registerVariableType JS, style schema, transformers.

Extend variables

Scope: External — the full documented custom-variable outcome is shippable from a 3rd-party plugin via elementor/variables/register + style-schema/transformer hooks + your own package init(); no Core changes required. Modifying Elementor's built-in size types or their Pro gating is outside this skill and requires Core/Pro changes. Full split + disclaimer: skills-scope.md.

Implementation location

  • PHP: third-party plugin repo; variable prop types, transformers, elementor/variables/register (e.g. My\Shadow_Variable_Prop_Type).
  • Editor JS: registerVariableType in your editor package init() — see add-editor-package.
  • Do not modify Elementor Core. Core registry: modules/variables/; editor package: packages/packages/core/editor-variables/.
  • Runnable reference: examples/example-plugin/ (global-shadow-variable PHP + JS + box-shadow schema union).

Prerequisites

  • e_atomic_elements — variables module loads with atomic widgets.
  • e_variables / e_variables_manager — variables manager UI; REST may work without the manager UI — variables/overview.md.
  • Register elementor/variables/register before WordPress init (hook fires on init).

Read first: variables/types.md, variables/api.md, fundamentals/prop-types.md, usage-in-props.md.

Checklist

  1. PHP variable type — typically extends String_Prop_Type (or other Transformable_Prop_Type) with stable get_key():
php
class Shadow_Variable_Prop_Type extends String_Prop_Type {
    public static function get_key(): string {
        return 'global-shadow-variable';
    }
}

add_action( 'elementor/variables/register', function (
    \Elementor\Modules\Variables\Classes\Variable_Types_Registry $registry
) {
    $registry->register( Shadow_Variable_Prop_Type::get_key(), Shadow_Variable_Prop_Type::make() );
} );
  1. Style schema union (required for style binding) — filter elementor/atomic-widgets/styles/schema so target style keys accept the new $$type. Mirror built-in patterns in Core Style_Schema / Size_Style_Schema. Example for box-shadow:
php
add_filter( 'elementor/atomic-widgets/styles/schema', function ( array $schema ) {
    if ( isset( $schema['box-shadow'] ) ) {
        $schema['box-shadow'] = Union_Prop_Type::create_from( $schema['box-shadow'] )
            ->add_prop_type( Shadow_Variable_Prop_Type::make() );
    }
    return $schema;
} );

If $schema[ $key ] is already a Union_Prop_Type (e.g. padding, margin, gap in Style_Schema), call ->add_prop_type() on it; do not wrap with Union_Prop_Type::create_from() — mirror Style_Schema::update_font_family().

  1. PHP render transformer — elementor/atomic-widgets/styles/transformers/register if frontend must resolve stored id → var(--label). Reuse \Elementor\Modules\Variables\Transformers\Global_Variable_Transformer (Core shares one instance for color/font); subclass only when resolution differs. PropValues store id; CSS uses label — see api.md and usage-in-props.md. Label rules: max 50 chars, no spaces.
  2. JS editor type (required for "Add Variable" UI) — registerVariableType with key, icon, propTypeUtil, fallbackPropTypeUtil, variableType, plus defaultValue / valueField / styleTransformer as needed. Call from your editor v2 package init() (not core register-variable-types.tsx). Example: docs/atomic-builder/examples/extend-variables.md.
    • Skip JS → PHP-only type works via REST / MCP / CSS but never appears in the Add Variable dropdown.
    • Hand-built bundle: call init() yourself; registerVariableType via window.elementorV2.editorVariables; createPropUtils via window.elementorV2.editorProps.createPropUtils (not an import) — see add-editor-package.
  3. Storage adapter — extend Adapters\Prop_Type_Adapter if value encoding is non-standard.
  4. Verify on active kit — REST elementor/v1/variables/* and MCP elementor/manage-global-variable confirm types already registered; they do not define new types.
Show full SKILL.md (113 more words)Show less

Size gap (important)

PHP Style_Transformers registers Global_Variable_Transformer for color and font only. Size has no matching PHP styles transformer. Built-in size types in JS use EmptyTransformer; editor canvas uses StyleVariablesRenderer. New types needing var(--label) on canvas should pass explicit styleTransformer in registerVariableType.

Built-in keys: global-color-variable, global-font-variable, global-size-variable, global-custom-size-variable.

"(Pro)" on size is not only a PHP gate: free Core JS registers size keys with isActive: false + upsell CTA; Pro re-registers as active. Details: variables/types.md.

External implementation path

  • Plugin hooks elementor/variables/register + style schema + transformers + editor registerVariableType.
  • Optional CSS: filter elementor/variables/css_entry_additional.

Core reference paths (do not edit)

  • modules/variables/classes/variable-types-registry.php, hooks.php, prop-types/*-variable-prop-type.php.
  • Editor: packages/packages/core/editor-variables/.

See also

© elementor, GPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .cursor/skills/extend-variables of elementor/elementor.

Open the folder on GitHubat commit dd32c13

Compare with similar skills

Extend Variables next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Extend Variables compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Extend Variables this skillelementor/elementor7.1k—~1.6kAutomated safety check: PassGPL-3.0
MCP Developmentcoollabsio/coolify63k1 repos~949Automated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
Tailwindcss Developmentanonaddy/anonaddy4.9k10 repos~865Automated safety check: PassMIT
Figma use_figma Plugin API Ruleswarpdotdev/warp65k4 repos~4.4kAutomated safety check: PassAGPL-3.0
Design SystemOhh-889/skyroc79511 repos~1.7kAutomated safety check: PassMIT

Similar skills

  • MCP Development

    coollabsio/coolify

    A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.

    63k GitHub starsUsed in 1 repo~949 tokens
    Frontend & DesignAuto-check passed
  • Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed
  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed
  • Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.

    65k GitHub starsUsed in 4 repos~4.4k tokens
    Frontend & DesignAuto-check passed
  • Design System

    Ohh-889/skyroc

    Token architecture, component specifications, and slide generation.

    795 GitHub starsUsed in 11 repos~1.7k tokens
    Frontend & DesignAuto-check passed
  • Design Dna

    zanwei/design-dna

    Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…

    1.9k GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed

More from elementor/elementor

All 8 skills in this repo
  • Add Dynamic Tag

    elementor/elementor

    External: Add dynamic tags for v4 atomic widgets from a third-party plugin.

    7.1k GitHub stars~1.2k tokensUpdated today
    Auto-check passed
  • Add Editor Package

    elementor/elementor

    External: Add an Editor V2 package from a third-party plugin that injects UI or in-editor MCP tools.

    7.1k GitHub stars~1.7k tokensUpdated today
    Auto-check passed
  • Atomic Builder Extend

    elementor/elementor

    Pick the right Elementor v4 skill. An agent skill from elementor/elementor.

    7.1k GitHub stars~1.6k tokensUpdated today
    Auto-check passed
  • Create Atomic Widget

    elementor/elementor

    External: Create atomic widgets and container elements from a third-party plugin.

    7.1k GitHub stars~1.3k tokensUpdated today
    Auto-check passed
  • Extend Prop Types

    elementor/elementor

    External: Add or extend a prop type from a third-party plugin.

    7.1k GitHub stars~1.7k tokensUpdated today
    Auto-check passed
  • Internal: Extend the atomic CSS converter in a Core fork and submit a Core PR.

    7.1k GitHub stars~1.2k tokensUpdated today
    Auto-check passed

Works with

Questions about Extend Variables

What does Extend Variables do?

External: Register global design-token variable types from a third-party plugin. Extend Variables is an agent skill from elementor/elementor. External: Register global design-token variable types from a third-party plugin.

When should I use Extend Variables?

Extend Variables fits situations like: tasks that involve Design tokens.

How do I install Extend Variables in Claude Code?

Run `npx skills add elementor/elementor --skill extend-variables -a claude-code`. Or copy the skill folder (.cursor/skills/extend-variables in elementor/elementor) into .claude/skills/extend-variables in your project. Claude Code loads it when a task matches its description.

How do I install Extend Variables in Codex?

Run `npx skills add elementor/elementor --skill extend-variables -a codex`. Or copy the skill folder (.cursor/skills/extend-variables in elementor/elementor) into .agents/skills/extend-variables in your project. Codex loads it when a task matches its description.

Can I use Extend Variables in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add elementor/elementor --skill extend-variables -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/extend-variables, .gemini/skills/extend-variables, .github/skills/extend-variables and .opencode/skills/extend-variables in your project.

What does Extend Variables need to run?

SKILL.md names no scripts, command-line tools or credentials: Extend Variables is instructions for the agent only.

Does Extend Variables access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Extend Variables safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Extend Variables use?

Extend Variables is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Extend Variables use?

About 1.6k tokens (SKILL.md is roughly 6.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Extend Variables?

Skills that share tags, products or a category with Extend Variables: MCP Development (coollabsio/coolify, 63k stars), Figma Design System Builder (warpdotdev/warp, 65k stars), Tailwindcss Development (anonaddy/anonaddy, 4.9k stars) and Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Extend Variables?

elementor (a GitHub organization) maintains it in elementor/elementor, which has 7,084 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on October 8, 2026.

Source: elementor/elementor on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.