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.
npx skills add pproenca/dot-skills --skill chrome-extension-uigit clone --depth 1 https://github.com/pproenca/dot-skillsWrote 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.
[](https://agentmods.dev/skills/pproenca/dot-skills/chrome-extension-ui)<a href="https://agentmods.dev/skills/pproenca/dot-skills/chrome-extension-ui"><img src="https://agentmods.dev/badge/skills/pproenca/dot-skills/chrome-extension-ui/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.
<a href="https://agentmods.dev/skills/pproenca/dot-skills/chrome-extension-ui"><img src="https://agentmods.dev/badge/skills/pproenca/dot-skills/chrome-extension-ui.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Socket pass
- Snyk warn
- NVIDIA SkillSpector pass
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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00042 | $0.01458 |
| Opus 5 | $0.00021 | $0.00729 |
| Sonnet 5 | $0.00008 | $0.00292 |
| Haiku 4.5 | $0.00004 | $0.00146 |
Grade A, and why
chrome-extension-ui 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 5d ago.
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.
How it starts
The opening of the file, as written. The whole thing — 114 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Chrome Extensions UX/UI Best Practices
Comprehensive UX/UI design guide for Chrome Extensions, optimized for Manifest V3. Contains 42 rules across 8 categories, prioritized by impact to guide extension UI development and code review.
When to Apply
Reference these guidelines when:
- Building new Chrome extension user interfaces
- Choosing between popup, side panel, or content script UI
- Implementing accessible, keyboard-navigable interfaces
- Designing loading states, error handling, and feedback patterns
- Creating options pages and settings persistence
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Component Selection | CRITICAL | comp- |
| 2 | Accessibility & Navigation | CRITICAL | access- |
| 3 | Popup Design | HIGH | popup- |
| 4 | Side Panel UX | HIGH | panel- |
| 5 | Content Script UI | MEDIUM-HIGH | inject- |
| 6 | Visual Feedback | MEDIUM | feedback- |
| 7 | Options & Settings | MEDIUM | options- |
| 8 | Icons & Branding | LOW-MEDIUM | brand- |
Quick Reference
1. Component Selection (CRITICAL)
comp-popup-vs-sidepanel- Choose Side Panel for Persistent Taskscomp-content-script-ui- Use Content Scripts for In-Page UIcomp-single-purpose- Design for Single Purposecomp-minimal-permissions- Request Minimal Permissionscomp-action-tooltip- Provide Descriptive Action Tooltips
2. Accessibility & Navigation (CRITICAL)
access-keyboard-navigation- Enable Complete Keyboard Navigationaccess-focus-visible- Maintain Visible Focus Indicatorsaccess-aria-labels- Use ARIA Labels for Icon-Only Buttonsaccess-color-contrast- Ensure Sufficient Color Contrastaccess-focus-trap- Avoid Keyboard Focus Trapsaccess-semantic-html- Use Semantic HTML Elements
What ships with it
46 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.
- AGENTS.md 8.6 KB
- assets/templates/_template.md 779 B
- metadata.json 1.4 KB
- references/_sections.md 1.8 KB
- references/access-aria-labels.md 2.0 KB
- references/access-color-contrast.md 2.0 KB
- references/access-focus-trap.md 2.7 KB
- references/access-focus-visible.md 1.7 KB
- references/access-keyboard-navigation.md 2.3 KB
- references/access-semantic-html.md 2.4 KB
- references/brand-badge-text.md 2.5 KB
- references/brand-consistent-styling.md 3.2 KB
- references/brand-distinctive-icon.md 2.4 KB
- references/brand-icon-sizes.md 2.2 KB
- references/brand-web-store-assets.md 2.9 KB
- references/comp-action-tooltip.md 1.7 KB
- references/comp-content-script-ui.md 2.0 KB
- references/comp-minimal-permissions.md 1.8 KB
- references/comp-popup-vs-sidepanel.md 1.5 KB
- references/comp-single-purpose.md 2.1 KB
- references/feedback-badge-status.md 3.0 KB
- references/feedback-error-messages.md 3.2 KB
- references/feedback-loading-states.md 3.2 KB
- references/feedback-notifications.md 3.7 KB
- references/feedback-progress-indication.md 3.9 KB
- references/feedback-success-confirmation.md 3.5 KB
- references/inject-cleanup.md 3.3 KB
- references/inject-document-ready.md 2.4 KB
- references/inject-shadow-dom.md 2.7 KB
- references/inject-unique-ids.md 2.6 KB
- references/inject-z-index.md 2.4 KB
- references/options-auto-save.md 3.6 KB
- references/options-embedded-page.md 2.9 KB
- references/options-sensible-defaults.md 3.4 KB
- references/options-sync-storage.md 2.9 KB
- references/panel-lazy-sections.md 3.4 KB
- references/panel-non-distracting.md 2.2 KB
- references/panel-page-context.md 3.0 KB
- references/panel-responsive-width.md 2.2 KB
- references/panel-tab-vs-window.md 2.6 KB
- references/popup-auto-close.md 2.6 KB
- references/popup-dynamic-switch.md 2.7 KB
- references/popup-external-js.md 2.3 KB
- references/popup-instant-render.md 2.6 KB
- references/popup-primary-action.md 2.3 KB
- references/popup-size-constraints.md 2.1 KB
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.
- 5d ago First seen · 114 lines · 42 tokens per session scan A a4fc4f6bd6a0
chrome-extension-ui is a skill published in the GitHub repository pproenca/dot-skills (205 stars, last pushed 24d ago), licensed MIT. It adds 42 tokens to every session and 1,458 once invoked, about $0.0002 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-09-03.
Other skills, from other repositories
figma-to-webui
Recreate Figma design frames as production-ready Chromium WebUI code following Chrome's Lit-element architecture and styling guidelines. Use when asked to create WebUI code from a Figma frame URL.
generate-component-spec
Maps a Figma component from the Chrome Design System (CDS) to equivalent C++ Views, WebUI, and Clank (Android) components in the Chromium codebase. Generates a comprehensive side-by-side comparative Markdown specification detailing layout variants, interactive states, design tokens, architectural and implementation…
generate-token-map
Maps all Figma design tokens from figma-variables.md to their equivalent C++ (Views) identifiers, CSS (WebUI) variables, and Clank (Android) resource attributes/macros/methods in Chromium, and saves the formatted mapping table to the assets directory of the Chrome Design System project. Use this skill when asked to…
figma-to-views
Recreate Figma design frames as production-ready Chromium C++ Views code following Chrome's native Views architecture, component guidelines, and color/shape token mappings. Use when asked to create C++ Views code from a Figma frame URL.
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.
figma-design-review
Critique and review Figma designs to ensure alignment with Chromium codebase components, tokens, and structure. Use when the user asks to critique, review, or audit a design, check alignment with code, or compare a Figma node against component specifications or coding standards.