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

0•

Herramientas de Diseño

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.

Características Principales

01Pre-built options page layouts with settings groups and danger zones

02Boilerplate HTML/CSS for standard 800x600px popups and side panels

030 GitHub stars

04Interactive UI elements including tab systems and toast notifications

05Dark mode implementation patterns using CSS variables and storage sync

06Accessibility-first components with ARIA labels and focus trapping

Casos de Uso

01Implementing a persistent sidebar UI using the Chrome Side Panel API

02Creating an accessible and responsive settings page for extension users

03Scaffolding a new Chrome Extension interface with best-practice layouts

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add francanete/fran-marketplace ui-patterns

For use in Claude.ai and ChatGPT

Download Skill