菜单
Chrome Extensions UX/UI design and implementation guidelines for popups, side panels, content scripts, and options pages. Triggers on tasks involving browser extension UI, manifest v3, chrome APIs.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
Redis performance optimization and best practices. Use this skill when working with Redis data structures, Redis Query Engine (RQE), vector search with RedisVL, semantic caching with LangCache, or optimizing Redis performance.
TanStack Query (React Query) best practices for data fetching, caching, mutations, and server state management. Activate when building data-driven React applications with server state.
Expert guidelines for Chrome extension development with Manifest V3, covering security, performance, and best practices
Master ES6+ features including async/await, destructuring, spread operators, arrow functions, promises, modules, iterators, generators, and functional programming patterns for writing clean, efficient JavaScript code. Use when refactoring legacy code, implementing modern patterns, or optimizing JavaScript applications.
Semantic HTML5, CSS custom properties, responsive design, and performance optimization for web development
| name | chrome-extension-ui |
| description | Chrome Extensions UX/UI design and implementation guidelines for popups, side panels, content scripts, and options pages. Triggers on tasks involving browser extension UI, manifest v3, chrome APIs. |
Comprehensive UX/UI design guide for Chrome Extensions, optimized for Manifest V3. Contains 42 rules across 8 categories, prioritized by impact to guide extension UI development and code review.
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Component Selection | CRITICAL | comp- |
| 2 | Accessibility & Navigation | CRITICAL | access- |
| 3 | Popup Design | HIGH | popup- |
| 4 | Side Panel UX | HIGH | panel- |
| 5 | Content Script UI | MEDIUM-HIGH | inject- |
| 6 | Visual Feedback | MEDIUM | feedback- |
| 7 | Options & Settings | MEDIUM | options- |
| 8 | Icons & Branding | LOW-MEDIUM | brand- |
comp-popup-vs-sidepanel - Choose Side Panel for Persistent Taskscomp-content-script-ui - Use Content Scripts for In-Page UIcomp-single-purpose - Design for Single Purposecomp-minimal-permissions - Request Minimal Permissionscomp-action-tooltip - Provide Descriptive Action Tooltipsaccess-keyboard-navigation - Enable Complete Keyboard Navigationaccess-focus-visible - Maintain Visible Focus Indicatorsaccess-aria-labels - Use ARIA Labels for Icon-Only Buttonsaccess-color-contrast - Ensure Sufficient Color Contrastaccess-focus-trap - Avoid Keyboard Focus Trapsaccess-semantic-html - Use Semantic HTML Elementspopup-size-constraints - Design Within Popup Size Limitspopup-instant-render - Render Popup Content Instantlypopup-primary-action - Make the Primary Action Obviouspopup-auto-close - Handle Popup Auto-Close Gracefullypopup-external-js - Keep JavaScript in External Filespopup-dynamic-switch - Use Dynamic Popups for State-Based UIpanel-non-distracting - Design Non-Distracting Side Panelspanel-tab-vs-window - Choose Tab-Specific vs Window-Wide Panelspanel-responsive-width - Design for Variable Panel Widthspanel-page-context - Sync Panel Content with Page Contextpanel-lazy-sections - Lazy Load Panel Sectionsinject-shadow-dom - Use Shadow DOM for Style Isolationinject-z-index - Use Maximum Z-Index for Overlaysinject-document-ready - Inject UI After DOM Readyinject-unique-ids - Use Unique IDs to Prevent Conflictsinject-cleanup - Clean Up Injected Elements on Removalfeedback-loading-states - Show Loading States for Async Operationsfeedback-error-messages - Write Actionable Error Messagesfeedback-badge-status - Use Badge for At-a-Glance Statusfeedback-success-confirmation - Confirm Successful Actionsfeedback-notifications - Use Notifications Sparinglyfeedback-progress-indication - Show Progress for Long Operationsoptions-embedded-page - Use Embedded Options for Simple Settingsoptions-sync-storage - Sync Settings Across Devicesoptions-auto-save - Auto-Save Settings on Changeoptions-sensible-defaults - Provide Sensible Default Settingsbrand-icon-sizes - Provide All Required Icon Sizesbrand-distinctive-icon - Design a Distinctive Toolbar Iconbrand-badge-text - Keep Badge Text Under 4 Charactersbrand-consistent-styling - Maintain Consistent Visual Stylebrand-web-store-assets - Create Quality Web Store AssetsRead individual reference files for detailed explanations and code examples:
| File | Description |
|---|---|
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |