Agent skill

Webui Code

A skill your agent uses when generating or reviewing WebUI code.

BSD-3-ClauseAuto-check passedFrontend & Design

Install Webui Code

skills CLI

$ npx skills add nwjs/chromium.src --skill webui-code -a claude-code

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

GitHub CLI

$ gh skill install nwjs/chromium.src webui-code --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/nwjs/chromium.src.git skills-src && mkdir -p .claude/skills && cp -r skills-src/agents/projects/chrome-design-system/skills/webui-code .claude/skills/webui-code && 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/

Paste into Claude Code

Install the "webui-code" agent skill from https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/webui-code into .claude/skills/webui-code/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "webui-code", 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

$skill-installer install https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/webui-code

Type 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.

skills CLI

$ npx skills add nwjs/chromium.src --skill webui-code -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install nwjs/chromium.src webui-code --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/nwjs/chromium.src.git skills-src && mkdir -p .agents/skills && cp -r skills-src/agents/projects/chrome-design-system/skills/webui-code .agents/skills/webui-code && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "webui-code" agent skill from https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/webui-code into .agents/skills/webui-code/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "webui-code", 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.

skills CLI

$ npx skills add nwjs/chromium.src --skill webui-code -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install nwjs/chromium.src webui-code --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/nwjs/chromium.src.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/agents/projects/chrome-design-system/skills/webui-code .cursor/skills/webui-code && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "webui-code" agent skill from https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/webui-code into .cursor/skills/webui-code/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "webui-code", 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

$ gemini skills install https://github.com/nwjs/chromium.src.git --path agents/projects/chrome-design-system/skills/webui-code

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add nwjs/chromium.src --skill webui-code -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install nwjs/chromium.src webui-code --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/nwjs/chromium.src.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/agents/projects/chrome-design-system/skills/webui-code .gemini/skills/webui-code && rm -rf skills-src

Use ~/.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/

Paste into Gemini CLI

Install the "webui-code" agent skill from https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/webui-code into .gemini/skills/webui-code/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "webui-code", 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.

GitHub CLI

$ gh skill install nwjs/chromium.src webui-code

Installs 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).

skills CLI

$ npx skills add nwjs/chromium.src --skill webui-code -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/nwjs/chromium.src.git skills-src && mkdir -p .github/skills && cp -r skills-src/agents/projects/chrome-design-system/skills/webui-code .github/skills/webui-code && rm -rf skills-src

Use ~/.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/

Paste into GitHub Copilot

Install the "webui-code" agent skill from https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/webui-code into .github/skills/webui-code/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "webui-code", 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.

skills CLI

$ npx skills add nwjs/chromium.src --skill webui-code -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install nwjs/chromium.src webui-code --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/nwjs/chromium.src.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/agents/projects/chrome-design-system/skills/webui-code .opencode/skills/webui-code && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "webui-code" agent skill from https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/webui-code into .opencode/skills/webui-code/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "webui-code", 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.

Facts

Skill name: webui-code
GitHub stars: 160
Token cost: ~828 tokens
SKILL.md length: 252 words
Files: 4 (incl. assets)
Skills in repo: 64
Repo updated: Oct 3, 2026
First seen: Oct 8, 2026
Licence: BSD-3-Clause

At a glance

A skill your agent uses when generating or reviewing WebUI code.

