Mark Learst - Senior Frontend & Design Engineer

The Challenge

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.

The Solution

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

Technical Implementation

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

Impact & Deliverables

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.

Skydio Autonomy Widget

Impact