Klarhimmel UI

Team screens prompt

The people on an account: members with roles, an invite form and pending invites.

Prompt

Prompt

Use the klarhimmel-design skill. Build the team page for {product}: roles {roles}, and an invite form. Install: npx shadcn add @klarhimmel/app-team-members @klarhimmel/app-team-invite @klarhimmel/app-team-pending (remove what you do not use) Pick: - app-team-members: members with a role select each; the owner row is locked - app-team-invite: email and role, with idle, sending, sent and error states - app-team-pending: invites not yet accepted, with Resend and Revoke Props: roles as a list of text; members { name, email, sample (their role), locked }; invite state enum from your request status; pending invites { email, role, sent }. Copy: Roles are single words. The invite error says what is wrong with the address. Empty states say who appears here. Accessibility: Each role select is named for its member; Resend and Revoke name their invite; revoking is announced in a live region; the invite error marks the field and says why in text. 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: sample is one of roles; owner cannot be changed; revoke is announced.

Variables

VariableWhat to fill inExample
{product}The appExempelhotellet admin
{roles}Two to five rolesOwner, Admin, Member, Viewer

A good result

Sample is one of roles. Owner cannot be changed. Revoke is announced.

checklist.md
- [ ] sample is one of roles
- [ ] owner cannot be changed
- [ ] revoke is announced