Slow connection, just a moment…
The Lab / Skills
skill · Design systems

Component state matrix

Generates every state of a component: default, hover, focus, disabled, error, loading, empty.

Level: BeginnerPublished 2026/09/22Placeholder

Preview: all content, comments and numbers here are placeholders until the Lab is connected to the server.

01

Why

Most handoff problems come from states nobody drew. The matrix makes the missing visible.

02

Output

A table of states, when each appears and what changes, ready to paste into the handoff file.

Prompt

· Placeholder

Video not available yetThis is a placeholder video. The player appears here once the real video is uploaded.

Chapters

    Contribute to the Lab

    Mohammed reviews what you share before it goes public. You will see it in place right away, marked “Under review”.

    Type

    What it does and which tool it works with.

    Say hello