inboxbridge-admin-ui-change
Manages frontend changes and UI conventions for InboxBridge admin interfaces.
Install
mkdir -p .claude/skills/inboxbridge-admin-ui-change && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13346" && unzip -o skill.zip -d .claude/skills/inboxbridge-admin-ui-change && rm skill.zipInstalls to .claude/skills/inboxbridge-admin-ui-change
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use when changing the React admin UI, the /remote surface, translated copy, layout behavior, or frontend controller/component structure in InboxBridge. Focuses on frontend conventions, translation expectations, and frontend validation.Key capabilities
- →Preserve the split between top-level composition, controller hooks, and presentational components.
- →Route visible copy through the translation dictionary.
- →Keep the localized workspace-route model intact.
- →Preserve the lightweight /remote surface as a focused, mobile-first control plane.
- →Respect the existing workspace/layout model.
- →Keep auth/session browser hardening intact.
How it works
This skill guides changes to the InboxBridge admin UI by enforcing frontend conventions, translation expectations, and validation rules.
Inputs & outputs
When to use inboxbridge-admin-ui-change
- →Update admin dashboard UI
- →Manage frontend translations
- →Change remote control layout
About this skill
InboxBridge Admin UI Change
Start with admin-ui/README.md, CONTEXT.md, and the affected files under admin-ui/src.
Frontend conventions
- Preserve the split between top-level composition in
App.jsx, controller hooks insrc/lib, and presentational components insrc/components. - Keep visible copy routed through the translation dictionary. Avoid introducing raw English strings into authenticated UI or
/remote. - OAuth callback UX belongs to the frontend-owned
/oauth/...routes; keep the backend-owned/api/.../callbackendpoints focused on state validation, token exchange authority, and redirecting the browser into the React callback UI. - When changing localization or route behavior, keep the localized workspace-route model intact:
/remains the user workspace, explicit admin routes localize per current language, and language changes should rewrite explicit admin slugs immediately rather than waiting on deferred UI-preferences hydration. - Preserve the lightweight
/remotesurface as a focused, mobile-first control plane rather than a copy of the full dashboard. - Respect the existing workspace/layout model: collapsible sections, section cards, persisted preferences, and quick-setup behavior.
- Keep auth/session browser hardening intact, including the same-origin CSRF wrapper behavior for unsafe
/api/...writes. - Treat
PillboxInputas the shared multi-value picker for folder-like inputs. Keep its desktop floating-combobox behavior, real-touch native-picker behavior, keyboard navigation, and mobile touch-target sizing coherent across callers instead of re-implementing picker logic inside feature dialogs. - Preserve the current source-detail diagnostics surface in
EmailAccountListItem: operators can now inspect destination identity, POP/IMAP checkpoints, throttle state, IMAP IDLE watcher health, persisted poll audit fields, and explicit runtime alerts from the normal UI. - Match existing styling and UX patterns unless the user explicitly asks for a broader redesign.
Testing expectations
- Add or update Vitest coverage for behavior changes, especially component rendering, translated copy, controller flows, and regression-prone interactive states.
- When copy or localization changes, verify the affected keys exist across supported locales.
- When changing localized routing, workspace switching, or language selection behavior, update the
App.test.jsx/workspaceRoutes.test.jsregression coverage that protects localized path rewriting. - When changing
PillboxInput, cover both real-touch/native-picker expectations and desktop/mobile-emulation fallback behavior so desktop dev tools emulation does not accidentally regress into touch-only flows.
Validation
cd admin-ui && npm run test:runcd admin-ui && npm run build- If the task also touches the public GitHub Pages site under
site/, pair the admin-ui validation withnode site/test-config-generator.mjsbecause that lightweight check also guards the public locale catalog and site-specific UX rules. - If the task touched runnable services, finish with
docker compose up --build -dunless the user said not to.
Docs to update when relevant
- Frontend behavior or UX guidance:
admin-ui/README.md - Cross-chat product/runtime memory:
CONTEXT.md - Operator-facing setup or screenshots/copy-sensitive docs:
README.md
When not to use it
- →When the task does not involve changing the React admin UI.
- →When the task does not involve the /remote surface.
- →When the task does not involve translated copy, layout behavior, or frontend controller/component structure in InboxBridge.
Limitations
- →It only applies to the InboxBridge React admin UI.
- →It requires adherence to existing styling and UX patterns unless a redesign is explicitly requested.
- →It does not cover backend API changes beyond their interaction with the frontend.
How it compares
This skill provides specific guidelines for InboxBridge's React admin UI, ensuring consistency with established patterns rather than allowing arbitrary frontend development.
Compared to similar skills
inboxbridge-admin-ui-change side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| inboxbridge-admin-ui-change (this skill) | 0 | 4mo | No flags | Intermediate |
| screenshot-to-code | 204 | 2mo | No flags | Beginner |
| web-artifacts-builder | 49 | 3mo | Review | Intermediate |
| radix-ui-design-system | 33 | 2mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
screenshot-to-code
OneWave-AI
Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.
web-artifacts-builder
anthropics
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
radix-ui-design-system
sickn33
Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.
figma-integration
duongdev
Guides design-to-code workflow using Figma integration. Helps extract designs, analyze components, and generate implementation specs. Auto-activates when users mention Figma URLs, design implementation, component conversion, or design-to-code workflows. Works with /ccpm:planning:design-ui, design-approve, design-refine, and /ccpm:utils:figma-refresh commands.
3d-web-experience
davila7
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
tamagui
tamagui
Universal React UI framework for web and native. Use when building cross-platform apps with Tamagui, creating styled components with `styled()`, configuring design tokens/themes, using Tamagui UI components, or working with animations. Triggers: "tamagui", "styled()", "$token", "XStack/YStack", "useTheme", "@tamagui/*" imports, "createStyledContext", "variants".