[Feature] Reorganize Settings page and Skills page — fix layout, flow, and consistency #396

Summary

The Settings and Skills pages need a cleanup pass to fix inconsistent layouts, improve navigation flow, and bring visual consistency across both surfaces.

Problem

Settings page

• Inconsistent padding/spacing — 25+ panels use a mix of p-2, p-3, p-4, p-6, p-8 with no standard. SettingsHeader uses px-5 py-3 while panels use p-4, creating visual misalignment.
• Deep nesting with no wayfinding — 3 levels deep (Home → Section → Panel) with no breadcrumbs, no search, and no way to jump directly to a panel.
• Placeholder panels — Profile and Advanced panels are empty "coming soon" placeholders that clutter the menu.
• Oversized panels — LocalModelPanel (~800 lines) and BillingPanel (~400 lines) are monolithic and hard to scan; need decomposition into smaller components.
• Unused code — Animation hook (useSettingsAnimation) exists but is unused.
• Inconsistent navigation — Team management uses a separate URL pattern (team/manage/:teamId) from the rest of settings.
• Mixed color/spacing patterns — Some panels use custom sage/coral/primary/stone colors inconsistently; px-3 py-2 is common for small controls but p-4 for sections, with no clear rule.

Skills page

• Mixed layout paradigms — Built-in skills use cards, channel integrations use cards, but 3rd party skills use a flat row-based list. Three different visual treatments on one page.
• No categorization — 3rd party skills are a flat alphabetical list with no grouping by category (e.g., "Productivity", "Communication", "Development").
• No search or filter — As the skill catalog grows, there's no way to find a specific skill.
• Duplicate management UI — The Skills page and Settings > Skills panel both manage skills but with different UIs and different data flows.
• Inconsistent status indicators — Status colors differ between sections (bg-sage-500 vs bg-sage-400), and CTA labels vary ("Configure" vs "Setup" vs "Enable") without a clear pattern.
• Action button overload — SkillRow shows up to 4 action buttons (Sync, Settings, Debug, Enable/Configure) inline, creating visual clutter.

Solution

Settings page cleanup

• Standardize padding/spacing across all 25+ panels (pick one convention, apply everywhere)
• Add breadcrumb navigation so users know where they are in the 3-level hierarchy
• Remove or complete placeholder panels (Profile, Advanced) — either build them or hide them
• Decompose large panels (LocalModelPanel, BillingPanel) into smaller sub-components
• Clean up unused animation hook and dead code
• Unify the team management navigation pattern with the rest of settings
• Establish and document a consistent color/spacing convention for panel internals

Skills page cleanup

• Unify the layout — pick one paradigm (cards or rows) and apply it consistently across built-in, channels, and 3rd party skills
• Add skill categorization with section headers or tabs
• Add search/filter for the skill list
• Deduplicate skills management — single source of truth between Skills page and Settings panel
• Standardize status colors, CTA labels, and action button patterns
• Reduce action button clutter with a menu or contextual approach

Acceptance criteria

• Consistent settings padding — All settings panels use the same padding/spacing convention
• Settings breadcrumbs — Users can see their location in the settings hierarchy and jump back to any level
• No placeholder panels — Profile and Advanced are either implemented or hidden from the menu
• Panel decomposition — Large panels (LocalModel, Billing) are broken into smaller, scannable sub-components
• Unified skills layout — All skill types (built-in, channels, 3rd party) use the same visual treatment
• Skill categorization — 3rd party skills are grouped by category
• Skills search/filter — Users can search or filter the skill list
• Deduplicated skills UI — Single management surface, no redundant Settings panel
• Consistent status/CTA patterns — Standardized status colors and action button labels across skills

Related

• Settings system docs: .claude/rules/15-settings-modal-system.md
• Design system: .claude/rules/12-design-system.md, docs/DESIGN_GUIDELINES.md
• Key files:
  • app/src/pages/Settings.tsx — route definitions
  • app/src/components/settings/SettingsHome.tsx — main menu
  • app/src/components/settings/panels/ — all 25+ panels
  • app/src/pages/Skills.tsx — main skills page
  • app/src/components/skills/ — skill components
  • app/src/components/SkillsGrid.tsx — dashboard skills table
  • app/src/components/settings/panels/SkillsPanel.tsx — duplicate skills management