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…
Transforms raw Playwright codegen output into ComfyUI convention-compliant tests.
$ npx skills add Comfy-Org/ComfyUI_frontend --skill codegen-transform -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Comfy-Org/ComfyUI_frontend codegen-transform --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "codegen-transform" agent skill from https://github.com/Comfy-Org/ComfyUI_frontend/tree/main/.claude/skills/codegen-transform into .claude/skills/codegen-transform/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codegen-transform", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Comfy-Org/ComfyUI_frontend/tree/main/.claude/skills/codegen-transformType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Comfy-Org/ComfyUI_frontend --skill codegen-transform -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Comfy-Org/ComfyUI_frontend codegen-transform --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Comfy-Org/ComfyUI_frontend.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/codegen-transform .agents/skills/codegen-transform && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "codegen-transform" agent skill from https://github.com/Comfy-Org/ComfyUI_frontend/tree/main/.claude/skills/codegen-transform into .agents/skills/codegen-transform/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codegen-transform", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Comfy-Org/ComfyUI_frontend --skill codegen-transform -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Comfy-Org/ComfyUI_frontend codegen-transform --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Comfy-Org/ComfyUI_frontend.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/codegen-transform .cursor/skills/codegen-transform && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "codegen-transform" agent skill from https://github.com/Comfy-Org/ComfyUI_frontend/tree/main/.claude/skills/codegen-transform into .cursor/skills/codegen-transform/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codegen-transform", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Comfy-Org/ComfyUI_frontend.git --path .claude/skills/codegen-transform--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Comfy-Org/ComfyUI_frontend --skill codegen-transform -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Comfy-Org/ComfyUI_frontend codegen-transform --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Comfy-Org/ComfyUI_frontend.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/codegen-transform .gemini/skills/codegen-transform && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "codegen-transform" agent skill from https://github.com/Comfy-Org/ComfyUI_frontend/tree/main/.claude/skills/codegen-transform into .gemini/skills/codegen-transform/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codegen-transform", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Comfy-Org/ComfyUI_frontend codegen-transformInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Comfy-Org/ComfyUI_frontend --skill codegen-transform -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Comfy-Org/ComfyUI_frontend.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/codegen-transform .github/skills/codegen-transform && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "codegen-transform" agent skill from https://github.com/Comfy-Org/ComfyUI_frontend/tree/main/.claude/skills/codegen-transform into .github/skills/codegen-transform/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codegen-transform", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Comfy-Org/ComfyUI_frontend --skill codegen-transform -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Comfy-Org/ComfyUI_frontend codegen-transform --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Comfy-Org/ComfyUI_frontend.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/codegen-transform .opencode/skills/codegen-transform && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "codegen-transform" agent skill from https://github.com/Comfy-Org/ComfyUI_frontend/tree/main/.claude/skills/codegen-transform into .opencode/skills/codegen-transform/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codegen-transform", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
codegen-transformTransforms 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. 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.
6 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 850d562. It shows what the files ask for, not the result of running them.
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.
Shell commands in SKILL.md call:
pnpmnpxFrom the folder's file list and the shell code blocks in SKILL.md.
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.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
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.
.claude/skills/codegen-transform/SKILL.md (or your agent's skills folder).Transform raw Playwright codegen output into tests that follow ComfyUI conventions.
pnpm comfy-test record and wants refinementnpx playwright codegen outputpage.* calls instead of fixture helpersBefore transforming, read these existing docs for full context:
| Document | What it covers |
|---|---|
docs/guidance/playwright.md | Playwright conventions, type assertions, assertion best practices, tags |
browser_tests/AGENTS.md | Directory structure, polling assertions, gotchas, quality checks |
browser_tests/fixtures/ComfyPage.ts | Main fixture API (source of truth for all helpers) |
browser_tests/fixtures/helpers/ | Focused helper classes (canvas, keyboard, workflow, etc.) |
The programmatic transform engine lives in tools/test-recorder/src/transform/rules.ts. Apply these replacements in order:
| Raw codegen | Convention replacement | Why |
|---|---|---|
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 entirely | Fixture handles navigation automatically |
page.locator('canvas') | comfyPage.canvas | Pre-configured canvas locator |
page.waitForTimeout(N) | comfyPage.nextFrame() | Never use arbitrary waits |
page.getByPlaceholder('Search Nodes...') | comfyPage.searchBox.input | Use search box page object |
page (bare reference) | comfyPage.page | Access raw page through fixture |
Bare test(...) | test.describe('Feature', { tag: ['<scenario tag>'] }, () => { test(...) }) | All tests need describe + tags |
| No cleanup | Add test.afterEach(async ({ comfyPage }) => { await comfyPage.canvasOps.resetView() }) | Canvas tests need cleanup |
Raw codegen records fragile pixel coordinates. Replace with node references when possible:
// ❌ 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.
| Question | Answer |
|---|---|
| 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.
waitForTimeout → use nextFrame() or retrying assertionspage.goto → fixture handles navigation@playwright/test → use @e2e/fixtures/ComfyPageRead fixture code directly — it's the source of truth:
| Purpose | Path |
|---|---|
| Main fixture | browser_tests/fixtures/ComfyPage.ts |
| Helper classes | browser_tests/fixtures/helpers/ |
| Component objects | browser_tests/fixtures/components/ |
| Test selectors | browser_tests/fixtures/selectors.ts |
| Vue Node helpers | browser_tests/fixtures/VueNodeHelpers.ts |
| Existing tests | browser_tests/tests/ |
| Test assets | browser_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
Just SKILL.md in .claude/skills/codegen-transform of Comfy-Org/ComfyUI_frontend.
Open the folder on GitHubat commit 850d562
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Codegen Transform this skillComfy-Org/ComfyUI_frontend | 2.1k | — | ~2k | Automated safety check: Pass | GPL-3.0 | |
| Desktopgridaco/grida | 2.7k | — | ~3.2k | Automated safety check: Notes | Apache-2.0 | |
| UI Regression Recorderxuxh21/ui-regression-recorder-skill | 112 | — | ~4.4k | Automated safety check: Pass | None | |
| Doctest Conventionspadamson/playwright-rust | 152 | — | ~749 | Automated safety check: Pass | Apache-2.0 | |
| Learn Lab Coachdebs-obrien/playwright-movies-app | 102 | — | ~487 | Automated safety check: Notes | MIT | |
| Movies Playwrightdebs-obrien/playwright-movies-app | 102 | — | ~686 | Automated safety check: Pass | MIT |
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…
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…
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.
debs-obrien/playwright-movies-app
Coach a learner through the learn/ Playwright Movies curriculum.
debs-obrien/playwright-movies-app
Write, edit, generate, or heal Playwright tests in the playwright-movies-app repo.
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.
Comfy-Org/ComfyUI_frontend
Adds deprecation warnings for renamed or removed properties/APIs.
Comfy-Org/ComfyUI_frontend
Replay recorded agent conversations as Playwright tests against the real chat panel and canvas.
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.
Comfy-Org/ComfyUI_frontend
Diagnoses and fixes flaky Playwright e2e tests by replacing race-prone patterns with retry-safe alternatives.
Comfy-Org/ComfyUI_frontend
Ships performance fixes with CI-proven improvement using stacked PRs.
Comfy-Org/ComfyUI_frontend
Publishes a new package from this monorepo to npm under @comfyorg and proves it is consumable from another repo.
Works with
Categories
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.
Codegen Transform fits situations like: : user pastes raw codegen; asks to convert raw Playwright code; refactor recorded tests; rewrite to project conventions.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.