skills.rest
francanete
francaneteCOMMUNITY
Explore all skills by this author →
Website𝕏@francanetecomGitHub

ui-patterns

Standardize Chrome Extension UIs with reusable pattern templates for popup, options page, and side panel designs.

1|Updated Dec 4, 2025
Search Tags:#accessibility#responsive design#ui-patterns#side panel#Chrome Extension#popup design
One-click install
npx skills add https://github.com/francanete/fran-marketplace --skill ui-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-patterns
Source: https://github.com/francanete/fran-marketplace/tree/main/chrome-extension-expert/skills/ui-patterns
Command: npx skills add https://github.com/francanete/fran-marketplace --skill ui-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It provides reusable UI patterns to speed up the design and development of Chrome Extension interfaces, ensuring consistency and accessibility.

Core Features & Use Cases

  • Popup UI patterns for design and behavior guidance
  • Side panel layouts with responsive behavior
  • Options page templates with clean forms and settings
  • Dark mode and accessibility ready defaults
  • Guidance on focus management and keyboard navigation

Quick Start

Apply the ui-patterns templates to create a popup, side panel, and options page with accessible, responsive design.

Frequently Asked Questions about ui-patterns

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

FAQPage Schema
How do I design a responsive Chrome Extension popup UI?▼

Design a responsive Chrome Extension popup by applying reusable UI pattern templates that include HTML/CSS guidance and accessibility practices. These templates standardize popup layouts while ensuring consistent behavior across different screen sizes.

What's the best way to add dark mode to an extension side panel?▼

Add dark mode to an extension side panel by using built-in UI pattern templates that come with dark mode defaults. These templates provide standardized layouts with responsive behavior, ensuring the side panel adapts correctly to user theme preferences.

How do I implement keyboard navigation and focus management in an options page?▼

Implement keyboard navigation and focus management in an options page by following documented UI templates with accessibility-ready defaults. The patterns provide specific guidance on focus management to ensure forms and settings are fully keyboard accessible.

Can I use these UI patterns for both popup and side panel layouts?▼

Yes, you can use these UI patterns for both popup and side panel layouts. The templates apply to popup, options page, and side panel design tasks, providing reusable layouts that ensure interface consistency and accessibility across different extension surfaces.

Do I need external dependencies to build accessible extension interfaces?▼

No external dependencies are needed to build accessible extension interfaces. The UI patterns rely on documented UI templates, HTML/CSS guidance, and accessibility practices directly, applying standard focus management and keyboard navigation without requiring additional libraries.

Related Skills

Explore More Design & Creative Skills→
aki77aki77

chrome-extensions

Develop and debug Chrome extensions using Manifest V3 and the Chrome Extensions API.

Community
Advanced
xenitV1xenitV1
230

browser-extension

Build Manifest V3 browser extensions with persistent storage and service workers.

Community
Advanced
Arcanada-oneArcanada-one
11

frontend-ui

Verify frontend UI rendering across themes, viewports, and localization contexts.

Official
Intermediate
damntreckydamntrecky
1

webawesome

Provide over 50 accessible web components for React, Vue, Angular, and Svelte.

Community
Basic