../work

Skydio Autonomy Widget

Built a React mission-control widget implementing Skydio's Rivit design language, with configurable actions, shared state, and Storybook documentation.

Storybook

One widget, four mission types

Orbit Mode in the public Storybook. Inspect the timer, mission actions, and orbit control in the running component example.View original

Orbit mode

Skydio Autonomy Widget in Storybook Orbit Mode, showing Orbiting status, a circular timer, Stop control, and orbit slider.

Orbit Mode in the public Storybook. Inspect the timer, mission actions, and orbit control in the running component example.

View original
1 / 3

The Skydio Autonomy Widget is a React interface for drone mission controls. As a frontend consultant, I built its component architecture and Storybook documentation, implementing Skydio's Rivit design language. The delivered widget supports Waypoint, RTD, Orbit, and Tracking mission types.

The widget was designed as a "UI microservice" with minimal coupling to Skydio's control systems and layouts for mobile and desktop. The linked Storybook lets reviewers inspect the components, their props, and interactive examples.

My role
Frontend Consultant - Component Architecture & Storybook
Timeline
2024 (Contract)
Built with
ReactTypeScriptStorybookTailwind CSSViteConfig-Driven UI
In this case study

Actions come from configuration

I put each action's icon, label, tooltip, and variant in a shared configuration. Controls read that configuration to render mission actions:

typescript
// 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]} />

Mission state and controls

A React Context provider manages mission type, timer, and action states. Remote state synchronization, event subscription hooks for analytics telemetry, and runtime config injection connect the widget to the surrounding application.

The component system includes:
  • 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 tooltips with ARIA support

Reviewing component states

I documented the components in Storybook with prop tables and usage examples for product and engineering teams. The stories include:

  • Storybook with Vite integration
  • Accessibility addon (@storybook/addon-a11y) for automated accessibility checks
  • Theme switching addon for light/dark mode validation
  • Component Docs tabs with prop tables and usage examples

A component system the team can extend

Figma-exported SVG icons became React components, and Figma Variables mapped to the Tailwind config. Tailwind CSS layouts provide compact mobile controls and an expanded desktop mode with full action sets.

Component imports and build setup

Component exports

Shared exports give consumers one component import path:
typescript
// 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'

Build setup

The development setup includes:
  • 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

Handoff through Storybook

I delivered the configurable widget system, responsive components, and Storybook documentation, and trained product and engineering teams on component patterns and adoption workflows.

Project notes

Delivered

React widget system for autonomous drone mission controls

Storybook

Interactive component documentation with accessibility testing

Config-Driven

Declarative action configuration and runtime state integration