figma-design-review

figma-design-review is a skill for Claude Code, Codex from chromium/chromium. It costs 59 tokens per session (1,305 once invoked), scanned A, original, BSD-3-Clause.

A review workflow for checking whether a Figma design follows Chromium's existing interface components, shared design values, and code structure. Figma is a tool for creating collaborative visual interface designs.

In plain words
What is it for?
Use it to review a Figma node, compare it with Chromium component specifications, and report mismatches in structure, tokens, icons, and implementation details.
Why use it?
It identifies design choices that may be difficult to implement consistently, such as hardcoded values, raw icons, or structures that do not match existing components. This gives developers concrete issues to resolve before coding.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Use it to review a Figma node, compare it with Chromium component specifications, and report mismatches in structure, tokens, icons, and implementation details.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/chromium/chromium/figma-design-review
About the project

Chromium is an open-source web browser project and the official GitHub mirror of its source code. It is used to build and maintain software for browsing the web, with documentation and code for products such as Chrome and Android WebView.

chromium/chromium · 24,756 stars · on GitHub · chromium.googlesource.com

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add chromium/chromium --skill figma-design-review
Clone the repo
git clone --depth 1 https://github.com/chromium/chromium

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for figma-design-review

README.md
[![agentmods](https://agentmods.dev/badge/skills/chromium/chromium/figma-design-review/github.svg)](https://agentmods.dev/skills/chromium/chromium/figma-design-review)
Your own site
<a href="https://agentmods.dev/skills/chromium/chromium/figma-design-review"><img src="https://agentmods.dev/badge/skills/chromium/chromium/figma-design-review/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for figma-design-review

Your own site · 80×15
<a href="https://agentmods.dev/skills/chromium/chromium/figma-design-review"><img src="https://agentmods.dev/badge/skills/chromium/chromium/figma-design-review.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 59 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,305 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00059 $0.01305
Opus 5 $0.00030 $0.00652
Sonnet 5 $0.00012 $0.00261
Haiku 4.5 $0.00006 $0.00130

Measured today against content hash deefd27999c6, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

figma-design-review scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured today.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

agents/projects/chrome-design-system/skills/figma-design-review/SKILL.md · 123 lines

How it starts

The opening of the file, as written. The whole thing — 123 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Figma Design Review

This skill provides a structured workflow for reviewing a Figma design (node or page) and critiquing its alignment with the existing codebase component specifications. It helps bridge the gap between design and implementation by identifying hardcoded values, raw icon usages instead of proper components, and structural mismatches.

Prerequisites

  • Figma MCP Server: Must be active and configured in the workspace context to fetch designs and metadata.
  • Chromium Repository: This skill should be executed from inside the root directory of the Chromium repository source code (//src/).

Review Workflow

When asked to review a Figma design for code alignment, follow these steps sequentially:

1. Fetch the Design Context

Use the get_design_context tool on the provided Figma URL or node ID.

  • Pay close attention to the generated React/Tailwind code output as it represents the node's structure.
  • Look for generic <div> wrappers versus named components.
  • Check for hardcoded className values versus design tokens (e.g., var(--desktop/sys/surface)).
  • Note any raw image/mask constructions.

2. Identify and Read Component Specifications

Identify the main UI components used in the design (e.g., Buttons, Dialogs, Radio Buttons, Text Fields).

  • Look up Chorme Design System component specs using the chrome-components skill.
  • Read the identified _Spec.md files using read_file to understand how the components are implemented in the target codebase (WebUI and C++ Views).
  • Crucial Component Mapping Rule:
    • The design context from Figma may output complex nested divs, SVGs, or image masks (imgMask, imgIcon) instead of clean component tags. This happens when Figma Code Connect is missing, causing the API to decompile the visual layers of a component.
    • Do not assume these are "raw custom-drawn shapes" if the component instance name, data name, or ID in the design context (e.g. data-name="RadioButtons", data-name=".base.Buttons") matches an official component defined in the spec files.
    • Cross-reference the Figma component name/ID with Section 1 of the component's _Spec.md file to identify the true target components (e.g., <cr-radio-button> for WebUI, views::RadioButton for C++).
    • Don't report this in the feedback, and don't advise on the use of Figma Code Connect.
  • Crucial Information to Extract from Specs:
    • Standard tokens used for colors, spacing, outlines, and fonts.
    • Handling of interactive states (hover, focus, disabled).
    • Use of specific variant classes (e.g., .action-button, .tonal-button).
    • Architectural constraints (e.g., C++ handles shadows natively).

Read the full file on GitHub · 123 lines

Files

What ships with it

2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. today Changed · +49 lines deefd27999c6
  2. 12d ago First seen · 74 lines · 59 tokens per session scan A f1da15fb05e6

Subscribe to this mod's changes

figma-design-review is a skill published in the GitHub repository chromium/chromium (24,756 stars, last pushed today), licensed BSD-3-Clause. It adds 59 tokens to every session and 1,305 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

pagouse

Observe and (with a grant) drive Chromium tabs via the pagouse CLI: snapshot the accessibility tree, click/fill by ref, navigate. Not a seat adapter. Trigger keywords: pagouse, browser tab, fill form, click the button on the page, snapshot page, AX tree.

gianlucamazza/pagouse · 62 tokens

analyzing-browser-forensics-with-hindsight

Parse Chromium-based browser databases with Hindsight to extract and correlate browsing history, downloads, cookies, cached content, autofill data, saved passwords, and extensions from Chrome, Edge, Brave, Opera, and Vivaldi into a unified timeline (XLSX, JSON, or SQLite output). Use during incident response…

mukul975/Anthropic-Cybersecurity-Skills · 95 tokens

browserwing-executor

Control browser automation through HTTP API. Supports page navigation, element interaction (click, type, select), data extraction, accessibility snapshot analysis, screenshot, JavaScript execution, and batch operations.

MemTensor/MemOS · 42 tokens

chrome-cdp

Drive a headless Chrome over the Chrome DevTools Protocol (CDP) for browser QA — navigate, click, fill forms, read the DOM/accessibility tree, screenshot, and assert. Use whenever a task requires loading a web page and interacting with it like a user. Chrome is launched by a bash step (recipe below); this skill…

mattzcarey/shippie · 91 tokens

stealth-browser-launch

Launch stealth Chromium with C++ fingerprint patches for anti-bot bypass.

uphiago/recon-skills · 19 tokens

separateweb-capture

Capture a URL into a full-page screenshot, cropped UI item PNGs, and a JSON manifest. Use when the user says separateweb capture , asks to capture a website, or wants UI extraction assets without running the SeparateWeb web app.

hashgraph-online/awesome-codex-plugins · 59 tokens