skills.rest
pproenca
pproencaCOMMUNITY
Explore all skills by this author →
𝕏@ThePedroProencaGitHub

chrome-extension-ui

Provide UX/UI design guidelines for Chrome Extensions using Manifest V3.

193|17|Updated Jan 16, 2026
Search Tags:#performance#accessibility#ui design#chrome extension#popup#side panel#ux best practices
One-click install
npx skills add https://github.com/pproenca/dot-skills --skill chrome-extension-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-extension-ui
Source: https://github.com/pproenca/dot-skills/tree/main/skills/.experimental/chrome-extension-ui
Command: npx skills add https://github.com/pproenca/dot-skills --skill chrome-extension-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of guidelines and best practices for designing and implementing user interfaces for Chrome extensions, ensuring they are accessible, performant, and user-friendly.

Core Features & Use Cases

  • UI Component Guidance: Best practices for popups, side panels, content scripts, and options pages.
  • Accessibility Standards: Ensures compliance with WCAG guidelines for keyboard navigation, contrast, and ARIA attributes.
  • Performance Optimization: Tips for reducing load times and improving perceived performance.
  • Use Case: When designing a new Chrome extension, use this Skill to ensure your popup is intuitive, accessible, and loads quickly, leading to higher user adoption and satisfaction.

Quick Start

Follow the guidelines in this Skill to design an accessible and performant popup for your Chrome extension.

Frequently Asked Questions about chrome-extension-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design an accessible and performant Chrome extension popup?▼

A Chrome extension side panel is better for persistent UI workflows needing constant visibility, while a popup suits brief, transactional interactions. Selecting the right component optimizes UX by matching user interaction duration and context.

How do I ensure my Chrome extension UI meets Web Store compliance?▼

Ensure Chrome extension UI store compliance by adhering to WCAG accessibility standards, implementing proper keyboard navigation, maintaining color contrast, and following Manifest V3 guidelines for options pages and content script injection.

What are the best practices for responsive layouts in Chrome extension side panels?▼

Best practices for responsive layouts in Chrome extension side panels involve adapting visual feedback and UI components to varying dimensions. Ensure accessibility standards and keyboard navigation remain intact across all responsive states for optimal UX.

Does Manifest V3 affect Chrome extension UI design and content script injection?▼

Manifest V3 directly affects Chrome extension UI design by altering content script injection mechanisms and side panel APIs. Adhering to Manifest V3 ensures your popup, options pages, and visual feedback components maintain store compliance and performance.

Why does my Chrome extension popup close when I click outside of it?▼

A Chrome extension popup inherently closes upon losing focus, which is standard browser behavior. For persistent UI interactions requiring extended user engagement, implement a side panel component instead to maintain continuous visual feedback.

Related Skills

Explore More Software Engineering Skills→
CidLucasCidLucas

chrome-extensions

Guide Chrome Extension development with Manifest V3, permissions, and Web Store submission.

Community
Advanced
jinwoonghongjinwoonghong

moai-platform-chrome-extension

Develop Chrome extensions using Manifest V3 service workers and content scripts.

Community
Advanced
dthompsonfldthompsonfl

web-design-guidelines

Audit HTML, CSS, and ARIA against Web Interface Guidelines and report violations.

Community
Intermediate
ekremmkasapekremmkasap

web-component-design

Design reusable UI components compatible across React, Vue, and Svelte.

Community
Advanced