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.
A skill your agent uses when you need to map components across platforms, reference Chrome Design System component data, or generate a component spec.
Install Chrome Components
$ npx skills add nwjs/chromium.src --skill chrome-components -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install nwjs/chromium.src chrome-components --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/nwjs/chromium.src.git skills-src && mkdir -p .claude/skills && cp -r skills-src/agents/projects/chrome-design-system/skills/chrome-components .claude/skills/chrome-components && 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 "chrome-components" agent skill from https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/chrome-components into .claude/skills/chrome-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chrome-components", 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/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/chrome-componentsType 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 nwjs/chromium.src --skill chrome-components -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install nwjs/chromium.src chrome-components --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ 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/chrome-components .agents/skills/chrome-components && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "chrome-components" agent skill from https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/chrome-components into .agents/skills/chrome-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chrome-components", 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 nwjs/chromium.src --skill chrome-components -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install nwjs/chromium.src chrome-components --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ 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/chrome-components .cursor/skills/chrome-components && 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 "chrome-components" agent skill from https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/chrome-components into .cursor/skills/chrome-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chrome-components", 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/nwjs/chromium.src.git --path agents/projects/chrome-design-system/skills/chrome-components--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 nwjs/chromium.src --skill chrome-components -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install nwjs/chromium.src chrome-components --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ 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/chrome-components .gemini/skills/chrome-components && 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 "chrome-components" agent skill from https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/chrome-components into .gemini/skills/chrome-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chrome-components", 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 nwjs/chromium.src chrome-componentsInstalls 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 nwjs/chromium.src --skill chrome-components -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ 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/chrome-components .github/skills/chrome-components && 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 "chrome-components" agent skill from https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/chrome-components into .github/skills/chrome-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chrome-components", 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 nwjs/chromium.src --skill chrome-components -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install nwjs/chromium.src chrome-components --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ 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/chrome-components .opencode/skills/chrome-components && 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 "chrome-components" agent skill from https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/chrome-components into .opencode/skills/chrome-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chrome-components", 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
chrome-components- GitHub stars
- 160
- Token cost
- ~325 tokens
- SKILL.md length
- 141 words
- Files
- 32 (incl. references, assets)
- Skills in repo
- 64
- Repo updated
- First seen
- Licence
- BSD-3-Clause
At a glance
A skill your agent uses when you need to map components across platforms, reference Chrome Design System component data, or generate a component spec.
- You need to map components across platforms
- SKILL.md covers Component map, Component specs and Generating a component spec
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
- Reference Chrome Design System component data
What it does
Chrome Components is an agent skill from nwjs/chromium.src. Use this skill when you need to map components across platforms, reference Chrome Design System component data, or generate a component spec.
Its SKILL.md is about 330 tokens, which your agent loads only when the skill is triggered. The skill folder holds 34 other files, including reference files and assets (for example `README.md`, `assets/spec-template.md` and `references/component-specs/Badge_Spec.md`).
It sits in Frontend & Design, covering Design systems. It works with Figma. 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
- You need to map components across platforms
- Reference Chrome Design System component data
- Generate a component spec
Example prompts
- “/chrome-components”
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
No scripts in the folder and no shell commands in SKILL.md.
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
Chrome Components loads about 325 tokens when it runs, and up to ~87k if it reads all its reference files. Until then it costs about 40 tokens; SKILL.md has 141 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.
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). 141 words, ~325 tokens.
Download SKILL.mdSave it as
.claude/skills/chrome-components/SKILL.md (or your agent's skills folder). This skill also uses 31 other files; get the full folder from GitHub.- name
- chrome-components
- description
- Use this skill when you need to map components across platforms, reference Chrome Design System component data, or generate a component spec.
Chrome Components
Chrome components are the basic building blocks that make up the Chrome UI.
Component map
The component map (components.md) lists all supported Chrome Design System components, each mapped to equivalent components across all Chrome platforms.
For example, to find what a Figma Checkbox maps to in WebUI, find Checkbox
under the Figma Component column and then in that row, see the value under
the WebUI column (<cr-checkbox>).
Component specs
Each component has its own spec file that contains detailed specifications about the component.
To find a component spec, find the component in the component map and then follow the link to that component's spec. Alternatively, find the component by its name in the ./references/component-specs/ directory.
Generating a component spec
To generate a component spec, reference generate-component-spec.md. Currently this requires a link to a Figma component as the starting point.
© nwjs, BSD-3-Clause. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 31 other files (references, assets) in agents/projects/chrome-design-system/skills/chrome-components of nwjs/chromium.src.
- SKILL.md
- OWNERS
- README.md
- assets/spec-template.md
- references/component-specs/Badge_Spec.md
- references/component-specs/Buttons_Spec.md
- references/component-specs/Checkbox_Spec.md
- references/component-specs/ChroMenu_Spec.md
- references/component-specs/Comboboxes_Spec.md
- references/component-specs/ContextMenus_Spec.md
- references/component-specs/DialogBubble_Spec.md
- references/component-specs/DialogModal_Spec.md
- references/component-specs/FilterChips_Spec.md
- references/component-specs/IconButton_Spec.md
- references/component-specs/Key_UIs_IPH_Spec.md
- references/component-specs/ListItemBadge_Spec.md
- references/component-specs/List_Items_Spec.md
- references/component-specs/Omnibox_Spec.md
- … and 14 more
Open the folder on GitHubat commit a9e8946
Compare with similar skills
Chrome Components 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 |
|---|---|---|---|---|---|---|
| Chrome Components this skillnwjs/chromium.src | 160 | — | ~325 | Automated safety check: Pass | BSD-3-Clause | |
| Figma Design System Builderwarpdotdev/warp | 65k | 2 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Figma use_figma Plugin API Ruleswarpdotdev/warp | 65k | 4 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Figma Design System Rules Generatorwarpdotdev/warp | 65k | 3 repos | ~4.6k | Automated safety check: Pass | AGPL-3.0 | |
| Figma Code Connect Componentswarpdotdev/warp | 65k | 2 repos | ~4.2k | Automated safety check: Pass | AGPL-3.0 | |
| Cc DesignZeroZ-lab/cc-design | 827 | — | ~2.2k | Automated safety check: Notes | None |
Similar skills
Figma use_figma Plugin API Rules
warpdotdev/warp
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.
Figma Design System Rules Generator
warpdotdev/warp
Creates project-specific design system rules from your codebase so coding agents implement Figma designs with your components, naming and tokens.
Figma Code Connect Components
warpdotdev/warp
Maps published Figma components to their code implementations with Code Connect, using the Figma MCP suggestion and mapping tools.
Cc Design
ZeroZ-lab/cc-design
High-fidelity HTML design and prototype creation. An agent skill from ZeroZ-lab/cc-design.
Visual Style
calesthio/OpenMontage
Create, extract, and apply portable visual design systems via visual-style.md files.
More from nwjs/chromium.src
All 64 skills in this repoAnalyzing 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)…
Chrome Performance Optimizer
nwjs/chromium.src
Autonomous multi-agent performance optimization loop for Chromium and V8.
Automated Tracing
nwjs/chromium.src
Automated Tracing & Performance Telemetry in Chromium using Perfetto and Telemetry benchmarks.
Chrome Releases
nwjs/chromium.src
Queries Chrome commit, version, release, and milestone metadata.
Chromium Docs
nwjs/chromium.src
Search and reference Chromium documentation from the local docs index, including design docs, APIs, and development guides.
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.
Related
Works with
Categories
Questions about Chrome Components
What does Chrome Components do?
A skill your agent uses when you need to map components across platforms, reference Chrome Design System component data, or generate a component spec. src. Use this skill when you need to map components across platforms, reference Chrome Design System component data, or generate a component spec.
When should I use Chrome Components?
Chrome Components fits situations like: you need to map components across platforms; reference Chrome Design System component data; generate a component spec.
How do I install Chrome Components in Claude Code?
Run `npx skills add nwjs/chromium.src --skill chrome-components -a claude-code`. Or copy the skill folder (agents/projects/chrome-design-system/skills/chrome-components in nwjs/chromium.src) into .claude/skills/chrome-components in your project. Claude Code loads it when a task matches its description.
How do I install Chrome Components in Codex?
Run `npx skills add nwjs/chromium.src --skill chrome-components -a codex`. Or copy the skill folder (agents/projects/chrome-design-system/skills/chrome-components in nwjs/chromium.src) into .agents/skills/chrome-components in your project. Codex loads it when a task matches its description.
Can I use Chrome Components 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 chrome-components -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/chrome-components, .gemini/skills/chrome-components, .github/skills/chrome-components and .opencode/skills/chrome-components in your project.
What does Chrome Components need to run?
SKILL.md names no scripts, command-line tools or credentials: Chrome Components is instructions for the agent only.
Does Chrome Components 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 Chrome Components 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 Chrome Components use?
Chrome Components 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 Chrome Components use?
About 325 tokens (SKILL.md is roughly 1.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 86k tokens, read only when the agent opens those files.
What are the alternatives to Chrome Components?
Skills that share tags, products or a category with Chrome Components: Figma Design System Builder (warpdotdev/warp, 65k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars), Figma Design System Rules Generator (warpdotdev/warp, 65k stars) and Figma Code Connect Components (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 Chrome Components?
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.