What problem does it solve?
Settings pages in the Sim codebase can drift from the shared design system, producing hand-rolled shells, inconsistent titles, literal pixel text sizes, and duplicated save/discard logic. This Skill provides a repeatable procedure to add new settings pages correctly and audit existing ones for compliance.
Core Features & Use Cases
- Add new settings pages: Register navigation metadata in navigation.ts, wire the section switch, and build the page body inside the shared SettingsPanel primitive with proper actions, search, and save/discard wiring.
- Audit existing pages: Run grep-based checks to find hand-rolled shells, title blocks, literal pixel text sizes, and non-centralized unsaved-changes handling, then migrate pages structurally without touching logic.
- Migrate list rows: Convert hand-rolled resource rows to the SettingsResourceRow primitive with correct trailing/badge/navigable semantics.
- Use Case: When asked to add a new billing settings tab, follow Mode A to register the nav item, lazy-load the component in the section switch, and compose the page inside SettingsPanel with SaveDiscardActions and the unsaved-changes guard.
Quick Start
Add a new settings page for API keys following the SettingsPanel conventions and verify it with type-check and biome.
