Living UI
Use when building an animated or interactive widget, explainer or dashboard page: how...
Install
npx skills add kirodotdev/KiroCrew --skill living-ui -g -a claude-code -y- Repository
- kirodotdev/KiroCrew4.7k
- Category
- Engineering
- Updated
- 3d ago
- License
- Apache-2.0
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- Yes, review before use
What it does
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.
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 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.
