Empty State
Shared first-run shell for /dashboard/** — action-framed copy ("do this next", not "why is this empty"), a muted ghost preview of the real content shape instead of a decorative illustration (DESIGN.md bans those on functional screens), and a primary CTA.
Interview list — /dashboard/interviews
Ghost rows preview the real InterviewList shape instead of a generic illustration.
Пройди першу співбесіду
15 хвилин голосом — і вона з'явиться тут із оцінкою та розбором за критеріями.
Почати співбесіду| Prop | Type | Default | Description |
|---|---|---|---|
| visual | React.ReactNode | — | A muted ghost preview of the real content shape, never a decorative illustration. |
| title | string | — | Action-framed: what to do next, not why the screen is empty. |
| body | string | — | One supporting sentence. |
| ctaLabel / ctaHref | string? | — | Optional primary CTA link. |
Skill profile — /dashboard/profile and overview hero
GhostRadar sketches the hexagon SkillRadar will draw once there's data — SkillRadar itself returns null at zero coverage on purpose, so this is a separate, data-free silhouette, not a workaround.
Пройди першу співбесіду
Твій профіль навичок з'явиться тут одразу після першої оціненої співбесіди.
Почати співбесідуNo CTA
ctaLabel/ctaHref are optional — omit them when the empty state sits next to its own action elsewhere on the page.
Ще немає даних
Тут з'явиться інформація, коли вона буде.
VoiceMock was built by one designer
I'm Sergiy, a product designer. I built this trainer myself — research, design system, code. On LinkedIn I show how products like this come together, and what it changes in a designer's work.
Product Designer · AI Design Engineer · Designer for Startups
See it on LinkedIn