Works in 3 steps: Extend CrLitElement. → Expose the static is getter (returning… → Load the CSS and HTML template wrappers
Reviewing WebUI code
SKILL.md covers General WebUI Guidelines and Component Implementation
Runs TypeScript scripts from its folder; calls python3

What it does

Webui Code is an agent skill from nwjs/chromium.src. Use this skill when generating or reviewing WebUI code. This skill contains knowledge on WebUI code following Chrome's Lit-element architecture and styling guidelines.

Its SKILL.md is about 830 tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including assets (for example `assets/component_name.html.ts` and `assets/component_name.ts`).

It sits in Frontend & Design. The repository describes itself as: Chromium codebase with NW.js modifications. Based on https://chromium.googlesource.com/chromium/src.git. The licence is BSD-3-Clause.

When your agent uses it

Reviewing WebUI code

Example prompts

“/webui-code”

Requirements

Python 3
Node.js

Workflow steps

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

Extend CrLitElement.
Expose the static is getter (returning the kebab-case tag name).
Load the CSS and HTML template wrappers

What it can do on your machine

Read from SKILL.md and the folder at commit a9e8946. 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
Ships script files (TypeScript), which the agent can run.
Shell commands in SKILL.md call:
- python3
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

Webui Code loads about 828 tokens when it runs. Until then it costs about 45 tokens; SKILL.md has 252 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: ~828

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 nwjs/chromium.src at commit a9e8946, republished under its BSD-3-Clause licence (© nwjs). 252 words, ~828 tokens.

Download SKILL.mdSave it as .claude/skills/webui-code/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.

name: webui-code
description: Use this skill when generating or reviewing WebUI code. This skill contains knowledge on WebUI code following Chrome's Lit-element architecture and styling guidelines.
metadata.author: Chrome Design System Team

WebUI: Coding Guidelines

General WebUI Guidelines

Adhere to the official Chromium WebUI documentation. Read and follow the guidelines in these files:
- For core architecture, Lit implementation details, and migration guides: docs/webui/webui_using_lit.md
- For specific style rules, naming conventions, template guidelines, and safety standards: docs/webui/webui_lit_style_guide.md
Adhering to the Chrome Design System. Reference component specs for relevant components using the chrome-components skill. Ensure code follows the guidelines for each component.
As much as possible, prefer leverage existing WebUI components rather than creating new, bespoke components. Components are located under ui/webui/resources/cr_elements/ and ui/webui/resources/cr_components/.

Component Implementation

When implementing a new component, create these files.

File 1: `<component_name>.ts`

The main TypeScript file defining the element class. It must:

Extend CrLitElement.
Expose the static is getter (returning the kebab-case tag name).

Load the CSS and HTML template wrappers:

typescript

import { getCss } from './<component_name>.css.js';
import { getHtml } from './<component_name>.html.js';

Example Boilerplate: component_name.ts

File 2: `<component_name>.html.ts`

The HTML template containing the Lit markup.

Must wrap the template in html literal.
Must use slot elements correctly (e.g. slot="title", slot="body", slot="footer").

Example Boilerplate: component_name.html.ts

File 3: `<component_name>.css`

Stylesheet guidelines:

Lit Compilation Metadata Headers: It must contain the Lit compilation metadata headers importing shared variables so that the build system can wrap it into a Lit stylesheet module.
Chromium Stylelint Rules: It must follow the style lint rules for Chromium WebUI (//src/ui/webui/resources/tools/stylelint.config_base.mjs).

Lint feedback loop: Run Chromium's stylelint script (below) and fix errors. Repeat until there are no more errors.

bash

python3 ui/webui/resources/tools/stylelint.py --config ui/webui/resources/tools/stylelint.config_base.mjs --in_folder <relative_folder_path> --in_files <file_name>.css --out_file /tmp/stylelint.out

Token Fallback Chaining: Always declare Material 3 dynamic tokens using Chromium's shared fallback variables (var(--color-sys-<token>, var(--cr-fallback-color-<token>))):

css

/* Preferred: Dynamic Material 3 token with Chromium fallback */
background-color: var(--color-sys-surface2, var(--cr-fallback-color-surface2));

/* Anti-pattern: Hardcoded hex fallbacks */
background-color: var(--color-sys-surface2, #f3f6fc);

Example Boilerplate: component_name.css

Files

SKILL.md and 3 other files (assets) in agents/projects/chrome-design-system/skills/webui-code of nwjs/chromium.src.

SKILL.md
assets/component_name.css
assets/component_name.html.ts
assets/component_name.ts

Open the folder on GitHubat commit a9e8946

Compare with similar skills

Webui Code 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.

Webui Code compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Webui Code this skillnwjs/chromium.src	160	—	~828	Automated safety check: Pass	BSD-3-Clause	4 days ago
Web Artifacts Builderanthropics/skills	180k	41 repos	~769	Automated safety check: Pass	Apache-2.0	2 days ago
React Doctormakeplane/plane	61k	12 repos	~657	Automated safety check: Pass	AGPL-3.0	today
Impeccablebestofjs/bestofjs	3.1k	27 repos	~2.6k	Automated safety check: Pass	MIT	3 days ago
Figma Design System Builderwarpdotdev/warp	65k	2 repos	~4.4k	Automated safety check: Pass	AGPL-3.0	today
Web Interface Guidelines Reviewervercel-labs/openreview	1.7k	98 repos	~308	Automated safety check: Pass	None	7 mo ago

Similar skills

Web Artifacts Builder
anthropics/skills
Official
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
180k GitHub starsUsed in 41 repos~769 tokens
Frontend & DesignAuto-check passed
React Doctor
makeplane/plane
Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.
61k GitHub starsUsed in 12 repos~657 tokens
Frontend & DesignAuto-check passed
Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
3.1k GitHub starsUsed in 27 repos~2.6k tokens
Frontend & DesignAuto-check passed
Figma Design System Builder
warpdotdev/warp
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
Web Interface Guidelines Reviewer
vercel-labs/openreview
Official
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…
1.7k GitHub starsUsed in 98 repos~308 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

More from nwjs/chromium.src

All 64 skills in this repo

Analyzing SQL Traces
nwjs/chromium.src
Extracts raw trace data from Perfetto traces, runs arbitrary SQL queries for custom follow-up analysis, and applies expert cognitive principles (Tiered Flow Analysis, Semantic Mismatch, Redundancy)…
160 GitHub stars~2.9k tokensUpdated 4 days ago
Auto-check passed
Chrome Performance Optimizer
nwjs/chromium.src
Autonomous multi-agent performance optimization loop for Chromium and V8.
160 GitHub stars~4.2k tokensUpdated 4 days ago
Auto-check passed
Automated Tracing
nwjs/chromium.src
Automated Tracing & Performance Telemetry in Chromium using Perfetto and Telemetry benchmarks.
160 GitHub stars~1.5k tokensUpdated 4 days ago
Auto-check passed
Chrome Releases
nwjs/chromium.src
Queries Chrome commit, version, release, and milestone metadata.
160 GitHub stars~1.3k tokensUpdated 4 days ago
Auto-check passed
Chromium Docs
nwjs/chromium.src
Search and reference Chromium documentation from the local docs index, including design docs, APIs, and development guides.
160 GitHub stars~1.2k tokensUpdated 4 days ago
Auto-check passed
Gn Deps Debugging
nwjs/chromium.src
Diagnose Chromium GN dependency and include-visibility failures, including BUILD.gn deps/publicdeps, DEPS include rules, private headers, and circular dependencies.
160 GitHub stars~1.5k tokensUpdated 4 days ago
Auto-check passed

Questions about Webui Code

What does Webui Code do?

A skill your agent uses when generating or reviewing WebUI code. src. Use this skill when generating or reviewing WebUI code.

When should I use Webui Code?

Webui Code fits situations like: reviewing WebUI code.

How do I install Webui Code in Claude Code?

Run `npx skills add nwjs/chromium.src --skill webui-code -a claude-code`. Or copy the skill folder (agents/projects/chrome-design-system/skills/webui-code in nwjs/chromium.src) into .claude/skills/webui-code in your project. Claude Code loads it when a task matches its description.

How do I install Webui Code in Codex?

Run `npx skills add nwjs/chromium.src --skill webui-code -a codex`. Or copy the skill folder (agents/projects/chrome-design-system/skills/webui-code in nwjs/chromium.src) into .agents/skills/webui-code in your project. Codex loads it when a task matches its description.

Can I use Webui Code 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 nwjs/chromium.src --skill webui-code -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/webui-code, .gemini/skills/webui-code, .github/skills/webui-code and .opencode/skills/webui-code in your project.

What does Webui Code need to run?

Going by SKILL.md and its folder, Webui Code needs TypeScript for the scripts in its folder and the command-line tools its instructions call (python3). Our summary lists: Python 3; Node.js.

Does Webui Code 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 Webui Code 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 Webui Code use?

Webui Code is published under the BSD-3-Clause licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Webui Code use?

About 828 tokens (SKILL.md is roughly 3.3k 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 Webui Code?

Skills that share tags, products or a category with Webui Code: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 61k stars), Impeccable (bestofjs/bestofjs, 3.1k stars) and Figma Design System Builder (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 Webui Code?

nwjs (a GitHub organization) maintains it in nwjs/chromium.src, which has 160 GitHub stars. The repository holds 64 skills in this directory. The repository was last updated on October 3, 2026.

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

Install Webui Code

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

WebUI: Coding Guidelines

General WebUI Guidelines

Component Implementation

File 1: <component_name>.ts

File 2: <component_name>.html.ts

File 3: <component_name>.css

Files

Compare with similar skills

Similar skills

More from nwjs/chromium.src

Related

Questions about Webui Code

File 1: `<component_name>.ts`

File 2: `<component_name>.html.ts`

File 3: `<component_name>.css`