Skydio Autonomy Widget

Skydio, a leading autonomous drone company, needed a production-grade React widget for their Rivit design language to control real-time drone missions. The challenge required:

• Highly composable widget system supporting multiple mission types (Waypoint, RTD, Orbit, Tracking)
• Real-time UI updates synchronized with drone state
• Config-driven architecture for seamless Figma-to-code parity
• Responsive design adapting from mobile to desktop control interfaces
• Comprehensive Storybook documentation for product and engineering teams

The widget needed to function as a "UI microservice" that could be integrated into Skydio's drone control systems with minimal coupling.

I built the Autonomy Widget using a config-driven architecture that maps all actions, icons, and controls declaratively—making UI parity with Figma designs effortless.

Config-Driven Architecture

Central action configuration pattern enabling declarative UI:

// AutonomyWidget.configs.ts
const ACTION_CONFIGS = {
  pause: {
    icon: PauseIcon,
    label: 'Pause',
    tooltip: 'Pause current mission',
    variant: 'secondary'
  },
  orbit: {
    icon: OrbitIcon,
    label: 'Orbit',
    tooltip: 'Enable orbit mode',
    variant: 'primary'
  },
  // ... 15+ mission actions
} as const

// Usage: Automatic UI generation
<IconButton {...ACTION_CONFIGS[action]} />

State Management Pattern

React Context Provider pattern for unified widget state:

• Central state provider managing mission type, timer, and action states
• Remote state synchronization for real-time drone updates
• Event subscription hooks for analytics telemetry
• Config injection at runtime for dynamic UI behavior

Component System

Built highly composable React components:

• Dynamic Timer: Circular countdown ring with animated icon transitions
• OrbitSlider: Dual progress indicators with chevron controls
• IconButton: Shared component with icons, tooltips, and labels
• StatusMessage: Expandable area for mission updates
• Tooltip System: Custom accessible tooltips with ARIA support

Responsive Design

Adaptive layouts using Tailwind CSS v4:

• Compact mobile mode with minimal controls
• Expanded desktop mode showing full action sets
• Design tokens synced with Figma Variables
• Responsive by default with mobile-first approach

Storybook Documentation

Comprehensive component playground:

• Storybook 9 with Vite integration for fast builds
• Accessibility addon (@storybook/addon-a11y) for WCAG testing
• Theme switching addon for light/dark mode validation
• Component Docs tabs with prop tables and usage examples

Barrel Architecture Pattern

Modular exports for clean import paths:

// Clean imports via barrel pattern
import {
  AutonomyWidget,
  IconButton,
  OrbitSlider
} from '@/components'

// Instead of deep imports
import AutonomyWidget from '@/components/AutonomyWidget'
import IconButton from '@/components/IconButton'

Figma-to-Code Workflow

Streamlined design handoff:

• Figma-exported SVG icons imported as React components
• Design tokens from Figma Variables mapped to Tailwind config
• Config-driven approach maintains 1:1 parity with Figma designs
• Minimal translation layer between design and code

Integration Patterns

Widget functions as "UI microservice":

• Remote state synchronization with drone control systems
• Config injection at runtime for dynamic behavior
• Event subscription hooks for analytics telemetry
• Minimal coupling to external systems

Build & Tooling

Modern development stack:

• Vite for fast builds and HMR
• pnpm workspace management
• ESLint configuration for code quality
• TypeScript strict mode for type safety
• Deployed via Vercel for Storybook hosting

The Autonomy Widget established a production-grade foundation for Skydio's drone control interfaces:

• Production-ready widget system powering real-time autonomous drone missions (Waypoint, RTD, Orbit, Tracking)
• Config-driven architecture enabling effortless Figma-to-code parity through declarative ACTION_CONFIGS mapping
• Storybook 9 documentation with accessibility testing, prop tables, and interactive examples for team onboarding
• Responsive design adapting from compact mobile controls to expanded desktop interfaces
• UI-as-API pattern functioning as microservice with remote state sync and event hooks
• Team onboarding training product and engineering teams on component patterns and adoption workflows

Delivered a composable, well-documented component library that accelerated Skydio's product development while maintaining design system consistency across their autonomous drone platform.