myoperator-design

This skill generates production-ready React/Tailwind CSS code that matches the myOperator design system aesthetic. All generated code is standalone — it does not require the myoperator-ui package, but visually matches its components.

The user provides UI requirements: a component, page, form, dashboard, or interface to build. They may include context about the purpose, data, or specific features.

Design Philosophy

myOperator's design language is professional, clean, and purposeful:

• •Blue-gray primary palette (#343E55) — sophisticated and business-appropriate
• •Turquoise accent (#2BBCCA) — fresh, modern brand identity
• •Clean typography with Source Sans Pro — readable and professional
• •Subtle interactions — focus rings, hover states, smooth transitions
• •Semantic color usage — success/error/warning states are clear and consistent

The aesthetic is enterprise SaaS — trustworthy, efficient, uncluttered. NOT flashy, NOT playful, NOT experimental.

Brand Color Usage (Important)

Turquoise (#2BBCCA) is ONLY for highlighting interactive elements:

• •Focus rings on inputs
• •Active/selected states (toggle switches, nav items)
• •Interactive badges (e.g., "Live" indicator)
• •Links and clickable text
• •Brand logo accent

DO NOT use turquoise for:

• •Charts, graphs, or data visualizations
• •Decorative elements
• •Large background areas
• •Non-interactive content

For charts/graphs, use the primary blue-gray (--semantic-primary / #343E55) as the default data color. Use semantic state colors for meaning (success green for positive trends, error red for negative).

Color System

Primitive Colors (CSS Variables)

Include these CSS custom properties in generated code. Use the semantic tokens below for actual styling.

:root {
  /* Base */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Neutral (Gray) */
  --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F5F5F5;
  --color-neutral-200: #E9EAEB;
  --color-neutral-300: #D5D7DA;
  --color-neutral-400: #A4A7AE;
  --color-neutral-500: #717680;
  --color-neutral-600: #535862;
  --color-neutral-700: #414651;
  --color-neutral-800: #252B37;
  --color-neutral-900: #181D27;

  /* Primary (Blue Gray) */
  --color-primary-50: #EBECEE;
  --color-primary-100: #C0C3CA;
  --color-primary-200: #A2A6B1;
  --color-primary-300: #777E8D;
  --color-primary-400: #5D6577;
  --color-primary-500: #343E55;
  --color-primary-600: #2F384D;
  --color-primary-700: #252C3C;
  --color-primary-800: #1D222F;
  --color-primary-900: #161A24;

  /* Secondary (Turquoise) - Brand accent */
  --color-secondary-50: #EAF8FA;
  --color-secondary-100: #BDEAEF;
  --color-secondary-200: #9DE0E7;
  --color-secondary-300: #71D2DB;
  --color-secondary-400: #55C9D5;
  --color-secondary-500: #2BBCCA;
  --color-secondary-600: #27ABB8;
  --color-secondary-700: #1F858F;

  /* Error (Red) */
  --color-error-50: #FEF3F2;
  --color-error-100: #FEE4E2;
  --color-error-300: #FDA29B;
  --color-error-500: #F04438;
  --color-error-600: #D92D20;
  --color-error-700: #B42318;

  /* Warning (Amber) */
  --color-warning-50: #FFFAEB;
  --color-warning-100: #FEF0C7;
  --color-warning-300: #FEC84B;
  --color-warning-500: #F79009;
  --color-warning-700: #B54708;

  /* Success (Green) */
  --color-success-50: #ECFDF3;
  --color-success-100: #DCFAE6;
  --color-success-300: #75E0A7;
  --color-success-500: #17B26A;
  --color-success-700: #067647;

  /* Info (Blue) */
  --color-info-50: #ECF1FB;
  --color-info-100: #C4D4F2;
  --color-info-500: #4275D6;
  --color-info-700: #2F5398;
}

Semantic Tokens

Map purpose to color. ALWAYS use semantic tokens, not raw colors:

:root {
  /* Primary UI */
  --semantic-primary: var(--color-primary-500);           /* #343E55 */
  --semantic-primary-hover: var(--color-primary-600);     /* #2F384D */
  --semantic-primary-surface: var(--color-primary-50);    /* #EBECEE */

  /* Brand Accent */
  --semantic-brand: var(--color-secondary-500);           /* #2BBCCA */
  --semantic-brand-hover: var(--color-secondary-700);     /* #1F858F */
  --semantic-brand-surface: var(--color-secondary-50);    /* #EAF8FA */

  /* Backgrounds */
  --semantic-bg-primary: var(--color-white);
  --semantic-bg-ui: var(--color-neutral-100);             /* #F5F5F5 */
  --semantic-bg-hover: var(--color-neutral-300);          /* #D5D7DA */

  /* Text */
  --semantic-text-primary: var(--color-neutral-900);      /* #181D27 */
  --semantic-text-secondary: var(--color-primary-500);    /* #343E55 */
  --semantic-text-muted: var(--color-neutral-500);        /* #717680 */
  --semantic-text-placeholder: var(--color-primary-200);  /* #A2A6B1 */
  --semantic-text-link: var(--color-info-500);            /* #4275D6 */
  --semantic-text-inverted: var(--color-white);

  /* Borders */
  --semantic-border-primary: var(--color-primary-500);
  --semantic-border-input: var(--color-neutral-200);
  --semantic-border-input-focus: var(--color-secondary-500);
  --semantic-border-layout: var(--color-neutral-200);

  /* States */
  --semantic-error-primary: var(--color-error-500);
  --semantic-error-surface: var(--color-error-50);
  --semantic-success-primary: var(--color-success-500);
  --semantic-success-surface: var(--color-success-50);
  --semantic-warning-primary: var(--color-warning-500);
  --semantic-warning-surface: var(--color-warning-50);
}

Typography System

Font: 'Source Sans Pro', sans-serif (import from Google Fonts)

Body Text Convention: Default body text is 16px (not 14px). Use 14px only for secondary/helper text. 12px is reserved for rare cases like tiny labels or metadata.

Type Scale

Text Colors

• •primary: --semantic-text-primary — Main content
• •secondary: --semantic-text-secondary — Emphasized text
• •muted: --semantic-text-muted — Helper text, descriptions
• •placeholder: --semantic-text-placeholder — Input placeholders
• •link: --semantic-text-link — Clickable links
• •inverted: --semantic-text-inverted — On dark backgrounds
• •error: --semantic-error-primary — Error messages
• •success: --semantic-success-primary — Success messages

Component Patterns

Buttons

Variants:

• •primary — Blue-gray background, white text. Main actions.
• •outline — Transparent with border. Secondary actions.
• •secondary — Light surface background. Tertiary actions.
• •ghost — No background until hover. Minimal actions.
• •destructive — Red background. Dangerous actions.
• •dashed — Dashed border. "Add" actions.
• •link — Underline on hover. Text links.

Sizes:

• •sm — py-2 px-3, text-xs
• •default — py-2.5 px-4, text-sm
• •lg — py-3 px-6, text-sm

Pattern:

<button className="inline-flex items-center justify-center gap-2 rounded text-sm font-medium
  bg-[var(--semantic-primary)] text-[var(--semantic-text-inverted)]
  hover:bg-[var(--semantic-primary-hover)]
  focus:outline-none focus:ring-2 focus:ring-[var(--semantic-primary)] focus:ring-offset-2
  disabled:opacity-50 disabled:pointer-events-none
  transition-all duration-200 py-2.5 px-4">
  Button Text
</button>

Inputs

States: default, error, disabled

Pattern:

<input className="h-10 w-full rounded px-4 py-2.5 text-sm
  bg-[var(--semantic-bg-primary)] text-[var(--semantic-text-primary)]
  border border-[var(--semantic-border-input)]
  placeholder:text-[var(--semantic-text-placeholder)]
  focus:outline-none focus:border-[var(--semantic-border-input-focus)]
  focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]
  disabled:opacity-50 disabled:bg-[var(--color-neutral-50)]
  transition-all" />

Cards

Pattern:

<div className="rounded-lg border border-[var(--semantic-border-layout)]
  bg-[var(--semantic-bg-primary)] p-6 shadow-sm">
  {/* Card content */}
</div>

Badges

Variants: active (green), failed (red), disabled (gray), default, outline

Pattern:

<span className="inline-flex items-center rounded-full px-3 py-1 text-sm font-medium
  bg-[var(--semantic-success-surface)] text-[var(--semantic-success-primary)]">
  Active
</span>

Dialogs/Modals

Sizes: sm (max-w-sm), default (max-w-lg), lg (max-w-2xl), xl (max-w-4xl)

Pattern:

{/* Overlay */}
<div className="fixed inset-0 z-50 bg-black/50" />

{/* Modal */}
<div className="fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2
  w-full max-w-lg rounded-lg border border-[var(--semantic-border-layout)]
  bg-[var(--semantic-bg-primary)] p-6 shadow-lg">
  {/* Content */}
</div>

Tables

Pattern:

<table className="w-full text-sm">
  <thead>
    <tr className="border-b border-[var(--semantic-border-layout)]">
      <th className="px-4 py-3 text-left font-semibold text-[var(--semantic-text-secondary)]">
        Header
      </th>
    </tr>
  </thead>
  <tbody>
    <tr className="border-b border-[var(--semantic-border-layout)]
      hover:bg-[var(--semantic-bg-ui)] transition-colors">
      <td className="px-4 py-3 text-[var(--semantic-text-primary)]">Cell</td>
    </tr>
  </tbody>
</table>

Implementation Guidelines

1. •Always include CSS variables — Output a :root block with required tokens
2. •Use semantic tokens — Never use raw hex colors in component code
3. •Import the font — Include @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
4. •Focus states — All interactive elements need visible focus indicators
5. •Transitions — Use transition-all duration-200 for smooth interactions
6. •Disabled states — opacity-50 + pointer-events-none
7. •Spacing — Use consistent padding: p-4 (cards), py-2.5 px-4 (buttons), px-4 py-2.5 (inputs)
8. •Border radius — rounded (4px) for small elements, rounded-lg (8px) for cards/modals

Code Structure

Generate complete, runnable code:

// styles.css (or in <style> tag)
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');

:root {
  /* Include all required tokens */
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  background: var(--semantic-bg-primary);
  color: var(--semantic-text-primary);
}

// Component.jsx
export function Component() {
  return (
    // JSX using Tailwind classes with CSS variable values
  );
}

What NOT to Do

• •No arbitrary colors — Always use CSS variables
• •No generic fonts — Always use Source Sans Pro
• •No flashy animations — Keep it subtle and professional
• •No heavy shadows — Use shadow-sm or shadow-lg sparingly
• •No rounded-full on containers — Only on badges and avatars
• •No neon/bright accent colors — Stick to the turquoise brand color
• •No turquoise in charts/graphs — Use primary blue-gray for data visualization, semantic colors for meaning

Reference

For detailed token values and component examples, see references/design-tokens.md.

Component Catalog

Auto-generated from components.yaml and component metadata. 34 components across 7 categories.

Quick Reference

Core — Essential UI primitives

Button

A customizable button component with variants, sizes, and icons. Supports loading states and can render as a child element using Radix Slot.

Install: npx myoperator-ui add button

Variants: default, destructive, outline, secondary, ghost, link, dashed (default: default) Sizes: default, sm, lg, icon, icon-sm, icon-lg (default: default)

Examples:

• •Basic Button: Simple button with default styling

<Button>Click me</Button>

• •Button with Icons: Buttons with left or right icons

import { Mail } from "lucide-react"

<Button leftIcon={<Mail />}>Send Email</Button>

• •Loading State: Button with loading spinner

<Button loading loadingText="Saving...">Save</Button>

Badge

A status badge component with active, failed, disabled, outline, secondary, and destructive variants. Supports asChild for rendering as links.

Install: npx myoperator-ui add badge

Variants: active, failed, disabled, default, secondary, outline, destructive (default: default) Sizes: default, sm, lg (default: default)

Examples:

• •Status Badges: Badges for different status states

<Badge variant="active">Active</Badge>
<Badge variant="failed">Failed</Badge>

• •Badge as Link: Badge rendered as a link

<Badge asChild><a href="/status">View Status</a></Badge>

Typography

A semantic typography component with kind, variant, color, alignment, and truncation support

Install: npx myoperator-ui add typography

Form — Form inputs and controls

Input

A flexible input component for text entry with state variants. Supports default and error states.

Install: npx myoperator-ui add input

States: default, error (default: default)

Examples:

• •Basic Input: Simple input with placeholder

<Input placeholder="Enter your email" />

Select

A composable select dropdown built with Radix UI primitives. Includes SelectTrigger, SelectContent, SelectItem, and more sub-components.

Install: npx myoperator-ui add select

States: default, error (default: default)

Examples:

• •Basic Select: Simple select dropdown

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
  </SelectContent>
</Select>

Checkbox

A tri-state checkbox component built on Radix UI with label support. Supports checked, unchecked, and indeterminate states.

Install: npx myoperator-ui add checkbox

Sizes: default, sm, lg (default: default)

Examples:

• •Basic Checkbox: Simple controlled checkbox

<Checkbox checked={isEnabled} onCheckedChange={setIsEnabled} />

• •Checkbox with Label: Checkbox with label

<Checkbox label="Accept terms and conditions" />

Switch

A switch component built on Radix UI for boolean inputs with on/off states. Supports labels and multiple sizes.

Install: npx myoperator-ui add switch

Sizes: default, sm, lg (default: default)

Examples:

• •Basic Switch: Simple controlled switch

<Switch checked={isEnabled} onCheckedChange={setIsEnabled} />

• •Switch with Label: Switch with label

<Switch label="Enable notifications" />

TextField

A comprehensive text field component with label, icons, prefix/suffix, validation states, character count, and loading state.

Install: npx myoperator-ui add text-field

States: default, error (default: default)

Examples:

• •Basic TextField: Text field with label and required indicator

<TextField label="Email" placeholder="Enter your email" required />

• •TextField with Error: Text field showing error state

<TextField label="Username" error="Username is already taken" />

SelectField

A form-ready select component with label, helper text, error handling, and grouped options support.

Install: npx myoperator-ui add select-field

Examples:

• •Basic SelectField: Select field with label and options

<SelectField
  label="Country"
  placeholder="Select a country"
  options={[
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
  ]}
  required
/>

MultiSelect

A multi-select component with tags display, search functionality, and validation states. Supports maximum selection limits.

Install: npx myoperator-ui add multi-select

States: default, error (default: default)

Examples:

• •Basic MultiSelect: Multi-select with tag display

<MultiSelect
  label="Skills"
  placeholder="Select skills"
  options={[
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue' },
  ]}
  onValueChange={(values) => console.log(values)}
/>

ReadableField

A read-only field with copy-to-clipboard functionality. Supports secret mode for sensitive data like API keys.

Install: npx myoperator-ui add readable-field

Data — Data display components

Table

A composable table component with size variants, loading/empty states, sticky columns, and sorting support.

Install: npx myoperator-ui add table

Sizes: sm, md, lg (default: md)

Examples:

• •Basic Table: Simple table with header and body

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>John Doe</TableCell>
      <TableCell><Badge variant="active">Active</Badge></TableCell>
    </TableRow>
  </TableBody>
</Table>

Overlay — Popups, modals, menus

Dialog

A modal dialog component built on Radix UI Dialog with size variants and animations

Install: npx myoperator-ui add dialog

DropdownMenu

A dropdown menu component for displaying actions and options. Built on Radix UI with full keyboard navigation support.

Install: npx myoperator-ui add dropdown-menu

Examples:

• •Basic Dropdown: Simple dropdown with menu items

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Logout</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Tooltip

A popup that displays information related to an element when hovered or focused

Install: npx myoperator-ui add tooltip

DeleteConfirmationModal

A confirmation modal requiring text input to confirm deletion

Install: npx myoperator-ui add delete-confirmation-modal Requires: dialog, button, input (auto-installed)

ConfirmationModal

A simple confirmation modal for yes/no decisions

Install: npx myoperator-ui add confirmation-modal Requires: dialog, button (auto-installed)

FormModal

A reusable modal component for forms with consistent layout

Install: npx myoperator-ui add form-modal Requires: dialog, button (auto-installed)

Feedback — Status and notifications

Tag

A tag component for event labels with optional bold label prefix. Rounded rectangle tags for categorization.

Install: npx myoperator-ui add tag

Variants: default, primary, secondary, success, warning, error (default: default) Sizes: default, sm, lg (default: default)

Examples:

• •Basic Tags: Simple tag labels

<Tag>Category</Tag>
<Tag variant="success">Success</Tag>

• •Tag with Label: Tags with bold label prefix

<Tag label="Status:">Active</Tag>

Alert

A dismissible alert component for notifications, errors, warnings, and success messages with icons, actions, and controlled visibility

Install: npx myoperator-ui add alert

Toast

A toast notification component for displaying brief messages at screen corners, with auto-dismiss and stacking support

Install: npx myoperator-ui add toast

Spinner

A loading spinner component with customizable size and color variants for indicating progress

Install: npx myoperator-ui add spinner

Skeleton

A placeholder loading component with pulse animation for content loading states

Install: npx myoperator-ui add skeleton

Layout — Layout and structure components

Accordion

An expandable/collapsible accordion component with single or multiple mode support.

Install: npx myoperator-ui add accordion

Types: single, multiple (default: multiple) Variants: default, bordered (default: default)

Examples:

• •Basic Accordion: Basic accordion with sections

<Accordion>
  <AccordionItem value="item-1">
    <AccordionTrigger>Section 1</AccordionTrigger>
    <AccordionContent>Content for section 1</AccordionContent>
  </AccordionItem>
</Accordion>

PageHeader

A page header component with icon, title, description, and action buttons

Install: npx myoperator-ui add page-header

Custom — Multi-file complex components

EventSelector

A component for selecting webhook events with groups, categories, and tri-state checkboxes

Install: npx myoperator-ui add event-selector Requires: checkbox, accordion (auto-installed) Type: Multi-file component

KeyValueInput

A component for managing key-value pairs with validation and duplicate detection

Install: npx myoperator-ui add key-value-input Requires: button, input (auto-installed) Type: Multi-file component

ApiFeatureCard

A card component for displaying API features with icon, title, description, and action button

Install: npx myoperator-ui add api-feature-card Requires: button (auto-installed) Type: Multi-file component

EndpointDetails

A component for displaying API endpoint details with copy-to-clipboard and secret field support

Install: npx myoperator-ui add endpoint-details Requires: readable-field (auto-installed) Type: Multi-file component

AlertConfiguration

A configuration card for alert settings with inline editing modal

Install: npx myoperator-ui add alert-configuration Requires: button, form-modal, select (auto-installed) Type: Multi-file component

AutoPaySetup

A setup wizard component for configuring automatic payments with payment method selection

Install: npx myoperator-ui add auto-pay-setup Requires: accordion, button (auto-installed) Type: Multi-file component

BankDetails

A component for displaying bank account details with copy-to-clipboard functionality

Install: npx myoperator-ui add bank-details Requires: accordion (auto-installed) Type: Multi-file component

PaymentSummary

A component for displaying payment summary with line items and total

Install: npx myoperator-ui add payment-summary Requires: tooltip (auto-installed) Type: Multi-file component

WalletTopup

A component for wallet top-up with amount selection and coupon support

Install: npx myoperator-ui add wallet-topup Requires: accordion, button, input (auto-installed) Type: Multi-file component