polpo-dashboard

name: polpo-dashboard description: "POLPO Trading Bot Dashboard - Custom skill for UI/UX design, React performance, and Tailwind CSS implementation. Synthesizes ui-ux-pro-max, vercel-react-best-practices, and web-design-guidelines for trading dashboard excellence. Use when: designing/building/reviewing POLPO dashboard components, implementing real-time trading data, optimizing performance, ensuring accessibility, or applying octopus brand theme." metadata: author: polpo-team version: "1.0.0" project: "POLPO - Polymarket Trading Bot Dashboard" stack: "React + TypeScript + Vite + Tailwind CSS" theme: "Octopus (8 tentacles) + Ocean + Fintech"

POLPO Dashboard - Custom Skill

🐙 The Octopus That Catches Money from Polymarket

Comprehensive design and development guide for the POLPO trading bot dashboard. This skill synthesizes best practices from global skills and applies them specifically to our trading dashboard use case.

Table of Contents

1. When to Use This Skill
2. Global Skills Integration
3. POLPO Brand Identity
4. Technology Stack
5. Design System
6. Component Patterns
7. Performance Guidelines
8. Accessibility Requirements
9. Development Workflow
10. Pre-Delivery Checklist

When to Use This Skill

Apply these guidelines when:

• 🎨 Designing new UI components or pages
• 🏗️ Building/refactoring React components
• 📊 Implementing charts or data visualizations
• ⚡ Optimizing performance (real-time data)
• ♿ Ensuring accessibility compliance
• 🎭 Applying POLPO brand theme
• 🔍 Reviewing code for UX/performance issues
• 📱 Making responsive/mobile-friendly

Global Skills Integration

1. ui-ux-pro-max (Design Intelligence)

Location: C:\Users\ginoj\.agents\skills\ui-ux-pro-max\

When to Use:

• Choosing color palettes and typography
• Selecting UI styles (glassmorphism, minimalism)
• Implementing charts for trading data
• Ensuring accessibility (contrast, focus states)
• Animation timing and performance

How to Use:

# Generate design system for POLPO
python C:\Users\ginoj\.agents\skills\ui-ux-pro-max\scripts\search.py "trading dashboard fintech crypto dark mode professional" --design-system -p "POLPO" -f markdown

# Get chart recommendations
python C:\Users\ginoj\.agents\skills\ui-ux-pro-max\scripts\search.py "real-time financial data" --domain chart

# Get UX best practices
python C:\Users\ginoj\.agents\skills\ui-ux-pro-max\scripts\search.py "animation accessibility" --domain ux

# Get Tailwind stack guidelines
python C:\Users\ginoj\.agents\skills\ui-ux-pro-max\scripts\search.py "responsive layout" --stack html-tailwind

Key Patterns to Apply:

• ✅ 4.5:1 minimum contrast ratio
• ✅ 44x44px minimum touch targets
• ✅ 150-300ms animation duration
• ✅ Use transform/opacity (not width/height)
• ✅ prefers-reduced-motion support
• ❌ NO emoji icons (use SVG)

2. vercel-react-best-practices (Performance)

Location: C:\Users\ginoj\.agents\skills\vercel-react-best-practices\

When to Use:

• Fetching real-time trading data
• Optimizing table re-renders
• Code splitting by tabs
• Memoizing expensive calculations
• Preventing unnecessary re-renders

Critical Rules for POLPO:

Data Fetching (CRITICAL)

// ❌ BAD: Sequential waterfalls
const stats = await fetchStats();
const bets = await fetchBets();
const markets = await fetchMarkets();

// ✅ GOOD: Parallel fetching
const [stats, bets, markets] = await Promise.all([
  fetchStats(),
  fetchBets(),
  fetchMarkets()
]);

Re-render Optimization (CRITICAL for tables)

// ❌ BAD: Re-renders entire table on every update
function BetsTable({ bets }) {
  return bets.map(bet => <BetRow bet={bet} />);
}

