Agent skill

Views Code

A skill your agent uses when generating or reviewing C++ Views code.

BSD-3-ClauseAuto-check passedFrontend & Design

Install Views Code

skills CLI

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

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

GitHub CLI

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

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

GitHub CLI

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

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

GitHub CLI

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

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

GitHub CLI

$ gh skill install nwjs/chromium.src views-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/views-code .gemini/skills/views-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 "views-code" agent skill from https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/views-code into .gemini/skills/views-code/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "views-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 views-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 views-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/views-code .github/skills/views-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 "views-code" agent skill from https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/views-code into .github/skills/views-code/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "views-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 views-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 views-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/views-code .opencode/skills/views-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 "views-code" agent skill from https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/views-code into .opencode/skills/views-code/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "views-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: views-code
GitHub stars: 160
Token cost: ~987 tokens
SKILL.md length: 178 words
Files: 1
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 C++ Views code.

Reviewing C++ Views code
SKILL.md covers General Views Guidelines, Implementation Rules and Component Implementation
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Views Code is an agent skill from nwjs/chromium.src. Use this skill when generating or reviewing C++ Views code. This skill contains knowledge on C++ Views code following Chrome's native Views architecture and component guidelines.

Its SKILL.md is about 990 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. It works with C++. 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 C++ Views code

Example prompts

“/views-code”

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 (its code samples are cpp).
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

Views Code loads about 987 tokens when it runs. Until then it costs about 47 tokens; SKILL.md has 178 words of instructions outside code blocks.

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

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). 178 words, ~987 tokens.

