add-settings-page

name	add-settings-page
description	Add a new Sim settings page, or audit existing settings pages for design-system compliance with the shared SettingsPanel layout. Use when creating a settings tab, or when asked to check/clean up settings pages so they match the design system (consistent title, header, search, spacing).

Settings Page (add / audit)

Sim settings pages all render through the shared SettingsPanel primitive, which owns the page chrome and renders a nav-driven title + description. The full convention lives in .claude/rules/sim-settings-pages.md — read it first; this skill is the procedure.

Key paths:

• Layout primitive: apps/sim/app/workspace/[workspaceId]/settings/components/settings-panel/settings-panel.tsx
• Nav metadata (titles + descriptions): apps/sim/components/settings/navigation.ts
• Section switch + provider: apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
• Pages: apps/sim/app/workspace/[workspaceId]/settings/components/<name>/<name>.tsx and EE pages under apps/sim/ee/<feature>/components/

Mode A — Add a new settings page

1. Navigation. In navigation.ts: add the id to the SettingsSection union, then a NavigationItem with label AND a one-line description (verb-first, ~40–55 chars, product voice per .claude/rules/constitution.md). Place it in the right section group and set any gating flags (requiresHosted, requiresEnterprise, etc.).
2. Wire the switch. Add the component to the effectiveSection render switch in (lazy like its siblings).