// ✅ GOOD: Memoized rows
const BetRow = React.memo(({ bet }) => {
  // Only re-renders if bet changes
});

function BetsTable({ bets }) {
  return bets.map(bet => <BetRow key={bet._id} bet={bet} />);
}

Bundle Optimization

// ❌ BAD: Load all tabs upfront
import SettingsPage from './SettingsPage';
import LogsPage from './LogsPage';

// ✅ GOOD: Lazy load tabs
const SettingsPage = lazy(() => import('./SettingsPage'));
const LogsPage = lazy(() => import('./LogsPage'));

Key Rules:

• async-parallel - Use Promise.all() for independent API calls
• rerender-memo - Memoize table rows and expensive components
• bundle-dynamic-imports - Lazy load tabs/modals
• client-swr-dedup - Use SWR for real-time data deduplication

3. web-design-guidelines (Accessibility)

Location: C:\Users\ginoj\.agents\skills\web-design-guidelines\

When to Use:

• Reviewing UI for accessibility issues
• Ensuring keyboard navigation works
• Adding ARIA labels
• Testing with screen readers

How to Use:

# Fetch latest guidelines and review files
# (Fetches from: https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md)

Key Requirements:

• ✅ All interactive elements have focus states
• ✅ Form inputs have associated labels
• ✅ Icon-only buttons have aria-label
• ✅ Tab order matches visual order
• ✅ Color is not the only indicator

POLPO Brand Identity

Concept: The Intelligent Octopus 🐙

Metaphor: 8 tentacles = 8 capabilities

1. Market Scanning - Continuously monitors Polymarket
2. Price Analysis - Evaluates opportunities
3. Risk Management - Stop-loss and profit-taking
4. Position Tracking - Real-time portfolio monitoring
5. Auto-Trading - Autonomous bet placement
6. Data Visualization - Charts and insights
7. Settings Control - Configurable parameters
8. Activity Logging - Complete audit trail

Personality:

• 🧠 Intelligent - Smart, data-driven decisions
• 🌊 Fluid - Smooth animations, adaptive UI
• 💼 Professional - Serious trading tool
• 🎯 Precise - Accurate, reliable data
• 🌙 Nocturnal - Dark mode optimized (trading happens 24/7)

Visual Theme: Ocean + Fintech

Inspiration:

• Deep ocean depths (dark backgrounds)
• Bioluminescence (glowing accents)
• Fluid tentacle movements (smooth animations)
• Underwater glass (glassmorphism)
• Electric currents (cyan highlights)

Technology Stack

Core Technologies

• Framework: React 18 + TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS v3+ (migrating from Vanilla CSS)
• State: React hooks (useState, useMemo, useCallback)
• Data Fetching: Native fetch + SWR (planned)
• Charts: Recharts or Chart.js (TBD)
• Icons: Lucide React (NO emojis!)

Tailwind Configuration

// tailwind.config.js
module.exports = {
  darkMode: 'class', // Enable dark mode
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        // POLPO Ocean Theme
        ocean: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          950: '#0a1929', // Deep ocean (primary bg)
        },
        tentacle: {
          cyan: '#00d4ff',    // Electric cyan (accents)
          teal: '#06b6d4',    // Tentacle teal (secondary)
          purple: '#a855f7',  // Bioluminescent purple (CTAs)
        },
        trading: {
          profit: '#22c55e',  // Green (wins)
          loss: '#ef4444',    // Red (losses)
          pending: '#f59e0b', // Amber (pending)
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
      animation: {
        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
        'shimmer': 'shimmer 2s linear infinite',
      },
      keyframes: {
        shimmer: {
          '0%': { backgroundPosition: '-1000px 0' },
          '100%': { backgroundPosition: '1000px 0' },
        },
      },
    },
  },
  plugins: [],
};

Design System

Color Palette

Primary Colors