Download SKILL.mdSave it as .claude/skills/views-code/SKILL.md (or your agent's skills folder).

name: views-code
description: Use this skill when generating or reviewing C++ Views code. This skill contains knowledge on C++ Views code following Chrome's native Views architecture and component guidelines.
metadata.author: Chrome Design System Team

Views: Code Guidelines

General Views Guidelines

Adhere to the official Chromium Views documentation.
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 Views components rather than creating new, bespoke components. Views components are located under ui/views/ and chrome/browser/ui/views/.

Implementation Rules

Theme Inheritance: The C++ View must adapt automatically to the user's Chrome Appearance setting (e.g. light/dark mode) without hardcoded theme checks.
Corner Radius Tokens: Do not hardcode arbitrary radius numbers when design system tokens apply. Retrieve standard radii dynamically from views::LayoutProvider.
Responsive Layout & Flex Spacing: Use views::BoxLayout or views::BoxLayoutView for structured horizontal and vertical stacking.
- Apply consistent spacing and padding using gfx::Insets::VH(...) and SetBetweenChildSpacing(...).
- Use SetFlexForView(child, 1) on horizontal or vertical layouts to distribute space proportionally.
- Layout options include BoxLayout, BoxLayoutView, FlexLayout, FlexLayoutView, TableLayout or TableLayoutView for structured horizontal and vertical stacking, or fully structured tables.

Component Implementation

When implementing a new component, create these files.

File 1: `<component_name>_view.h`

Example Boilerplate:

cpp

// Copyright 2026 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

#ifndef CHROME_BROWSER_UI_VIEWS_COMPONENT_NAME_VIEW_H_
#define CHROME_BROWSER_UI_VIEWS_COMPONENT_NAME_VIEW_H_

#include "ui/base/metadata/metadata_header_macros.h"
#include "ui/views/view.h"

// Recreates the design using native C++ Views controls and
// Chrome Design System token mappings.
class ComponentNameView : public views::View {
  METADATA_HEADER(ComponentNameView, views::View)

 public:
  ComponentNameView();
  ComponentNameView(const ComponentNameView&) = delete;
  ComponentNameView& operator=(const ComponentNameView&) = delete;
  ~ComponentNameView() override;

  // views::View:
  gfx::Size CalculatePreferredSize(
      const views::SizeBounds& available_size) const override;
};

#endif  // CHROME_BROWSER_UI_VIEWS_COMPONENT_NAME_VIEW_H_

File 2: `<component_name>_view.cc`

Example Boilerplate:

cpp

// Copyright 2026 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

#include "chrome/browser/ui/views/component_name_view.h"

#include <memory>
#include <utility>

#include "base/functional/callback_helpers.h"
#include "ui/base/metadata/metadata_impl_macros.h"
#include "ui/color/color_id.h"
#include "ui/gfx/font_list.h"
#include "ui/gfx/geometry/insets.h"
#include "ui/gfx/geometry/size.h"
#include "ui/views/background.h"
#include "ui/views/layout/box_layout.h"
#include "ui/views/layout/box_layout_view.h"
#include "ui/views/layout/layout_provider.h"
#include "ui/views/view.h"
#include "ui/views/view_class_properties.h"

namespace {

}  // namespace

BEGIN_METADATA(ComponentNameView)
END_METADATA

ComponentNameView::ComponentNameView() {
  // Reference: Chrome Design System token mappings.
  // Map variables to C++ tokens and retrieve standard corner radii.
}

Files

Just SKILL.md in agents/projects/chrome-design-system/skills/views-code of nwjs/chromium.src.

Open the folder on GitHubat commit a9e8946

Compare with similar skills

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

Views Code compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Views Code this skillnwjs/chromium.src	160	—	~987	Automated safety check: Pass	BSD-3-Clause	4 days ago
Build Fluentqt Guicalvinhxx/Fluent-Qt	155	—	~1.6k	Automated safety check: Pass	MIT	today
RayRailly/tinte	624	—	~712	Automated safety check: Pass	MIT	2 mo ago
Huxerui App DevelopmentLangLang03/LineCodePro	102	—	~2.2k	Automated safety check: Pass	AGPL-3.0	7 days ago
Qt Cmake ProjectTheQtCompanyRnD/agent-skills	466	—	~2.5k	Automated safety check: Pass	BSD-3-Clause	yesterday
I18n Contextcataclysmbn/Cataclysm-BN	1.3k	—	~580	Automated safety check: Pass	Custom licence	today

Similar skills

Build Fluentqt Gui
calvinhxx/Fluent-Qt
Create, integrate, redesign, or fix C++ and PySide6 GUIs using FluentQt, including component and Gallery work.
155 GitHub stars~1.6k tokensUpdated today
Frontend & DesignAuto-check passed
Ray
Railly/tinte
Generate code screenshots via ray.tinte.dev API. An agent skill from Railly/tinte.
624 GitHub stars~712 tokensUpdated 2 mo ago
Frontend & DesignAuto-check passed
Huxerui App Development
LangLang03/LineCodePro
Develop HuxerUI SDK apps: create/open projects, build UI and app-side components, configure CMake/CLI, review, and troubleshoot.
102 GitHub stars~2.2k tokensUpdated 7 days ago
Frontend & DesignAuto-check passed
Qt Cmake Project
TheQtCompanyRnD/agent-skills
A skill your agent uses to generate or update Qt 6 CMake projects or edit CMakeLists.txt, add sources/resources or define targets (executable, QML module, library).
466 GitHub stars~2.5k tokensUpdated yesterday
Frontend & DesignAuto-check passed
I18n Context
cataclysmbn/Cataclysm-BN
Add gettext context for ambiguous user-facing strings and repair affected PO translations.
1.3k GitHub stars~580 tokensUpdated today
Frontend & DesignAuto-check passed
Tilelang Pass Design
tile-ai/tilelang-ascend
根据 Pass 需求生成 TileLang-Ascend Pass 设计文档（pass-design.md）。涵盖 Pass 定位分析（Phase 1/2归属、Pipeline位置、依赖关系）、IR 变换设计、C++ 实现方案、测试方案、风险分析等。触发关键词：设计 Pass、Pass 设计文档、写 Pass、实现 Pass、添加 Pass、新建 Pass、Pass 设计、开发 Pass。
400 GitHub stars~1.6k tokensUpdated today
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

Works with

Questions about Views Code

What does Views Code do?

A skill your agent uses when generating or reviewing C++ Views code. src. Use this skill when generating or reviewing C++ Views code.

When should I use Views Code?

Views Code fits situations like: reviewing C++ Views code.

How do I install Views Code in Claude Code?

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

How do I install Views Code in Codex?

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

Can I use Views 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 views-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/views-code, .gemini/skills/views-code, .github/skills/views-code and .opencode/skills/views-code in your project.

What does Views Code need to run?

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

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

Views 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 Views Code use?

About 987 tokens (SKILL.md is roughly 3.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 Views Code?

Skills that share tags, products or a category with Views Code: Build Fluentqt Gui (calvinhxx/Fluent-Qt, 155 stars), Ray (Railly/tinte, 624 stars), Huxerui App Development (LangLang03/LineCodePro, 102 stars) and Qt Cmake Project (TheQtCompanyRnD/agent-skills, 466 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Views 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 Views Code

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Views: Code Guidelines

General Views Guidelines

Implementation Rules

Component Implementation

File 1: <component_name>_view.h

File 2: <component_name>_view.cc

Files

Compare with similar skills

Similar skills

More from nwjs/chromium.src

Related

Questions about Views Code

File 1: `<component_name>_view.h`

File 2: `<component_name>_view.cc`