skills.rest
mohamedgshoaib
mohamedgshoaibCOMMUNITY
Explore all skills by this author →
Website𝕏@mohamedgshoaibGitHub

chrome-extension-ui

Guide Chrome Extension UI design with 42 rules for Manifest V3.

5|Updated Jan 20, 2026
Search Tags:#accessibility#web development#ui design#chrome extension#ux guidelines#manifest v3
One-click install
npx skills add https://github.com/mohamedgshoaib/reway --skill chrome-extension-ui-mohamedgshoaib
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-extension-ui
Source: https://github.com/mohamedgshoaib/reway/tree/main/.agents/skills/chrome-extension-ui
Command: npx skills add https://github.com/mohamedgshoaib/reway --skill chrome-extension-ui-mohamedgshoaib

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the complexity of building user-friendly Chrome Extensions by providing a structured, 42-rule design system that ensures consistency, accessibility, and performance across all extension surfaces.

Core Features & Use Cases

  • Surface Selection: Expert guidance on choosing between popups, side panels, and content scripts to maximize user engagement.
  • Accessibility Compliance: Built-in rules for WCAG-compliant keyboard navigation, focus management, and color contrast.
  • Use Case: When developing a new bookmarking tool, use this Skill to determine whether to use a side panel for persistent note-taking or a content script for in-page UI, ensuring the implementation follows Manifest V3 best practices.

Quick Start

Use the chrome-extension-ui skill to review my current popup implementation against the high-priority design rules for accessibility and component selection.

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 a Chrome extension UI for Manifest V3?▼

To design a Chrome extension UI for Manifest V3, you need a 42-rule design system covering component selection, accessibility, popup design, side panel UX, and content script injection to ensure professional-grade consistency and performance.

When should I use a side panel vs a popup in Chrome extension development?▼

Use a side panel for persistent tasks like note-taking or extended interaction, and choose a popup for quick, transient actions. Selecting the right surface maximizes user engagement and aligns with Manifest V3 best practices.

How do I make my Chrome extension UI accessible and WCAG compliant?▼

Making a Chrome extension UI accessible involves applying built-in rules for keyboard navigation, focus management, and color contrast. These WCAG compliance rules ensure the extension is usable by all individuals regardless of ability.

Can I use content script injection for in-page UI in a Chrome extension?▼

Content script injection is ideal for building in-page UI directly within the context of a website. It allows you to overlay or modify web content seamlessly while maintaining Manifest V3 compliance and consistent extension branding.

What are the limitations of using popups for Chrome extension UX?▼

Popups close when the user clicks away, making them unsuitable for persistent workflows or complex data entry. For continuous interaction, using a side panel is recommended to maintain state and keep the user engaged.

Related Skills

Explore More Software Engineering Skills→
fanthusfanthus

chrome-extension

Create and modify Chrome extensions with Manifest V3 scaffolding and messaging.

Community
Basic
jinwoonghongjinwoonghong

moai-platform-chrome-extension

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

Community
Advanced
boparaiamritboparaiamrit
5

accessibility-audit

Audit frontend UI accessibility against WCAG standards and generate remediation guidance.

Community
Advanced
C-Jay69C-Jay69

frontend-design

Generate accessible React/TypeScript components with design tokens and dark mode.

Community
Advanced