/* Backgrounds */
--bg-primary: #0a1929      /* Deep ocean */
--bg-secondary: #0f172a    /* Midnight */
--bg-card: #1e293b         /* Slate card */
--bg-hover: #334155        /* Slate hover */

/* Accents */
--accent-cyan: #00d4ff     /* Electric highlights */
--accent-purple: #a855f7   /* CTAs, branding */
--accent-teal: #06b6d4     /* Secondary accent */

/* Semantic */
--profit: #22c55e          /* Wins, positive P/L */
--loss: #ef4444            /* Losses, negative P/L */
--warning: #f59e0b         /* Pending, alerts */

/* Text */
--text-primary: #f1f5f9    /* Main text */
--text-secondary: #cbd5e1  /* Secondary text */
--text-muted: #64748b      /* Muted text */

/* Borders */
--border: #334155          /* Subtle borders */
--border-focus: #00d4ff    /* Focus rings */

Tailwind Classes

<!-- Backgrounds -->
<div class="bg-ocean-950">Deep ocean background</div>
<div class="bg-slate-900">Card background</div>

<!-- Text -->
<p class="text-slate-100">Primary text</p>
<p class="text-slate-400">Secondary text</p>
<p class="text-slate-500">Muted text</p>

<!-- Accents -->
<button class="bg-tentacle-purple">CTA Button</button>
<span class="text-tentacle-cyan">Highlight</span>

<!-- Semantic -->
<span class="text-trading-profit">+$12.50</span>
<span class="text-trading-loss">-$5.20</span>

Typography

Font Families

• Headings & Body: Inter (modern, clean, professional)
• Data & Code: JetBrains Mono (numbers, tables, monospace)

Scale

<!-- Headings -->
<h1 class="text-4xl font-bold">Dashboard Title</h1>
<h2 class="text-2xl font-semibold">Section Header</h2>
<h3 class="text-xl font-medium">Card Title</h3>

<!-- Body -->
<p class="text-base">Regular text (16px)</p>
<p class="text-sm">Small text (14px)</p>
<p class="text-xs">Tiny text (12px)</p>

<!-- Data -->
<span class="font-mono text-sm">$123.45</span>
<code class="font-mono text-xs">0x1234...</code>

Spacing System

Use Tailwind's spacing scale (4px increments):

<!-- Padding -->
<div class="p-4">16px padding</div>
<div class="p-6">24px padding</div>
<div class="p-8">32px padding</div>

<!-- Margin -->
<div class="mb-4">16px bottom margin</div>
<div class="mt-6">24px top margin</div>

<!-- Gap (for flex/grid) -->
<div class="flex gap-4">16px gap</div>
<div class="grid gap-6">24px gap</div>

Border Radius

<!-- Buttons -->
<button class="rounded-lg">8px radius</button>

<!-- Cards -->
<div class="rounded-xl">12px radius</div>

<!-- Pills/Badges -->
<span class="rounded-full">Fully rounded</span>

Component Patterns

1. Glassmorphism Cards

Use for: Main content cards, modals, floating panels

// Glassmorphism Card Component
function GlassCard({ children, className = '' }) {
  return (
    <div className={`
      bg-slate-900/80 
      backdrop-blur-xl 
      border border-slate-700/50 
      rounded-xl 
      shadow-2xl 
      ${className}
    `}>
      {children}
    </div>
  );
}

// Usage
<GlassCard className="p-6">
  <h3 className="text-xl font-semibold mb-4">Portfolio Value</h3>
  <p className="text-3xl font-bold text-trading-profit">$1,234.56</p>
</GlassCard>

2. Data Tables

Use for: Bets, Markets, Trades tables

