# Living UI

Use when building an animated or interactive widget, explainer or dashboard page: how...

- Repository: https://github.com/kirodotdev/KiroCrew (4711 stars)
- Category: Engineering
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add kirodotdev/KiroCrew --skill living-ui -g -a claude-code -y`
Codex: `npx skills add kirodotdev/KiroCrew --skill living-ui -g -a codex -y`
Cursor: `npx skills add kirodotdev/KiroCrew --skill living-ui -g -a cursor -y`
Gemini CLI: `npx skills add kirodotdev/KiroCrew --skill living-ui -g -a gemini-cli -y`

## Description

Use when building an animated or interactive widget, explainer or dashboard page: how motion feels, where the eye goes, where words sit, reduced motion, keyboard and screen readers. Style-neutral: it never picks colours, fonts or shapes. Pairs with the widgets skill.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Living UI

These rules make a live figure easy to follow in its first second. A live figure
is an inline `<mcwidget>` explainer, a crewmate's Dashboard page, or a standalone
HTML artifact. The rules say how motion feels, where the eye goes, where words go
and how to check the result.

They never pick a colour, a font or a shape. The theme, the user's request or the
author decides the look. Where a rule needs a colour, it names a theme variable:
`var(--accent)` for the one lit element, `var(--muted)` or a lower opacity for
everything else.

Load the [`widgets`](../widgets/SKILL.md) skill as well. It owns the widget
format, the theme variables, the frame's CSP and the animation table these rules
start from. On a Dashboard page, the `dashboard` skill owns the page contract.

## The gate: freeze one frame

Run the `widgets` skill's freeze-one-frame test first: picture one still frame of
the figure. If that frame carries the meaning, the figure stays still and the
motion rules M, T, L and X do not apply. It may still take input, as a slider or
a clickable diagram does, so rules F (focus), W (words), V (verify) and the
Accessibility section apply all the same.

The motion rules say how to move once motion has earned its place. None of them
is a reason to make something move.

## M. Motion feels like a real thing

The rest: https://github.com/kirodotdev/KiroCrew/blob/HEAD/src/kiro_crew/builtin_skills/living-ui/SKILL.md