Unify Settings cards

[shaunandrews]

Related issues

• Related to STU-2105
• Stacked on Add Agent Instructions toggle #4542.
• Extracted from the design exploration in Design Exploration: Redesign global app settings: two tabs, a shared design system, and an account sidebar #4316.

How AI was used in this PR

Codex separated the shared card language from the broader settings redesign, introduced a reusable card primitive, migrated the Keyboard, Skills, and MCP surfaces, and verified the layouts at desktop and narrow widths in both color schemes. The final diff and rendered UI were reviewed interactively.

Proposed Changes

• Give Keyboard, Skills, and MCP one consistent card header, description, action, list, and divider treatment.
• Present keyboard shortcuts as one scannable card, with Composer and Site preview side by side on wide windows and stacked on narrow windows.
• Keep optional Skills actions aligned without shifting the card heading as data loads.
• Establish a reusable card primitive so follow-up settings work can compose existing sections without duplicating header markup or drifting visually.

This PR intentionally preserves all six Settings tabs and does not relocate any controls. It improves the current interface on its own while preparing the next layers of the stack.

Screenshots

Light	Dark

Testing Instructions

1. Check out this branch with Add Agent Instructions toggle #4542 and Improve Settings usage meters #4540 beneath it.
2. Run npm run cli:build:ui && node apps/cli/dist/cli/main.mjs ui --no-open.
3. Open Settings → Keyboard and confirm all shortcuts appear in one card.
4. Resize below 640px and confirm Composer and Site preview stack without horizontal overflow.
5. Open Settings → Skills and confirm its title, description, optional Install all action, states, and skill rows share the same card treatment.
6. Open Settings → MCP and confirm the description and configuration block fit the shared card.
7. Check all three tabs in Light and Dark appearance settings.

Verified on this branch:

• npx eslint --fix on all modified TypeScript files
• npm run typecheck
• npm test -- apps/ui/src/components/settings-view/skills-panel.test.tsx apps/ui/src/components/settings-view/mcp-panel.test.tsx apps/ui/src/components/settings-view/index.test.tsx (25 tests)
• npm run cli:build:ui
• Browser verification at desktop and 620px widths in light and dark themes with no console errors

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?