Klarhimmel UI

Authentication screens prompt

Getting a person in: sign in, sign up with consent, password reset and a one-time code.

Prompt

Prompt

Use the klarhimmel-design skill. Build the sign-in flow for {product}: sign in, sign up, reset and a one-time code after {trigger}. Install: npx shadcn add @klarhimmel/app-auth-signin @klarhimmel/app-auth-signup @klarhimmel/app-auth-reset @klarhimmel/app-auth-code (remove what you do not use) Pick: - app-auth-signin: email, password with show or hide, forgot link, error banner - app-auth-signup: adds a required consent checkbox naming the terms - app-auth-reset: one email field; the confirmation never says if the account exists - app-auth-code: six boxes that act as one: paste, Backspace, arrows, autofill Props: state enum on each from your request status. action and method make a native form; otherwise handle submit. The sign-up consent sentence is strict: invalid text shows an invalid state, never a default. Copy: Errors say what to do and never whether an account exists. The reset confirmation is the same for every address. Accessibility: Sign in uses autocomplete username and current-password; sign up new-password; the code boxes are one named group and the first has one-time-code. Never: viewport variants (md:, lg:), style=, text or images outside Text and Media, fields the schema lacks. Shorten copy to fit the limits. Done when: autocomplete tokens on every field; a failed submit marks the field and says why in text; consent cannot be skipped; a paste of six digits fills the code.

Variables

VariableWhat to fill inExample
{product}The appExempelhotellet admin
{trigger}When a code is asked fora new device signs in

A good result

Autocomplete tokens on every field. A failed submit marks the field and says why in text. Consent cannot be skipped.

checklist.md
- [ ] autocomplete tokens on every field
- [ ] a failed submit marks the field and says why in text
- [ ] consent cannot be skipped
- [ ] a paste of six digits fills the code