function DataTable({ columns, data }) {
  return (
    <div className="overflow-x-auto rounded-xl border border-slate-700">
      <table className="w-full">
        <thead className="bg-slate-800/50">
          <tr>
            {columns.map(col => (
              <th key={col.key} className="
                px-4 py-3 
                text-left text-xs font-semibold 
                text-slate-400 uppercase tracking-wider
              ">
                {col.label}
              </th>
            ))}
          </tr>
        </thead>
        <tbody className="divide-y divide-slate-700/50">
          {data.map((row, i) => (
            <tr key={i} className="
              hover:bg-slate-800/30 
              transition-colors duration-150
              cursor-pointer
            ">
              {/* Row cells */}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

3. Status Badges

Use for: Win/Loss, Pending, Filled/Unfilled status

function StatusBadge({ status, children }) {
  const variants = {
    win: 'bg-trading-profit/10 text-trading-profit border-trading-profit/20',
    loss: 'bg-trading-loss/10 text-trading-loss border-trading-loss/20',
    pending: 'bg-trading-pending/10 text-trading-pending border-trading-pending/20',
  };

  return (
    <span className={`
      inline-flex items-center gap-1.5
      px-2.5 py-1 
      rounded-full 
      text-xs font-semibold 
      border
      ${variants[status]}
    `}>
      {children}
    </span>
  );
}

// Usage
<StatusBadge status="win">
  <CheckIcon className="w-3 h-3" />
  WON
</StatusBadge>

4. Loading States

Use for: Skeleton screens, spinners

// Skeleton Card
function SkeletonCard() {
  return (
    <div className="bg-slate-900/80 rounded-xl p-6 animate-pulse">
      <div className="h-4 bg-slate-700 rounded w-1/4 mb-4"></div>
      <div className="h-8 bg-slate-700 rounded w-1/2"></div>
    </div>
  );
}

// Shimmer effect
<div className="relative overflow-hidden bg-slate-800 rounded">
  <div className="absolute inset-0 bg-gradient-to-r from-transparent via-slate-700/50 to-transparent animate-shimmer"></div>
</div>

5. Interactive Buttons

Use for: CTAs, actions, toggles

// Primary CTA
<button className="
  px-6 py-3 
  bg-gradient-to-r from-tentacle-purple to-blue-600 
  hover:from-tentacle-purple/90 hover:to-blue-600/90
  text-white font-semibold 
  rounded-lg 
  shadow-lg shadow-tentacle-purple/20
  transition-all duration-200
  hover:scale-105
  active:scale-95
">
  Place Bet
</button>

// Secondary Button
<button className="
  px-4 py-2 
  bg-slate-800 
  hover:bg-slate-700 
  border border-slate-600 
  text-slate-200 
  rounded-lg 
  transition-colors duration-150
">
  Cancel
</button>

// Icon Button
<button className="
  w-10 h-10 
  flex items-center justify-center 
  bg-slate-800 
  hover:bg-slate-700 
  border border-slate-600 
  rounded-lg 
  transition-colors duration-150
  group
">
  <SettingsIcon className="w-5 h-5 text-slate-400 group-hover:text-slate-200" />
</button>

Performance Guidelines

Real-Time Data Optimization

// ✅ GOOD: Memoize filtered/sorted data
const filteredBets = useMemo(() => {
  return bets.filter(bet => bet.status === filter);
}, [bets, filter]);

// ✅ GOOD: Stable callback references
const handleBetClick = useCallback((betId: string) => {
  // Handle click
}, []);

// ✅ GOOD: Debounce search input
const [searchQuery, setSearchQuery] = useState('');
const debouncedSearch = useMemo(
  () => debounce(setSearchQuery, 300),
  []
);

Code Splitting

// Split by route/tab
const SettingsPage = lazy(() => import('./pages/SettingsPage'));
const LogsPage = lazy(() => import('./pages/LogsPage'));

// Wrap in Suspense
<Suspense fallback={<SkeletonCard />}>
  <SettingsPage />
</Suspense>

Bundle Size

// ❌ BAD: Import entire library
import _ from 'lodash';

// ✅ GOOD: Import specific function
import debounce from 'lodash/debounce';

// ✅ BETTER: Use native methods when possible
const unique = [...new Set(array)];

Accessibility Requirements

Keyboard Navigation

// ✅ All interactive elements are keyboard accessible
<button 
  onClick={handleClick}
  onKeyDown={(e) => e.key === 'Enter' && handleClick()}
  className="focus:ring-2 focus:ring-tentacle-cyan focus:outline-none"
>
  Action
</button>

Focus States

/* Always visible focus rings */
.focus-visible:focus {
  @apply ring-2 ring-tentacle-cyan ring-offset-2 ring-offset-ocean-950;
}

ARIA Labels

// Icon-only buttons
<button aria-label="Open settings">
  <SettingsIcon />
</button>

// Status indicators
<span role="status" aria-live="polite">
  {loading ? 'Loading...' : 'Loaded'}
</span>

Color Contrast

• Minimum 4.5:1 for normal text
• Minimum 3:1 for large text (18px+)
• Use tools: WebAIM Contrast Checker

Development Workflow

1. Before Starting

• Read this SKILL.md
• Review current state report
• Check task.md for current phase

2. Design Phase

# Generate design system
python C:\Users\ginoj\.agents\skills\ui-ux-pro-max\scripts\search.py "trading dashboard fintech" --design-system -p "POLPO"

# Get specific guidance
python C:\Users\ginoj\.agents\skills\ui-ux-pro-max\scripts\search.py "real-time data" --domain chart

3. Implementation Phase

• Use Tailwind utility classes
• Follow component patterns above
• Apply performance optimizations
• Ensure accessibility

4. Review Phase

# Check accessibility
# (Use web-design-guidelines skill)

# Performance audit
# (Check vercel-react-best-practices rules)

Pre-Delivery Checklist

Visual Quality

• No emoji icons (use Lucide React icons)
• Consistent icon set throughout
• Hover states don't cause layout shift
• Glassmorphism cards have proper blur/opacity
• Color palette matches POLPO theme

Interaction

• All clickable elements have cursor-pointer
• Hover states provide clear feedback
• Transitions are smooth (150-300ms)
• Focus states visible (cyan ring)
• Loading states for async operations

Performance

• Tables use React.memo for rows
• Expensive calculations are memoized
• Callbacks are stable (useCallback)
• Tabs are lazy loaded
• No unnecessary re-renders

Accessibility

• All images/icons have alt text or aria-label
• Form inputs have associated labels
• Keyboard navigation works
• Focus order is logical
• Color contrast meets WCAG AA (4.5:1)

Responsive

• Works at 375px (mobile)
• Works at 768px (tablet)
• Works at 1024px (laptop)
• Works at 1440px (desktop)
• No horizontal scroll on mobile

Brand

• Octopus theme is evident
• Ocean color palette applied
• Fluid animations (tentacle-like)
• Professional yet distinctive
• Dark mode optimized

Quick Reference Commands

# Generate POLPO design system
python C:\Users\ginoj\.agents\skills\ui-ux-pro-max\scripts\search.py "trading dashboard fintech crypto dark professional" --design-system -p "POLPO" -f markdown

# Get chart recommendations
python C:\Users\ginoj\.agents\skills\ui-ux-pro-max\scripts\search.py "real-time financial" --domain chart

# Get UX guidelines
python C:\Users\ginoj\.agents\skills\ui-ux-pro-max\scripts\search.py "animation accessibility" --domain ux

# Get Tailwind patterns
python C:\Users\ginoj\.agents\skills\ui-ux-pro-max\scripts\search.py "responsive layout" --stack html-tailwind

Resources

• Global Skills: C:\Users\ginoj\.agents\skills\
• Current State Report: brain/current_state_report.md
• Skills Analysis: brain/skills_analysis.md
• Task Tracking: brain/task.md

🐙 Remember: POLPO is an intelligent octopus with 8 tentacles catching money from Polymarket. Every design decision should reflect this: fluid, smart, professional, and distinctive!