shadcn.io is not affiliated with official shadcn/ui
Interview Coach AI Block for Vue
A practice window where a coach asks three behavioural questions, then grades each typed answer on the four STAR parts with a keyword check, two notes, a word count and a model answer you can copy.
Installation
Overview
Let people rehearse an interview and see what is missing, with this AI interview coach for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Mockloft, an interview practice partner: the top bar says "Question 2 of 3" in a Badge over a thin Progress bar, and the log is the coach's question and your typed answer as Message and Bubble rows. After each answer a feedback card lands in the log: a STAR rubric (Situation, Task, Action, Result) with a glyph and a word for each part, the word count, two notes picked by what is missing, a Collapsible Model answer with a Copy Button, and Next question. After the third answer the coach sums up how many of the four parts your answers covered on average. The composer's Shine Button is the only colored control, and everything moves with CSS only. For career sites, bootcamps and any product that coaches a spoken answer.
FAQ
How is the rubric worked out?
By a keyword check in plain code, not by a model. A part is covered when one of its words appears in your answer: places and times for Situation, "responsible" or "goal" for Task, first-person verbs such as "I asked" or "I built" for Action; Result needs a number or the word "result". The word count and the two notes come from the same text. It is a rough guide, and the window says so; change the lists at the top of the file to suit your own questions.
What stays in the page, and how do I make it real?
Everything. The three questions, their model answers and the feedback are typed or computed in the page, and nothing is sent. To make it real, send the answer to your model in post with the question and the rubric you want, and render what comes back in the same feedback card; the card only needs the four parts, the notes and a model answer.
How does a session run?
You answer, a short typing line shows, and the feedback card lands. "Next question" brings the next question and then spends itself, so each answer is graded once. After the third, "See the summary" shows the average ("2.7 of 4") and Start over resets the window. Sending while a card waits for Next only reminds you to press it.
What does the Model answer do?
It opens in place with a worked answer to the question, written to cover all four parts, and the button next to it copies the text. The copy result is announced once, in the status line under the composer.