Examples/Role-based Presets

Role-based presets

Ship sensible menus for QA, PM, Designer, and Developer without rebuilding item lists. Coming-soon actions remain visible with a badge and are disabled so users know what’s next.

Drop-in defaults

Presets return menu items, screenshot defaults, metadata hints, and theme tweaks per role. Coming-soon items render with a badge and are disabled by default.

Prefer a leaner menu? Pass includeComingSoon: false or override any field via overrides.

Usage

app/providers.tsx
'use client';
import { AnyclickProvider, createPresetMenu } from '@ewjdev/anyclick-react';
import { createHttpAdapter } from '@ewjdev/anyclick-github';
const adapter = createHttpAdapter({ endpoint: '/api/feedback' });
// Pull a preset
const qaPreset = createPresetMenu('qa');
export function Providers({ children }: { children: React.ReactNode }) {
return (
<AnyclickProvider
adapter={adapter}
menuItems={qaPreset.menuItems}
screenshotConfig={qaPreset.screenshotConfig}
metadata={qaPreset.metadata}
theme={qaPreset.theme}
>
{children}
</AnyclickProvider>
);
}

QA

Preset

Right-click inside this card to see the QA menu.

  • Bug / defect, UX papercut, repro steps
  • Performance trace (coming soon badge)
  • Screenshots + console/network metadata

PM

Preset

Right-click inside this card to see the PM menu.

  • Feature idea, UX papercut, customer quote
  • Impact sizing (coming soon badge)
  • Lighter screenshots, sentiment metadata

Designer

Preset

Right-click inside this card to see the Designer menu.

  • Visual bug, accessibility, copy/tone
  • Motion glitch (coming soon badge)
  • High-padding screenshots, contrast metadata

Developer

Preset

Right-click inside this card to see the Developer menu.

  • Bug, refactor request
  • Diagnostics submenu: console/network traces (coming soon) + Copy selector
  • Debug-friendly highlight colors

Chrome default

Preset

Right-click inside this card to see the Chrome default menu.

  • Reload page, Print…, Search Google, Share…, Inspect
  • Native-like styling with dark Chrome palette
  • Uses real browser actions and falls back to clipboard for share

Coming-soon badges

Items marked as coming soon stay visible in the menu with a badge and are disabled. Users see the roadmap; your backend stays clean.