The components, ontology, map types and principle linter behind the Skydio pages, packaged as one stylesheet and one script. Every specimen below is drawn at load by calling the kit with the props shown, so this page always matches the kit.
Load the two files, mount the icon sprite, and render inside an element with class sky. Components are pure functions: props in, an HTML string out.
<link rel="stylesheet" href="kit/skydio-ui.css">
<script src="kit/skydio-ui.js"></script>
<div class="sky" id="screen"></div>
<script>
const K = SkydioUI; K.mount();
screen.innerHTML = K.PatrolCard({ mission, aircraft });
const results = K.lint(screen, { surface: "desktop",
focus: "X10-A", aircraft });
</script>
Files in this kit
kit/skydio-ui.css tokens + component styles (.sky scope)
kit/skydio-ui.js SkydioUI: ontology, components,
basemaps, scenario resolver, lint()
skydio-ontology.json the same model as data
Live apps also use
data-act / data-id operator actions (click delegation)
updateBinds() live telemetry text
updatePositions() marker positions and headings
Defined once on :root in skydio-ui.css. Swatches read the live CSS values.
The attributes components emit. The linter and live apps read these, so a new component is checked by the same rules as soon as it emits them.
| Attribute | Meaning | Read by |
|---|---|---|
data-entity · data-type · data-comp · data-st | Which ontology entity, of which type, drawn by which component, in which state | Entity trace, P03 |
data-card · data-row="1|2|3" | An entity card and its three rows | P05, P11 |
data-state | The state badge | P05 |
data-telemetry | A measurement that must carry a unit | P06 |
data-aircraft-container · data-stop | A view of one aircraft and its safe-stop control | P02 |
data-overlay | Drawn over map or video imagery | P09 |
data-cot · data-dialect="tak" | A TAK affiliation symbol, TAK-voiced text | P07 |
data-touch | A handheld touch target | P04, P08 |
data-incident · data-f="source|age|owner|close" | An incident and its four required fields | P10 |
data-control | A control or badge (radius checked) | P12 |
data-pane="nav|list|map|feeds" · data-fleet | Desktop pane order, fleet commands | P04 |
data-imagery | Map or video stand-in, excluded from color checks | P01 |
data-act · data-id | An operator action | Live apps |
data-bk/bf/bu · data-pk · data-rot · data-ring | Live telemetry, position, heading and battery-ring bindings | updateBinds(), updatePositions() |
Reverse-engineered from public Skydio marketing screenshots. Not affiliated with or endorsed by Skydio. Names, values and the ontology are an outside reading of the product.