How does it handle Dark Mode?

It provides two approaches: a CSS media query pattern for system-level preferences and a manual toggle pattern that persists user choice via chrome.storage.sync.

Are the UI patterns responsive?

Yes, the styles utilize flexible layouts and CSS variables to ensure the UI adapts correctly to different user-resized side panels and varying popup content.

What UI components are included in this skill?

The skill includes standardized patterns for Popups (within 800x600px limits), Side Panels, Options/Settings pages, and shared elements like toggles, tabs, and action lists.

Are the layouts compliant with accessibility standards?

Yes, the patterns include specific implementations for ARIA roles, skip links, focus trapping in modals, and keyboard navigation to ensure WCAG compliance.

Can I use these patterns for Manifest V3 extensions?

Absolutely. All UI patterns, including the Side Panel and Options page layouts, are fully compatible with Chrome Extension Manifest V3 requirements.

Chrome Extension UI Patterns

Name: Chrome Extension UI Patterns
Author: francanete

byfrancanete

设计工具

Provides standardized UI patterns and boilerplate code for building accessible, responsive Chrome Extension interfaces.

关于

This skill provides a comprehensive collection of UI design patterns tailored specifically for Chrome Extension development. It covers essential interface components including popup structures, side panel layouts, and options pages while addressing platform-specific constraints like window dimensions and lifecycle behaviors. Beyond basic layouts, the skill integrates professional best practices for dark mode support via CSS variables, ARIA-compliant accessibility features, focus management, and keyboard navigation. It serves as a blueprint for developers looking to build production-grade extension UIs that feel native to the browser and remain user-friendly.

主要功能

Pre-built options page layouts with settings groups and danger zones
Boilerplate HTML/CSS for standard 800x600px popups and side panels
0 GitHub stars
Interactive UI elements including tab systems and toast notifications
Dark mode implementation patterns using CSS variables and storage sync
Accessibility-first components with ARIA labels and focus trapping

使用场景

Implementing a persistent sidebar UI using the Chrome Side Panel API
Creating an accessible and responsive settings page for extension users
Scaffolding a new Chrome Extension interface with best-practice layouts

关于

主要功能

Pre-built options page layouts with settings groups and danger zones
Boilerplate HTML/CSS for standard 800x600px popups and side panels
0 GitHub stars
Interactive UI elements including tab systems and toast notifications
Dark mode implementation patterns using CSS variables and storage sync
Accessibility-first components with ARIA labels and focus trapping

使用场景

Implementing a persistent sidebar UI using the Chrome Side Panel API
Creating an accessible and responsive settings page for extension users
Scaffolding a new Chrome Extension interface with best-practice layouts