Agent skill

Codegen Transform

by Comfy-Org in Comfy-Org/ComfyUI_frontend

Transforms raw Playwright codegen output into ComfyUI convention-compliant tests.

GPL-3.0Auto-check passedDevelopment

Install Codegen Transform

skills CLI
$ npx skills add Comfy-Org/ComfyUI_frontend --skill codegen-transform -a claude-code

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

GitHub CLI
$ gh skill install Comfy-Org/ComfyUI_frontend codegen-transform --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/Comfy-Org/ComfyUI_frontend.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/codegen-transform .claude/skills/codegen-transform && 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
codegen-transform
GitHub stars
2.1k
Token cost
~2k tokens
SKILL.md length
541 words
Files
1
Skills in repo
22
Repo updated
First seen
Licence
GPL-3.0

At a glance

Transforms raw Playwright codegen output into ComfyUI convention-compliant tests.

  • Works in 6 steps: Never use waitForTimeout → use… → Never use page.goto → fixture handles… → Never import from @playwright/test → use… → …
  • : user pastes raw codegen
  • SKILL.md covers When to Use, Reference Documentation, Transform Rules and Canvas Coordinates → Node…, plus 3 more sections
  • Calls pnpm and npx

What it does

Codegen Transform is an agent skill from Comfy-Org/ComfyUI_frontend. Transforms raw Playwright codegen output into ComfyUI convention-compliant tests. Use when: user pastes raw codegen, asks to convert raw Playwright code, refactor recorded tests, or rewrite to project conventions. Triggers on: transform codegen, convert raw test, rewrite to conventions, codegen output, raw playwright.

Its SKILL.md is about 2k 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 Development, covering Project scaffolding, Browser testing and Diffusion and image models. It works with Playwright and ComfyUI. The repository describes itself as: Official front-end implementation of ComfyUI. The licence is GPL-3.0.

When your agent uses it

  • : user pastes raw codegen
  • Asks to convert raw Playwright code
  • Refactor recorded tests
  • Rewrite to project conventions

Example prompts

  • “Use the codegen-transform skill to transform raw Playwright codegen output into ComfyUI convention-compliant tests”
  • “/codegen-transform”

Requirements

  • Node.js

Workflow steps

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

  1. Never use waitForTimeout → use nextFrame() or retrying assertions
  2. Never use page.goto → fixture handles navigation
  3. Never import from @playwright/test → use @e2e/fixtures/ComfyPage
  4. Never use bare CSS selectors → use test IDs or semantic locators
  5. Never share state between tests → each test is independent
  6. Never commit local screenshots → Linux CI generates baselines

What it can do on your machine

Read from SKILL.md and the folder at commit 850d562. 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

    Shell commands in SKILL.md call:

    • pnpm
    • npx

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

  • Network

    No URLs in SKILL.md. Its commands use pnpm and npx, which can reach the network depending on how they are called.

    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

Codegen Transform loads about 2k tokens when it runs. Until then it costs about 84 tokens; SKILL.md has 541 words of instructions outside code blocks.

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

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 Comfy-Org/ComfyUI_frontend at commit 850d562, republished under its GPL-3.0 licence (© Comfy-Org). 541 words, ~1,965 tokens.

