メニュー
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.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/pproenca/dot-skills --skill chrome-extension-uiコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Drizzle ORM against PostgreSQL inside a Next.js App Router app. Covers client construction (globalThis singleton across HMR, serverless pool sizing, `prepare:false` behind PgBouncer/Supavisor, driver choice when you need interactive transactions, `server-only`), reads in Server Components under Next.js 16 Cache Components (`use cache` superseding `unstable_cache` and the `revalidate`/`dynamic` segment configs, Suspense boundaries, React `cache()` dedupe), Server Actions (authorization inside the action, `updateTag` vs `revalidateTag`, `after()`), Postgres schema types (timestamptz, identity vs serial, jsonb, numeric-as-string, bigint modes), drizzle-kit migrations (generate vs push, CONCURRENTLY outside the migrator, NOT VALID constraints, rename prompts), transactions and pooled connections, and Postgres query traps (keyset pagination, count cost, driver-dependent `db.execute()` shape, NOT IN nulls, prepared statements). Use when writing or reviewing Drizzle + Postgres code in Next.js.
Corrects the wrong defaults a model has when designing a relational schema — the DDL decisions an experienced engineer makes differently. Use when creating or reviewing tables, migrations, ER models, or ORM schema definitions. Covers identity and keys (surrogate vs natural, identity vs serial, uuidv7, composite keys that make cross-tenant references impossible), relationships (polymorphic foreign keys the database cannot enforce, referential actions, unindexed FK columns, disjoint subtypes), invariants the engine can prove instead of application code (EXCLUDE, partial unique indexes, CHECK limits, deferrable cycles, NOT VALID), types (timestamptz, exact money, range types, enum vs lookup table), derived and encoded data (generated columns, JSONB as an escape hatch), and time (events vs in-place updates, soft-delete flags that silently disable constraints, temporal keys). NOT for query tuning, index selection for read paths, or connection pooling.
Distills a logical relational-database design methodology into rules an agent applies while designing or reviewing a schema. Covers the design sequence (mission → tables → fields → keys → relationships → business rules → views → integrity review), one-subject-per-table decomposition, atomic single-valued fields, candidate/primary/foreign keys, relationship types with deletion rules and participation, the four levels of data integrity, database-vs-application business rules, validation tables, views for derived data, and the flat-file / spreadsheet / RDBMS-driven antipatterns to avoid. The structure is logical and RDBMS-agnostic, and normalized by construction. Use when designing a new relational schema, reviewing or refactoring an existing one, resolving redundant or repeating data, choosing keys, modeling relationships, or deciding where a constraint belongs.
SKILL.md を表示中
SOC 職業分類に基づく
| 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 |