- Agent kit
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
| Variable | What to fill in | Example |
|---|---|---|
{product} | The app | Exempelhotellet admin |
{roles} | Two to five roles | Owner, Admin, Member, Viewer |
Blocks it uses
A good result
Sample is one of roles. Owner cannot be changed. Revoke is announced.
- [ ] sample is one of roles
- [ ] owner cannot be changed
- [ ] revoke is announced