Download SKILL.mdSave it as .claude/skills/codegen-transform/SKILL.md (or your agent's skills folder).
name
codegen-transform
description
Transforms raw Playwright codegen output into ComfyUI convention-compliant tests. Use when: user pastes raw codegen, asks to convert raw Playwright code, refactor recorded tests, or rewrite to project conventions. Triggers on: transform codegen, convert raw test, rewrite to conventions, codegen output, raw playwright.

Codegen → Convention Transform

Transform raw Playwright codegen output into tests that follow ComfyUI conventions.

When to Use

  • QA tester recorded a test with pnpm comfy-test record and wants refinement
  • Developer pasted raw npx playwright codegen output
  • Agent needs to post-process Playwright test agent output
  • Reviewing a test that uses raw page.* calls instead of fixture helpers

Reference Documentation

Before transforming, read these existing docs for full context:

DocumentWhat it covers
docs/guidance/playwright.mdPlaywright conventions, type assertions, assertion best practices, tags
browser_tests/AGENTS.mdDirectory structure, polling assertions, gotchas, quality checks
browser_tests/fixtures/ComfyPage.tsMain fixture API (source of truth for all helpers)
browser_tests/fixtures/helpers/Focused helper classes (canvas, keyboard, workflow, etc.)

Transform Rules

The programmatic transform engine lives in tools/test-recorder/src/transform/rules.ts. Apply these replacements in order:

Raw codegenConvention replacementWhy
import { test, expect } from '@playwright/test'import { comfyPageFixture as test, comfyExpect as expect } from '@e2e/fixtures/ComfyPage'Use custom fixtures with ComfyUI helpers
test('test', async ({ page }) =>test('descriptive-name', async ({ comfyPage }) =>Use comfyPage fixture, descriptive names
await page.goto('http://...')Remove entirelyFixture handles navigation automatically
page.locator('canvas')comfyPage.canvasPre-configured canvas locator
page.waitForTimeout(N)comfyPage.nextFrame()Never use arbitrary waits
page.getByPlaceholder('Search Nodes...')comfyPage.searchBox.inputUse search box page object
page (bare reference)comfyPage.pageAccess raw page through fixture
Bare test(...)test.describe('Feature', { tag: ['<scenario tag>'] }, () => { test(...) })All tests need describe + tags
No cleanupAdd test.afterEach(async ({ comfyPage }) => { await comfyPage.canvasOps.resetView() })Canvas tests need cleanup

Canvas Coordinates → Node References

Raw codegen records fragile pixel coordinates. Replace with node references when possible:

typescript
// ❌ Raw codegen — fragile pixel coordinates
await page.locator('canvas').click({ position: { x: 423, y: 267 } })

// ✅ If clicking a specific node
const node = (await comfyPage.nodeOps.getNodeRefsByType('KSampler'))[0]
await node.click('title')

// ✅ If double-clicking canvas to open search
await comfyPage.canvas.dblclick({ position: { x: 500, y: 400 } })
await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')

When to keep coordinates: Canvas background clicks (pan, zoom), empty area clicks to deselect. These are inherently position-based.

Show full SKILL.md (292 more words)Show less

Decision Guide

QuestionAnswer
Canvas or DOM interaction?Canvas: comfyPage.nodeOps.*. Vue node DOM: comfyPage.vueNodes.* with @vue-nodes
Need nextFrame()?Yes after canvas mutations. No after loadWorkflow(), no after DOM clicks
Which tag?Always add @vue-nodes when the test needs Vue Nodes, alongside scenario tags such as @canvas, @widget, or @screenshot
Starting settings?Prefer test.use({ initialSettings }) at the narrowest file or describe scope instead of setSetting in beforeEach
Need cleanup?Yes for canvas tests (resetView). No settings resets: the fixture replaces settings with a baseline before each test
Keep pixel coords?Only for empty canvas clicks. Replace with node refs for node interactions
Use page directly?Only via comfyPage.page for Playwright APIs not wrapped by fixtures

The @vue-nodes tag enables the renderer before boot and makes the fixture wait for nodes. Never manually set Comfy.VueNodes.Enabled, including through initialSettings, or call comfyPage.vueNodes.waitForNodes() in tests. For tests of renderer switching, use the menu or command helpers described in the Vue Nodes guide.

Nested test.use calls replace the parent's initialSettings object, so include all overrides needed by the nested scope. Keep runtime setSetting calls only when a live change or persistence is the behavior under test. See starting settings and isolation for baseline and manual-boot rules.

Anti-Patterns

  1. Never use waitForTimeout → use nextFrame() or retrying assertions
  2. Never use page.goto → fixture handles navigation
  3. Never import from @playwright/test → use @e2e/fixtures/ComfyPage
  4. Never use bare CSS selectors → use test IDs or semantic locators
  5. Never share state between tests → each test is independent
  6. Never commit local screenshots → Linux CI generates baselines

For Deeper Reference

Read fixture code directly — it's the source of truth:

PurposePath
Main fixturebrowser_tests/fixtures/ComfyPage.ts
Helper classesbrowser_tests/fixtures/helpers/
Component objectsbrowser_tests/fixtures/components/
Test selectorsbrowser_tests/fixtures/selectors.ts
Vue Node helpersbrowser_tests/fixtures/VueNodeHelpers.ts
Existing testsbrowser_tests/tests/
Test assetsbrowser_tests/assets/

© Comfy-Org, 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 .claude/skills/codegen-transform of Comfy-Org/ComfyUI_frontend.

Open the folder on GitHubat commit 850d562

Compare with similar skills

Codegen Transform 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.

Codegen Transform compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Codegen Transform this skillComfy-Org/ComfyUI_frontend2.1k—~2kAutomated safety check: PassGPL-3.0
Desktopgridaco/grida2.7k—~3.2kAutomated safety check: NotesApache-2.0
UI Regression Recorderxuxh21/ui-regression-recorder-skill112—~4.4kAutomated safety check: PassNone
Doctest Conventionspadamson/playwright-rust152—~749Automated safety check: PassApache-2.0
Learn Lab Coachdebs-obrien/playwright-movies-app102—~487Automated safety check: NotesMIT
Movies Playwrightdebs-obrien/playwright-movies-app102—~686Automated safety check: PassMIT

Similar skills

  • Desktop

    gridaco/grida

    Grida Desktop Electron shell and release-impact work: BrowserWindow, preload, window.grida, menus, protocol/deep links, file associations, Forge, path-scoped bridge security, Electron-only UI bugs…

    2.7k GitHub stars~3.2k tokensUpdated yesterday
    Testing & QAAuto-check: notes
  • UI Regression Recorder

    xuxh21/ui-regression-recorder-skill

    A skill your agent uses when the user says to initialize the current project for UI regression, record an operation, convert Playwright codegen recordings into stable tests, extract shared helpers…

    112 GitHub stars~4.4k tokensUpdated 4 mo ago
    Testing & QAAuto-check passed
  • Doctest Conventions

    padamson/playwright-rust

    Conventions for authoring rustdoc doctests in playwright-rust — the norun annotation, module-level placement, hidden scaffolding lines, and how doctests are exercised in CI vs pre-commit.

    152 GitHub stars~749 tokensUpdated 3 days ago
    Testing & QAAuto-check passed
  • Learn Lab Coach

    debs-obrien/playwright-movies-app

    Coach a learner through the learn/ Playwright Movies curriculum.

    102 GitHub stars~487 tokensUpdated 6 days ago
    Testing & QAAuto-check: notes
  • Movies Playwright

    debs-obrien/playwright-movies-app

    Write, edit, generate, or heal Playwright tests in the playwright-movies-app repo.

    102 GitHub stars~686 tokensUpdated 6 days ago
    Testing & QAAuto-check passed
  • Discover UI Surface

    ZhixiangLuo/10xProductivity

    Walk through a UI flow once manually and capture a durable interaction map — which DOM elements to click, which network requests they trigger, and what field shapes they expose.

    478 GitHub stars~296 tokensUpdated 2 mo ago
    Productivity & AutomationAuto-check passed

More from Comfy-Org/ComfyUI_frontend

All 22 skills in this repo
  • Adding Deprecation Warnings

    Comfy-Org/ComfyUI_frontend

    Adds deprecation warnings for renamed or removed properties/APIs.

    2.1k GitHub stars~775 tokensUpdated today
    Auto-check passed
  • Agent Integration Replay

    Comfy-Org/ComfyUI_frontend

    Replay recorded agent conversations as Playwright tests against the real chat panel and canvas.

    2.1k GitHub stars~805 tokensUpdated today
    Auto-check: notes
  • Comment Sicko

    Comfy-Org/ComfyUI_frontend

    Dispatches the comment-sicko subagent to hunt gratuitous comments in a PR/diff, triages its raw findings, and posts a polite, professional writeup.

    2.1k GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Hardening Flaky E2E Tests

    Comfy-Org/ComfyUI_frontend

    Diagnoses and fixes flaky Playwright e2e tests by replacing race-prone patterns with retry-safe alternatives.

    2.1k GitHub stars~2.8k tokensUpdated today
    Auto-check passed
  • Perf Fix With Proof

    Comfy-Org/ComfyUI_frontend

    Ships performance fixes with CI-proven improvement using stacked PRs.

    2.1k GitHub stars~1.6k tokensUpdated today
    Auto-check passed
  • Publishing A New Package

    Comfy-Org/ComfyUI_frontend

    Publishes a new package from this monorepo to npm under @comfyorg and proves it is consumable from another repo.

    2.1k GitHub stars~1.8k tokensUpdated today
    Auto-check passed

Questions about Codegen Transform

What does Codegen Transform do?

Transforms raw Playwright codegen output into ComfyUI convention-compliant tests. Codegen Transform is an agent skill from Comfy-Org/ComfyUI_frontend. Transforms raw Playwright codegen output into ComfyUI convention-compliant tests.

When should I use Codegen Transform?

Codegen Transform fits situations like: : user pastes raw codegen; asks to convert raw Playwright code; refactor recorded tests; rewrite to project conventions.

How do I install Codegen Transform in Claude Code?

Run `npx skills add Comfy-Org/ComfyUI_frontend --skill codegen-transform -a claude-code`. Or copy the skill folder (.claude/skills/codegen-transform in Comfy-Org/ComfyUI_frontend) into .claude/skills/codegen-transform in your project. Claude Code loads it when a task matches its description.

How do I install Codegen Transform in Codex?

Run `npx skills add Comfy-Org/ComfyUI_frontend --skill codegen-transform -a codex`. Or copy the skill folder (.claude/skills/codegen-transform in Comfy-Org/ComfyUI_frontend) into .agents/skills/codegen-transform in your project. Codex loads it when a task matches its description.

Can I use Codegen Transform 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 Comfy-Org/ComfyUI_frontend --skill codegen-transform -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/codegen-transform, .gemini/skills/codegen-transform, .github/skills/codegen-transform and .opencode/skills/codegen-transform in your project.

What does Codegen Transform need to run?

Going by SKILL.md and its folder, Codegen Transform needs the command-line tools its instructions call (pnpm and npx). Our summary lists: Node.js.

Does Codegen Transform access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Codegen Transform 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 Codegen Transform use?

Codegen Transform 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 Codegen Transform use?

About 2k tokens (SKILL.md is roughly 7.9k 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 Codegen Transform?

Skills that share tags, products or a category with Codegen Transform: Desktop (gridaco/grida, 2.7k stars), UI Regression Recorder (xuxh21/ui-regression-recorder-skill, 112 stars), Doctest Conventions (padamson/playwright-rust, 152 stars) and Learn Lab Coach (debs-obrien/playwright-movies-app, 102 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Codegen Transform?

Comfy-Org (a GitHub organization) maintains it in Comfy-Org/ComfyUI_frontend, which has 2,054 GitHub stars. The repository holds 22 skills in this directory. The repository was last updated on October 7, 2026.

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