# Settings Design

> Settings page architecture, preference organization, toggle patterns, and configuration UX.

- Skill: `dragoon0x/settings-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/settings-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/settings-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/settings-design

---


# Settings Design

## Organization

### Group by Domain
- Account (profile, email, password)
- Appearance (theme, language, density)
- Notifications (email, push, in-app)
- Privacy & Security (2FA, data, permissions)
- Integrations (connected apps, API)
- Billing (plan, payment, invoices)

### Navigation
- Sidebar with sections on desktop.
- Stacked list on mobile.
- Search within settings for 20+ options.

## Patterns
- **Toggles** for on/off binary choices. Apply immediately, no save button.
- **Radio groups** for mutually exclusive options (theme: light/dark/system).
- **Dropdowns** for 4+ options in a list.
- **Save button** only when changes are complex and need review before applying.

## Feedback
- Confirmation after saving: inline "Saved" text, not a modal.
- Preview for visual changes (theme, layout) before committing.
- Undo for accidental changes.
- Warning before destructive settings (delete account, revoke access).

## Anti-Patterns
- Settings that require a page reload to take effect (apply instantly).
- Nested settings pages more than 2 levels deep.
- Toggle labels that don't clearly state what on/off means.
- "Advanced settings" that contain commonly needed options.