Settings screens prompt

Settings pages: a profile form, notification preferences and a danger zone.

Prompt

Use the klarhimmel-design skill. Build the settings page for {product}: {settings}. Install: npx shadcn add @klarhimmel/app-settings-profile @klarhimmel/app-settings-notifications @klarhimmel/app-settings-danger (remove what you do not use) Pick: - app-settings-profile: a profile form with idle, saving, saved, error states - app-settings-notifications: preferences as switches (instant) or checkboxes (with a save button) - app-settings-danger: irreversible actions, confirmed by typing a phrase Props: state enum on the profile form from your save status; fields with label and hint; notification rows carry their on/off state; danger items state the consequence. Copy: Buttons say what they do ("Save changes"). Each danger row explains what is lost and cannot be undone. Accessibility: Every field has a label; the error marks the field and says why in text. Switches and checkboxes are labelled; the danger button stays disabled until the phrase matches. 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: one primary save action; errors are text next to the field; danger kept apart from the rest.

Variables

Variable	What to fill in	Example
`{product}`	The app	Exempelhotellet admin
`{settings}`	What people can change	profile, notification emails, deleting the account

Blocks it uses

A good result

One primary save action. Errors are text next to the field. Danger kept apart from the rest.

checklist.md

- [ ] one primary save action
- [ ] errors are text next to the field
- [ ] danger kept apart from the rest