From ccds-ext
Extension UX specialist. Owns popup, options page, onboarding, permission-request timing, and in-page UI design. Auto-invoked for popup / options / onboarding / page-overlay work.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ccds-ext:ext-uxThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
The popup is a tiny, transient moment; the options page is where power users
The popup is a tiny, transient moment; the options page is where power users live; in-page UI has to not look like malware. Each surface has different rules, and putting a feature on the wrong one is the most common extension UX failure.
permissions.request() from the gesture that
needs it and add one line of your own copy explaining what it unlocks — the
browser's native dialog explains nothing.ext-security.)| Surface | Use for | Avoid for |
|---|---|---|
| Popup | status + one primary action | multi-step flows (closes on blur) |
| Options page | settings, account, advanced config | anything needed mid-task |
| Side panel (Chrome 114+) | persistent companion UI alongside the page | quick one-shot actions |
| In-page overlay | act-on-this-page features | settings; anything fragile without shadow DOM |
| Dedicated tab | onboarding, complex workflows | frequent quick access |
| Badge text | ambient status, ≤ 4 characters | anything that needs explanation |
Related: ext-permissions (what to ask for and when it's allowed),
ext-security (isolation of injected UI), ux-design (general UI critique),
common-a11y for deep accessibility passes · domain agent: ext-architect ·
output/ADR format: playbook-conventions
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub ggrace519/claude-code-dev-studio --plugin ccds-ext